【WordPress】リストブロックをセンタリングする方法（簡単に実現できる）

---

---

記事全体をセンタリングで書いているとき、リストだけ左側に寄ってしまうのは見栄えが良くありません。センタリングしたい場合もあります。

※ ご利用の WordPress テーマによっては使えない場合があります。

「アフィリエイトスクールのススメ」はこちら

リストをセンタリングする例

通常、記事全体をセンタリングして書いている場合、リストを挿入するとリストだけ左寄せになります。

リストだけ左寄せなのが気になりますね。わかりやすいように「枠」を付けていますが、「枠」が無いともっと目立ちます。

センタリングすると、記事全体とレイアウトがあってよい見た目になります。

リストや、特殊なブロックはそのままではセンタリングできない場合がありますので解決方法を紹介します。

リストなどのブロックをセンタリングする方法

■ AFFINGER を利用する場合

Windows のテーマ「アフィンガー」を利用している場合の例です。（他テーマでも考え方は一緒です）

※本操作は、AFFINGER で動作を確認しています。

step
1グループ化する

step
2レイアウトを設定する

横幅は自動調節されます。

完成です。

■ SWELL を利用する場合

Windows のテーマ「SWELL」を利用している場合の例です。（他テーマでも考え方は一緒です）

※本操作は、SWELL で動作を確認しています。

step
1グループ化する

step
2横並びを設定する

step
3レイアウトを設定する

横幅は自動調節されます。

完成です。

横幅を自分で決めたい場合

グループの「レイアウト」を使った場合は横幅が自動調節されますが、横幅を自分で指定する場合は、CSS で対応します。

上図では、横幅を６０％にして、センタリングしています。

■ AFFINGER、SWELL 共通

※本操作は、AFFINGER、SWELL の両方で動作を確認しています。

step
1グループ化する

step
2グループにクラス名を設定します

※ここでは、仮に「myListTest」と入力しています。

step
3CSSを設定する

定義する CSS は次の通りです。

<style>
.myListTest {
    width : 60%;
    margin : 0 auto;
}
</style>

「width」が横幅です。60% とブラウザサイズ（記事エリア）に対してパーセント指定していますが、400px など、実値で指定することもできます。

「margin : 0 auto」で、センタリングします。

完成です。プレビューで確認してください。

まとめ

リスト（箇条書き）や、グループ化したブロック群の横幅を調整して、センタリングして見た目を整える方法です。

ぜひ、レイアウト的にも、見た目麗しい、記事をたくさん、書いてくださいね。

WordPress の情報、テクニック一覧はこちらをクリック！

Presented By Boon Boon Blog .Com

電気通信事業法改正に伴う表記