WordPress

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

広告:ページ内にてアフィリエイト広告を利用しています。

リストブロックをセンタリングする

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

ポイント

本記事では、

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

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

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

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

おすすめ副業

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

PR

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

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

リストが左に寄っているところ

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

センタリングしたところ

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

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

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

■ AFFINGER を利用する場合

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

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

step
1
グループ化する

グループ化する
  • リストなどのブロックを「グループ化」する

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

中央揃えする
  • グループのプロパティから、「レイアウト」で中央寄せを指定する

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

完成です。

■ SWELL を利用する場合

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

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

step
1
グループ化する

グループ化する
  • リストなどのブロックを「グループ化」する

step
2
横並びを設定する

横並びを指定する
  • グループのプロパティから、「横並び」を指定する

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

中央揃えする
  • 「レイアウト」で「中央揃え」を指定する

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

完成です。

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

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

横幅を設定する場合

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

■ AFFINGER、SWELL 共通

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

step
1
グループ化する

グループ化する
  • リストなどのブロックを「グループ化」する

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

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

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

step
3
CSSを設定する

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

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

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

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

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

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

WordPress もっと!お役立ちテクニック

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

まとめ

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

ポイント

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

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

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

40代・50代「会社員におすすめ」の在宅でできる副業5選(初心者でもできる)

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

続きを見る

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

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

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

続きを見る

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

地方で快適に暮らす!地方がチャンスのおすすめ副業を紹介!在宅でパソコンがあれば「できる」副業

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

続きを見る

この副業
アフィリエイトスクール
ノートパソコン

WordPress のおすすめテーマ

あなたのブログを強力にアピールし、読者を惹きつける、

魅力的なウェブサイトを手軽に作りたいですか?

そんな方に オススメのテーマが「AFFINGER」 です。

「AFFINGER」テーマを使えば、SEOに強く、集客力がアップし、

上級者でも満足できる、魅力的なウェブサイトが作れます。

ブログアフィリエイトを本気で戦うなら、「AFFINGER」の威力を体感してください。

\ WordPress のおすすめテーマ「アフィンガー」を詳しく見る /

AFFINGER の紹介(メリット・デメリットを紹介)

もっと WordPress のノウハウを知りたいときは

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

クリックアイコン
PR
―― 今日のおみくじ ――

第 9 番

”末吉"


今日のメッセージ

狂ったようにやってみよう!たくさんやればきっと何かがヒットする。
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

ブログランキング・にほんブログ村へ  

Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

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