Twenty Twenty-Oneのスマホ版のヘッダーロゴを大きくしたり、サイトナビゲーションメニューをつけたりしました。

ヘッダーロゴ

「ロゴ」の推奨は300 x 100 px。サンプルロゴを作ってみました。デスクトップ版でもこじんまりとしています。全てのページの上部と下部に1つずつ入るようです。

• 

• 

タブレットはいい感じのサイズでしたが、スマホでみるとロゴの横幅が96px。小さくてみえにくいので、他のメディアと同じサイズにしてみました。

管理画面の『外観→カスタマイズ→追加CSS』に下記のコードをコピペ。

@media only screen and (max-width: 821px) {
.site-logo .custom-logo {
	max-width: var(--branding--logo--max-width);
	max-height: var(--branding--logo--max-height);
	}
}

参考：親テーマのロゴ定義

「サイトのタイトル」も小さくて地味。というか「ロゴ」にサイト名を書けばいいのか?

「キャッチフレーズ」は沢山書くと最上部にあった「サイトナビゲーションメニュー」が下に降りる。

ヘッダーナビゲーションメニュー

ヘッダーナビゲーションメニューは「外観 → カスタマイズ → メニュー → 項目を追加 → メインメニューにチェック」でヘッダーに表示されるようになります。

下の例では項目追加でカテゴリーしか選んでいませんが、URLリンク、タグ、投稿や固定ページから選択することもできます。

階層構造を作りたいときは、子階層のカテゴリーをつかんでちょっと右側にずらせば子階層になりました。下図は、スマホ、PCでの仕上がり図です。

PCでみると子カテゴリーを持つ親カテゴリーの横にプラスマイナスボタンが出てきます。個人的には使わない事にしました。

あと、以前作ったメニューだと上手く反映されなかったので、新しいメニューを作りました。

こんなもんかな?