WordPressのtheme logoは画像を替える前にsite titleの表示条件を決める

theme logoを設定するときは、logo画像だけを差し替えません。site titleとtaglineをlogoの代わりにするのか、logoと一緒に出すのか、どちらも出さないのかを先に決めます。headerの役割は、画像を見せることではなく、site名を伝え、利用者が次の操作へ進める状態を保つことです。

WordPress 4.5 Beta 3の公式案内は、Theme Logo Supportの修正とTwenty Fifteenへのsupport追加を案内しています。同版は開発中のsoftwareであり、production siteではなくtest siteで試すよう案内されています。

theme logoを使えることは、どの画像でもheaderへ置けばよいという意味ではありません。logoにはsite名を読ませる役割、見た目を整える役割、homeへ戻る入口になる役割があります。画像の中に文字が入っているか、短い名称だけか、細い線や小さな文字があるかで、mobileでの見え方は変わります。設定する前に、logoが何を伝えるのかを決めます。

site titleとtaglineは、画像に含めるか、HTMLの文字として残すか、別の場所へ出すかを選びます。画像だけに入れた文字は、themeの表示条件を変えたときに別の場所へ使えません。反対に、文字を常に残せば、logo内の文字と重複することがあります。どちらが正しいかを画像の好みで決めるのではなく、利用者がsite名と内容を理解でき、headerが操作を妨げないかで決めます。

logoと文字の役割を先に決める

logo画像にsite名が入っているのに、同じ文字をすぐ横へ重ねると、headerが読みにくくなります。反対に画像だけで名称が読めないなら、site titleを消してはいけません。

logoだけを使う場合も、画像が表示されなかったときの状態を考えます。画像の読み込みに失敗した、設定を外した、themeを変えたというときに、site名やhomeへの入口が消えれば、headerの役割が残りません。logoを外したとき、titleを表示するのか、別の文字を出すのかを確認します。通常の画面だけではなく、設定がない場合の表示も見ます。

taglineを残す場合は、事業内容を補う短い説明として読めるかを確認します。logo内の小さな文字と、taglineの長い文章を両方出せば、headerが何を伝えたいのか分かりにくくなります。問い合わせ先やサービス説明をheaderへ詰め込むより、まずsite名とmenuが読めることを優先します。説明が長いなら、本文や専用pageへ置く方が適切な場合があります。

画像を替えたらheader全体を確認する

1. test siteでlogoの表示有無とsite titleの表示有無を決める。
2. Customizerでlogoを設定する。
3. トップ、記事、固定pageでheaderを開く。
4. mobile幅でlogo、title、menu buttonが重ならないかを確認する。
5. logoを外した場合も、site名とhomeへのlinkが残るかを確認する。

themeごとに、logoを出すtemplateとsite titleを出すtemplateは違います。管理画面でlogoを設定しても、themeがその設定をheaderで読むように作られていなければ表示は変わりません。設定画面とtheme fileの役割を混同しないでください。

確認するpageは、トップだけでは足りません。記事page、固定page、一覧pageでは、headerの高さやtitleの出し方が違うthemeがあります。トップでlogoがよく見えても、記事pageで長いtitleと重なる場合があります。headerを共通のものとして扱う前に、どのtemplateが使われているかを確認し、構造が違うpageを一件ずつ開きます。

homeへのlinkも操作します。logoをclickしたときにどこへ移動するか、site titleを残した場合に別のlinkが重なっていないか、mobileで指を置く範囲がmenu buttonと近すぎないかを見ます。logoは飾りではなく、利用者がsite内を移動する入口になることがあります。画像の余白を減らして大きく見せた結果、menuを押せなくなればheaderの目的を果たせません。

logoを設定しただけでheaderを完成にしない

画像の比率、余白、背景色、mobileのmenuはlogoを替えるたびに影響します。logoの決定を先にしても、headerのlayoutと操作まで決めたことにはなりません。

mobileでは、横長のlogoをそのまま縮めると文字が読めなくなることがあります。画像を大きく保とうとしてheaderの高さを増やせば、本文の入口が下がります。小さくしても読めるlogoにするのか、文字を別に残すのか、mobileだけ別の画像を使うのかを、themeが扱える範囲で決めます。desktopで見栄えがよい比率を、そのままmobileへ持ち込まないようにします。

背景色との関係も、logoを差し替えた後に確認します。白いlogoを明るいheaderへ置けば読めませんし、透明な画像は背景色によって見え方が変わります。画像fileを加工し直すのか、headerの背景を変えるのか、周囲の余白を取るのかを分けます。一度にすべてを変えると、どの変更が見えにくさを直したのか分からなくなります。

外部へheaderの修正を頼む場合は、logo fileを渡すだけで終えません。使うlogo、site titleの表示条件、taglineの表示条件、homeへのlink、確認するpage、mobileのmenu操作を一緒に伝えます。作業後には、Customizerの設定だけを変えたのか、themeのtemplateも直したのかを受け取ります。画像を替えた事実だけでは、次にheaderを直す人が表示条件を判断できません。

最初の一手は、headerに残す文字を「site名」「tagline」「menu名」に分けて書き出すことです。logo画像がそのどれを担うのかを決めてから、Customizerとthemeを確認します。