Last Updated on 2023年4月25日
標準テーマのTwenty Twenty-Twoを自分仕様にして使い倒すことを目的にカスタマイズしてみました。
ぱっと見て最初に気になっったのは見出しのフォントサイズとメインカラムの幅です。
基本デザインのカスタマイズ
WordPressの標準テーマを日本語のWebページとして使うにはタイトルや見出しのフォントサイズが大きすぎるのは今に始まったことではありません。
まずはここから手をつけます。
見出しのフォントサイズを変更
フォントサイズの変更は子テーマのスタイルシートへ次の通り記述しています。
.wp-block-post-title {
font-size : 200%;
font-family: "メイリオ",Meiryo,"yu gothic","sans-serif";
}
h2 {
font-size : 150%;
border-bottom: solid 3px #696969;
position: relative;
font-family: "メイリオ",Meiryo,"yu gothic","sans-serif"!important;
}
h2:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #800000;
bottom: -3px;
width: 30%;
}
h3 {
margin: 0;
position: relative;
font-size : 120%;
font-family: "メイリオ",Meiryo,"yu gothic","sans-serif"!important;
}
h3:before {
content: '';
width: 70px;
height: 4px;
background-color: #b0c4de;
display: block;
position: absolute;
left: 0;
bottom: -6px;
}
対象としたのは記事タイトル（h1）とh2、h3。自分はほとんどh4を使わないのでh4はデフォルトのままにしました。
それから各見出しの部分に明朝体が使われていたので、これもメイリオに変更。
装飾は落ち着いたアンダーラインのみにしています。
メインカラム（コンテンツエリア）の幅を広くする
Twenty Twenty-Twoはノーマルな状態ではシングルカラムですが、テーマのディレクトリにあるファイル名からサイドバーが使えそうな感じがしないでもありません。
今回はデフォルトのシングルカラムのまま使いたいので、このコンテンツが入るメインカラムの幅を広げることにします。
.wp-container-7 > * {
max-width: 900px !important;
margin-left: auto;
margin-right: auto;
}
これも子テーマのstyle.cssで900pxへ記述。
幅の指定はインラインスタイルシートによるため !importantを指定しなければ適用されないようです。
これでテキストや画像が入るコンテンツ部分の幅が広くなりました。
機能面の変更【アイキャッチ非表示、更新日の挿入】
気になるデザインの修正が済んだところで、次に手を加えたいのが投稿ページに入るアイキャッチをページごとに非表示にしたいのと、同じく投稿ページで更新日を挿入するカスタマイズ。
正直、これらは試行錯誤の結果プラグインに頼ることになりました。
アイキャッチの表示、非表示をページごとに
Webサイトの運用の自由度を高めたいときに、必須になるのがアイキャッチの非表示です。
全てページでアイキャッチを表示しないだけであれば、子テーマのstyle.cssへ次の記述をします。
.attachment-post-thumbnail {
display: none!important;
}
今回は、個別に非表示にしたいので記事の編集画面で記事ごとにスタイルシートを書き込めるプラグインを使いました。
この手のプラグインを使えば、管理画面からそれぞれのページへ個別のスタイルシートを適用することが可能になります。
趣味ブロガーなどでテキストメインの情報発信をしたいとき、直ぐにクオリティーの高いアイキャッチを用意するのが難しかったりします。
そんなときは、こうした手法を用いることで各投稿ごと個別に非表示の指定が可能になるので助かります。
記事の更新日を表示する
従来の公式テーマであれば、子テーマでphpファイルやスタイルシートを編集することで更新日の表示が出来たはず。
ところが、Twenty Twenty-Twoではfunction.phpをはじめページの構成ファイルは簡素化されているものの公開日の取得や表示をしている部分さえ見当たりません（これまた探せないだけ？）。
ここは、より深入りした知識が必要のようで、今回はプラグインに頼りサイトの公開時期を早めることを優先しました。
使ったプラグインはWP Last Modified Infoという更新日を表示させるプラグインです。
更新日の表示はプラグインに頼ることで簡単な設定のみで済ますことができました。
サーバー負荷を考慮すれば使うプラグインの数は押さえたいところですが、公式テーマのカスタマイズは簡単には行かない様子です。
ここまでで、最初にきになった部分は満足がいく程度にクリアできています。
あとは運用を続けてから細かな部分に手を加えて行くことにしましょう。
AMP化も試してみました