前回の記事でロゴの表示に調整が必要なことを書きました。
今回は具体的な調整方法を記していきたいと思います。
１．ロゴ自体を修正する。
ロゴが横長すぎても、縦長すぎてもテーマの仕様上調整されてしまうため、見やすいようにロゴを修正します。
その1．ロゴマークだけにする。
元のロゴをテーマに設定すると、こんな感じになりますが、「さいとうの」などの文字が見にくいですね。
この場合は、まずロゴマークだけにすればいいのではないかと思います。
これならロゴが小さくなりすぎず、視認性が担保できます。なんのサイトかわかりにくければ、「サイトタイトルおよびキャッチフレーズを表示する」で対応できますね。
その2．小さくされても視認できるロゴタイプにする。
基本的には、サイトタイトルと同じぐらいの大きさの文字なら問題なく読めると思いますので、その大きさを確認します。
開発者ツールで確認するとこのような感じでした。
サイトタイトル：縦約30px
キャッチフレーズ：縦約25px
まあフォントにもよると思いますが、縦25px以上なら問題なく読めそうですね。
そんなわけで作ってみたロゴタイプとロゴがこれです。タテ100px×ヨコ300pxの範囲内で作成し、文字のサイズは30pxにしています。
かなり見やすくなりました。これならサイトタイトルとキャッチフレーズを消してもよさそうですね。
ただ、後述しますがこの対応はロゴのレギュレーションによっては不可能です。その場合はテーマの仕様をカスタムCSSで変更し、ロゴの表示幅を変更するのがいいでしょう。
２．CSSでロゴの表示幅を変える。
開発者ツールで確認すると、ロゴのmax-height,max-widthが定められています
ここを変更しましょう。いったん試しにmax-width:385px,max-height:200pxに変更
隣のメニューと「さいとうの」が同じくらいの大きさになったので、これでOKとします。
追加CSSに、以下の内容をコピペしてください。
/*モバイル用*/
.site-logo .custom-logo {
max-width: 250px;
max-height: 100px;
}
/*PC用*/
@media only screen and (min-width: 482px)
.site-logo .custom-logo {
max-width: 385px;
max-height: 200px;
}
ロゴによって、お好みのサイズに変更してください。
ちなみにこのCSSを変えるだけでフッターのロゴ、サイトタイトルとキャッチフレーズをONにした場合のロゴも同じように大きさが変わって表示されます。
まとめ
別のテーマではカスタマイズでロゴ表示幅を変更できたりするんですけど、、、
TwentyTwentyOneでは変更できないので自力で頑張って調整するしかないようですね。この記事を参考にロゴを最適な形で表示させましょう！
デモサイト↓↓
Twenty Twenty-One デモサイト
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください！
WordPressデザインサービスは以下から承っております。
