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 のおすすめテーマ



  • SEO に強く【集客力強化】が望める
  • かっこいい(かわいい)ホームページを作りやすい
  • 初心者でも使えて、上級者になっても満足できる


本気でブログアフィリエイトを戦うなら、使うテーマは「AFFINGER」!

WordPress ブログの最上級おすすめテーマ「AFFINGER」をお試しください。



AFFINGER の紹介はこちら




AFFINGER(アフィンガー)テーマは「ここ」がすごい!【WordPress 初心者必見!】

AFFINGER テーマを使うと「オシャレなサイト」を作りやすくなります。オシャレなサイトは、ユーザーの滞在時間が増え、サイト評価があがり、サイトの露出が増えて、さらにユーザ(読者)を呼び込む好循環を実現します。WordPressのテーマ「AFFINGER」を徹底紹介します。

続きを見る


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










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




Presented By Irojiro Haraguro .Com