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

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

ポイント

本記事では、

リスト（箇条書き）や、グループ化したブロック群を、

センタリングする方法を解説します。

うまく利用して、読みやすい記事を書いていきたいですね。

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

＼ココナラ成功パターンを詳しく見たい方はこちらをクリックしてください／

1 リストをセンタリングする例
2 リストなどのブロックをセンタリングする方法
- 2.1 ■ AFFINGER を利用する場合
- 2.2 ■ SWELL を利用する場合
3 横幅を自分で決めたい場合
- 3.1 ■ AFFINGER、SWELL 共通
4 まとめ

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

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

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

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

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

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

■ 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グループにクラス名を設定します

グループのプロパティから「高度な設定」の「追加CSSクラス」に、任意の文字列（クラス名）を入力する

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

step
3CSSを設定する

「カスタム HTML」ブロックなどで、CSS を定義する

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

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

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

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

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

WordPress のお役立ちテクニックはこちら

まとめ

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

ポイント

「リスト」など通常ではセンタリングできないブロックをセンタリングする場合は、グループ化して「中央揃え」を設定する
横幅を任意で指定する場合は、ＣＳＳを用いる

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

40代・50代「会社員におすすめ」の在宅でできる副業５選

: 40代・50代「会社員におすすめ」の在宅でできる副業５選（初心者でもできる）

４０代、５０代だからこそ気が付く、不安に思う将来設計、しかし今から大きなチャレンジは難しい。投資もリスクが多い。いまこそやってみたいのが「副業」です。本記事では４０代、５０代におすすめの副業５選を紹介します。

続きを見る

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

: 20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選（初心者でもできる）

２０代、３０代の主婦にとって、これからの人生設計、お金の心配は少なからずありますね。２０代、３０代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い（または少ない）主婦におすすめの副業ができれば安心ですね。記事では、２０代、３０代専業主婦におすすめの副業３選を紹介します。

続きを見る

地方がチャンスのおすすめ副業を紹介！

: 【2024年チャンス】地方でノマドで働ける。おすすめ在宅副業を紹介！快適な移住先も紹介します

都会は住みにくい！地方の方が自然もあり、ちょうど規模の街で素敵に暮らすのは人生設計として最高ですね。しかし地方は本業の給料が低いのがネック、そこで是非お勧めしたいのがインターネットでできる副業です。本記事では、地方で快適に暮らす！おすすめ副業を紹介します。ゆるーくまったり人生過ごしたいですね。

続きを見る