WordPress

【WordPress】リストやグループブロック自体をセンタリングする方法


リストやグループをセンタリングする

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

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

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

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

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

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

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

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

■ Step.1 グループ化する

リストなどのブロックを「グループ化」します。

■ Step.2 レイアウトを設定する

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

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

完成です。

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

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

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

■ Step.1 グループ化する

リストなどのブロックを「グループ化」します。

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

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

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

■ Step.3 CSSを設定する

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

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

.myListTest {
    width : 60%;
    margin : 0 auto;

}

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

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

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

まとめ

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

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

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

WordPress のおすすめテーマ

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

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

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

「AFFINGER」テーマを使えば、SEOに強く、集客力がアップし、初心者でも使いやすく、

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

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

最高のブログ体験を手に入れることができます!

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

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

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

 

―― 今日のおみくじ ――

第 12 番

吉


今日のメッセージ

12という数字は2でも3でも4でも6でも割り切れる使い勝手の良い数字。

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

Presented By Boon Boon Blog .Com

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

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

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