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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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