- 締切済み
fc2ブログで、記事の文章を中央に揃える方法
タイトルそのままなのですが、FC2ブログを利用しておりまして、 記事の中身の文章を画像も含めて中央揃えにする方法を教えてください。 <center></center>を利用して中央揃えにするのは知っているのですが、 いちいちタグを打ち込むのが面倒です。出来ることならcssの一部を変更して、一気に中央揃えに出来ると便利と思い、cssをいじってみたのですが上手くいかず・・・ 使っているテンプレートは lace-d3c という名前です。 初心者・・・ではないので、ある程度複雑でも構いません。 丁寧に教えてくださる方、お願いします。
- みんなの回答 (2)
- 専門家の回答
みんなの回答
- 756co
- ベストアンサー率79% (162/203)
スタイルシートを編集します。 スタイルシートの入力部分を少しスクロールして /*記事部分*/ と記されているところから少し下にある .contents_body { margin:10px 15px; overflow:hidden; } を見つけてください。 そこへ text-align:center; を書き足します。 以下のようになります .contents_body { margin:10px 15px; overflow:hidden; text-align:center; } これで保存してください。 テンプレートのHTML・スタイルシートを編集する場合、 あらかじめバックアップをとっておくか 複製しておくことをお勧めします。
<div class="contents_body"> <div align="center"> ※※※ <%topentry_body> <!--more_link--> <!--BisEntryIfExtended--> <span id="varP<%topentry_no>"> <a href="<%topentry_link>#<%topentry_no>" onclick="showMore(<%topentry_no>,'<%topentry_link>#<%topentry_no>');return false;"> >> ReadMore</a> </span> <div id="varXYZ<%topentry_no>" style="display: none"> <%topentry_more><br clear="all"> <a href="#<%topentry_no>" onclick="showMore(<%topentry_no>,0);return true;">Return << </a> </div> <!--/BisEntryIfExtended--> <!--/more_link--> <!--more--><a name="more" id="more"></a> * * * <%topentry_more><!--/more--> </div> ※※※ </div> でいかがでしょうか?「※※※」が追加した部分です。 <%topentry_body>が本文、「続きを読む」が<%topentry_more> の繰り返し変数(?)なので、 それらを<div align="center">で囲ってみましたら、 画像はわかりませんが記事はとりあえず中央になりました。 閉じタグの位置は自信ありません;
お礼
教えてくださった通りやってみたところ、記事が中央になったのを確認しました。 丁寧に教えてくださり、ありがとうございました!
お礼
中央に揃える方法は2通りあるのですね。 こちらのやり方は単純明快で分かりやすくて良いですね。 この質問を期に、cssについて学んでみたいと思います。 ありがとうございました。