WordPressテーマ「SWELL」カスタマイズ。リスト項目を左端揃えのまま中央寄せにする。

WordPressテーマ「SWELL」カスタマイズの備忘。

今回もパパッと。リストブロックを使って箇条書きを並べると、普通はこんな感じで左寄せの状態になっています。

  • これはテストです
  • これはテストです
  • これはテストです

これを中央寄せして使いたいなあと思ったのでカスタマイズしてみました、カスタマイズ後の実際のサイトでの見え方はこんな感じになります。

  • これはテストです
  • これはテストです
  • これはテストです

一応、リストブロックではなく段落ブロックで「・」記号を使って中央寄せして改行して…みたいにすれば同じような見た目にできなくもないですが、リストブロックのまま中央寄せする方が外見的にも内部構造的にも好ましいかなあと。


ということで上記のカスタマイズを行うには、まずリストブロックに対して「高度な設定」でcenterlist is-style-defaultというクラス名を指定します。

SWELLカスタマイズ リスト中央寄せ
リストブロックの「高度な設定」

ちなみにこちらはリストスタイルを「デフォルト」に設定して中央寄せする際のクラス名です、デフォルト以外のリストスタイルを中央寄せにしたい際には以下のクラス名を「高度な設定」の部分に書きます。

デフォルト以外のリストスタイルを中央寄せしたいとき
  • 目次風:centerlist is-style-index
  • チェック:centerlist is-style-check_list
  • Good:centerlist is-style-good_list
  • Bad:centerlist is-style-bad_list
  • 丸数字:centerlist is-style-num_circle
  • 注釈:centerlist is-style-note_list

続いて、こうしてリストブロックに対して独自のクラス名を指定したら、リストブロック全体をグループ化。

そしてグループ化したブロックの「高度な設定」にcentergroupというクラス名を書き足し、グループ化したブロック全体に対して独自のクラス名を指定します。

グループ化したブロックの「高度な設定」

これでリストブロックとグループブロックの2つに対してクラス名を指定したので、今度はカスタマイザーへと移動します。

カスタマイザーでは「追加CSS」に、先ほどcentergroup centerlistでそれぞれ指定したクラスに対し中央寄せするように値を付与していきます。

.centergroup {
    text-align: center;
}
.centerlist {
    text-align: left;
    display: inline-block;
}

これで一応、特定のリスト項目を左寄せになった状態で中央寄せにできます。クラス名は僕が何となくつけたものなので他のものでも大丈夫です。


最終的に、こんな感じでサイト上で表示されたらOKですね。

  • 左端が揃った中央寄せのリスト
  • 左端が揃った中央寄せのリスト
  • 左端が揃った中央寄せのリスト

ちなみに、リストで箇条書きした項目の「文字数」が違うときに中央寄せがずれてしまうのを発見してちょっと苦労しました…笑。

一応今回の方法でカスタマイズすると、次のようにリストの項目がそれぞれ違う文字数だとしても、左寄せになるようになっていると思います。おそらく。

  • 文字数が
  • ちょっと違っていても
  • こんな感じで左端が揃うよ

意外と使いたい機会があるかもしれませんね、何か参考になれば幸いです!

記事の感想や要望、サイト周りの質問や相談など
Twitter(@___kurosb)で承ってます。気軽にご連絡ください

記事の感想や要望、サイト周りの質問や相談など
Twitter(@___kurosb)で承ってます。

気軽にご連絡ください