News
2008年4月16日
エントリー本文
CSS でブログ本文の画像だけをセンタリングする
ブログのエントリー本文は、一般的に左寄せで表示しますが、「本文中の画像だけをセンタリングしたい場合はどうすればいいですか?」というご質問を頂きましたので、本エントリーで紹介します。
このカスタマイズを行えば、下の画面のように、画像だけをセンタリングすることができます。

ちなみに、これは昨年の11月に頂いた質問で、もっと早くエントリーを公開する予定でしたが、完全に忘却の彼方でした。大変申し訳ありません。
1.設定方法
エントリー全体が、
class="entry"
という class 属性で括られていると仮定した場合、CSS に、
.entry img {
display:block;
margin: 0 auto;
text-align: center;
}
を追加するだけです。
class属性名が異なる場合は .entry の部分を変更してください。また、セレクタ名を img という要素セレクタにしてしまうと、ブログ全体に設定が蔓延してしまうので、必ずエントリー本文に絞り込むセレクタを設定してください。
2.Movable Type 4 の場合
Movable Type 4 であれば、ブログ記事に画像をアップロードした時に配置の設定が可能です。「位置」欄にある「中央」を選択すればOKです。

この設定を行うと、img 要素に style 属性として、
style="margin: 0pt auto 20px; text-align: center; display: block;"
が設定されます。
img 要素にダイレクトに CSS が設定されるので、カスケードの優先度から、テンプレートを入れ替えても効果は変わりません。
Posted by yujiro
この記事を読んだ人はこんな記事も読んでいます
- 「Movable Type プロフェッショナル・スタイル」重版決定
- CSSでブロックレベル要素をセンタリングする
- EntryCategory プラグイン
- Seesaa ブログでフッタバナーがセンタリングされない不具合を修正
- CSSで画像に影をつける(ドロップシャドウ)
- CSS の after 擬似要素で回り込みを解除する
- リンク画像の枠線を消す
- CSS でヘッダーに画像を表示する for Movable Type 4
- CSS の画像置換で画像にリンクを設定する
- リストマークの画像のずれを修正する
- IE7 で pre 要素が適正に表示されない不具合を修正
- CSS ネガティブマージンで重なった要素のリンクをクリックできるようにする
- CSS でヘッダーに画像を表示する for Movable Type 4
- CSSでブログに影をつける(ドロップシャドウ:Movable Type 4.x 配布テンプレート版)
- Highslide JS でサムネイル画像を拡大表示する(設定方法の変更)
- CSS の画像置換で画像にリンクを設定する
- XREA のバナー広告を固定レイアウトのヘッダに表示する
- グローバルナビゲーション(その1:基本スタイル)
- 「追記文章の折りたたみ 2.0」でIE7の不具合を解消する
- サブカテゴリーリストのツリー画像で親カテゴリーのみ異なる画像を表示する
- 公開テンプレートにフッタを追加する(2カラム版)
- CSS の after 擬似要素で回り込みを解除する
- テンプレートカスタマイズ支援ツール Column Resizer
- サイドバーのタイトル背景をカラム幅にあわせて表示する
- 公開テンプレートのサイドバーのカラム幅を変更する
- CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方
- CSSでブログに影をつける(ドロップシャドウ)
- IE7 の CSS ハック
- CSSでブロックレベル要素をセンタリングする
- 3カラムレイアウトをナビゲーションバー部分に適用する
人気エントリー
Hatena Hot Entries
Hatena Entries
トラックバックURL
コメントする
greeting
