記事をページの真ん中に配置する(センタリング)方法
テンプレートキングでサイトを作成していたら、記事が左に寄ってしまいました。
こちらのサイトに解決策が記載されていましたので、利用させていただきました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- body { margin:0px; /* ページ全体のmargin */ padding:0px; /* ページ全体のpadding */ text-align:center; /* 下記のautoに未対応用のセンタリング */ } #main { margin-left:auto; /* 左側マージンを自動的に空ける */ margin-right:auto; /* 右側マージンを自動的に空ける */ text-align:left; /* 中身を左側表示に戻す */ width:650px; /* 幅を決定する */ } --> </style> </head> <body> <div id="main">この中にページ内容を入れます。</div> </body> </html>
今回は、stylesheetを触らず、カスタマイズ ー>追加CSS欄にコードを挿入しました。
カスタマイズに追加CSS欄がない場合は、投稿の編集ページの一番上にある「表示オプション」をクリックして、「カスタムCSS」にチェックを入れると、ページの一番下に「カスタムCSS」を挿入する欄が表示されます。
挿入したコード:
body
{
margin:0px; /* ページ全体のmargin */
padding:0px; /* ページ全体のpadding */
text-align:center; /* 下記のautoに未対応用のセンタリング */
}
#main
{
margin-left:auto; /* 左側マージンを自動的に空ける */
margin-right:auto; /* 右側マージンを自動的に空ける */
text-align:left; /* 中身を左側表示に戻す */
width:650px; /* 幅を決定する */
}
これで、確かにページの真ん中に記事がセンタリングされました。
しかし、フッターなどの文字もセンタリングされてしまいました。
これの問題は、
text-align:center; /* 下記のautoに未対応用のセンタリング */
をコメントアウトすることで解消しました。
これで、目的が果たせました。