画像を投稿記事の中央に配置するスタイルシート
本ブログの画像は、ほとんどが左寄せになっています。好みもあるとは思いますが、私は単純に画像を左寄せにすることによって、テキストを可能な限り多くしようというのが意図なのですが。
しかし、画像が大きくなると、どうしても左寄せでは不恰好になってしまう。そこで、これまでは、画像を縮小して左寄せにしていたのですが、できることなら大きな画像を投稿記事の中央に配置できたらな~と考えていたのですが、どうもそのためのスタイルシートの構成が解りませんでした。
そんな基本的なことを・・・と考えていらっしゃる方々も多いとは思いますが・・・どうもネットを検索しても解りやすい説明が見つけられませんでした。
すると、何ともタイミングが良いことに、「小粋空間::CSS でブログ本文の画像だけをセンタリングする」という投稿記事が公開されました!な~るほど!
そこで、上記の投稿記事を参考に、本ブログの形式に合わせて、以下のコードを追加しました。
img.aligncenter, img.center {
display: block;
margin: 0 auto;
text-align: center;
border:1px solid #994400;}
これで、投稿記事の img タグに class を指定することで、画像が見事投稿記事の中央に!興味がある方は、参考までに、本ブログの投稿記事「Firefox の拡張機能をリストしてみた!」にある画像を確認してみて下さい。
どうです、見事でしょ!(って、大袈裟かな・・・)