【WP4.5】テーマTwenty Fifteenのカスタムロゴを追加してみた

 WordPress4.5にアップデートして、デフォルトテーマのアップデートも入り、ここのサイトで利用しているtwenty fifteenのバージョンが1.5になりました。今回のアップデートから、テーマtwentyfifteenとtwentysixteenにカスタムロゴ機能が追加されました。ロゴを出すと、サイトのオリジナリティーがアップするので、ぜひ設定したいところです。この記事では、このサイトにテーマ標準機能でロゴを追加した内容です。

 実は、いままでもこのサイトではロゴを出していたのですが、それとほぼ同じ見え方になるようにしました。今回のCSSの設定方法は、以前の応用でいけたので、過去の苦労が無駄にならなくてよかったです。過去記事はコチラロゴ画像をテーマtwenty fifteenのサイトタイトルに追加

ロゴ画像を追加する手順

 ロゴ画像の推奨サイズ248×248pxの画像を用意したら、管理画面外観→カスタマイズ→サイト基本情報を開き、「ロゴを選択」ボタンを押して、用意した画像をアップロードします。「保存して公開」をクリックしたらサイトタイトルの上にカスタムロゴが表示されているを確認して、設定完了です。

今回用意した推奨サイズ248pxの画像
今回用意した推奨サイズ248pxの画像

スマホ・タブレット画面が縦に間延び

 ロゴの設定はできましたが、twenty fifteenはPC画面ではサイトタイトルが左サイドバーに表示されるので、ちょうどいい感じですが、スマホ・タブレット画面ではロゴ画像がサイトタイトルの上に来るので、なんだか上部ヘッダーがやけに縦長に間延びしているように感じます。

 これをCSSでサイトタイトルの左側にロゴが来るように設定しました。

PC画面では、タイトル上にロゴが出るのが良い
PC画面では、タイトル上にロゴが出るのが良い
スマホ・タブレット画面ではヘッダーが縦に長くなる
スマホ・タブレット画面ではヘッダーが縦に長くなる

子テーマのstyle.cssで設定

 子テーマのstyle.cssに追記します。ロゴがサイトタイトルとキャッチフレーズの左側に来るようにCSSの設定をしました。Media Queries毎にロゴ画像のサイズを調べて、そのサイズ+α分左マージンを設定しました。その他の数値は、おおよその数値を入れて画面をみながら微調整していくという、いつもの素人手法です。

基本方針

 logo画像のクラス名custom-logoを、position:absolute;で配置を崩して、サイトタイトル(site-title)とキャッチフレーズ(site-description)をmargin-leftでロゴ画像+αだけ左を空けています。ロゴ画像の縦のバランスはtop:○○%で調整しました。

 ロゴ画像は、Media Queries毎にサイズが変わります。twenty fifteenの親テーマのstyle.cssから書きだしたMedia Queriesの一覧と、それぞれのロゴ画像の横幅がコチラの表です。

画面幅px 画面幅em ロゴ幅px
84px
620px 38.75em 84px
740px 46.25em 105px
880px 55em 104px
955px 59.6875em 179px
1100px 68.75em 198px
1240px 77.5em 238px
1403px 87.6875em 248px

子テーマstyle.cssに追加した内容

表示確認

スマホ・タブレットのヘッダー縦サイズが元に戻った
スマホ・タブレットのヘッダー縦サイズが元に戻った

 タブレット・スマホ画面では、ロゴ画像がサイトタイトルの左に回り込んでいるように見せることができました。私はコッチのほうがロゴとして見栄えが良いと思います。PC画面からタブレット画面に切り替わる瞬間が、このテーマtwentyfifteenの醍醐味だと思っています。ついついブラウザーの拡大縮小を繰り返して遊んでしまいます。サイトタイトルがかなり長い場合は、標準のままのほうが良いかもしれません。

こちらの記事もどうぞ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です