WordPress個別サポート

WordPressの投稿や固定ページに入力する箇条書きや画像は中央寄せにしたいこともあります。たとえば、テキストエディタに次のようなHTMLを入力して箇条書きを作成します。

<div id="list01">
<ul>
<li>WordPressによるホームページ作成講座</li>
<li>WordPress個別サポート</li>
<li>WordPressマスター講座</li>
</ul>
</div>

「text-align: center;」を使ってセンタリングしようと考えますが、うまくいきません。

/* うまくいかない中央寄せ */
div#list01 {
    text-align: center;
}

表示結果は次のようにセンタリングされますが、全体が中央寄せになってしまいます。

うまくいかない中央寄せ

うまくいかない中央寄せ

「text-align: center;」の代わりにmarginで左右の余白を自動(auto)にすることで、ブロックを中央寄せにして箇条書きの左端をそろえることができます。

/* 左右の余白を自動調整して中央寄せ */
div#list01 {
    margin: 10px auto;
    width:300px;
}

表示結果は次のようになります。

左右の余白を自動調整して中央寄せ

左右の余白を自動調整して中央寄せ

marginの「10px auto」は「上下 左右」の余白を示しています。左右に「auto」を指定する場合は、ブロックの幅を指定する必要があります。

スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

画像を中央寄せにする

投稿や固定ページに挿入する画像を中央寄せにする場合は、画像を追加するときの「配置」で「中央」を選ぶ方法があります。

画像を中央に配置

画像を中央に配置

CSSで制御する場合、左右の余白(margin: … auto;)に加えて「display: block;」も必要です。

/* 画像を中央寄せ */
#content img.wp-image-589 {
    margin: 0 auto;
    display: block;
}

表示結果は次のようになります。

画像を中央寄せにする

画像を中央寄せにする

紹介した「画像を中央寄せ」のCSSは一般的なテーマで定義されている「aligncenter」というclassと同じ考え方です。「配置」の「中央」で画像を追加すると「aligncenter」というclass名が付加されて画像が中央寄せになる仕組みです。

主なテーマの「aligncenter」(中央寄せ)のCSSを紹介しておきます。

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#content .aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

※それぞれ、img.aligncenterに対しても同じようなスタイルが定義されています。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート