WordPressの公式テーマ Twenty Twenty では、投稿タイトルとカテゴリ表示が中央寄せで表示されます。
当ブログでは、カテゴリ表示をカスタマイズしてパンくずリスト表示にしましたが、これも真ん中に表示されてしまいます。
個人的にちょっと落ち着かない気分です。
そこで、パンくずリストと投稿タイトルを、左寄せ表示に変更しました。
投稿タイトルとカテゴリ表示を左寄せにするコードはどこ？
中央寄せ、左寄せは、CSSでコントロールされているはずです。
CSSでスタイルが当てられているなら、そのためのクラス名やidがソースコードにでてくるはずです。
ですので、ページのソースコードとCSSを見に行きます。
そのときに役立つのが、Chrome DevTools です。
Chrome DevTools をうまく使って探す
パンくずリストと投稿タイトルの表示に関わるソースコードを見るには、以下のようにすればよいです。
- パンくずリストと投稿タイトルを選択
- 選択したまま右クリック
- 「検証」を左クリック
1.2.を実行して、3の直前の状態になっている図が次の図です。
ここで「検証」をクリックすると、以下のようになります。
ウェブサイトの普通の表示（対ユーザー表示）、HTMLソースコード、CSSが表示されます。
ウェブサイトの表示で選択してハイライトされている部分の一部が、HTMLソースコードでもハイライトされます。
そして、ハイライトされた部分に適用されるスタイルが、一番右側のCSSのところに表示されます。
Chrome DevTools の詳しい使い方は、次の記事に詳しいので、是非参考にして下さい。
中央寄せに関係するコードはここにあった。
Twenty Twenty テーマで、タイトルとパンくずリストの中央寄せに関係あるのは、entry-header.php 18行目以下の部分と、
<header class="entry-header has-text-align-center<?php echo esc_attr( $entry_header_classes ); ?>">style.css の次の部分でした。
.has-text-align-center {
text-align: center;
}検索機能を使えば、書いてある場所がわかると思います。
左寄せにするためのカスタマイズ
style.cssの.has-text-align-center は、テーマの様々な部分で使われているので、ここをいじるとテーマの見た目に思わぬ影響が出る可能性があります。
そこで、entry-header.php のみをいじることにしました。
entry-header.php 18行目 を次のように変えました。
<header class="entry-header <!--has-text-align-center--><?php echo esc_attr( $entry_header_classes ); ?>">has-text-align-center を HTMLのコメントアウトで無効化しただけです。
これで、パンくずリストと投稿タイトルを左寄せにすることができました。
これで落ち着きました。