テーマTwentySixteenのカスタムロゴをタイトル上から左に変更する

WordPress4.5から、デフォルトテーマtwentysixteenとtwentyfifteenにカスタムロゴ追加機能が実装されました。テストサイトにて、テーマtwentysixteenにカスタムロゴを追加してみました。推奨のロゴ画像サイズより小さいロゴを使い、サイトタイトルの上から左に表示位置を変えてみました。こちらのほうがロゴという感じに合っていると思う、個人的な好みです。

Twenty Sixteenは、サイト背景色が白以外選びにくいところがあるので、ロゴでオリジナリティーを出せるようになったのがいいですね。今後このデフォルトテーマで行こうと思う人が増えると良いと思います。今回テストで使ったサイトはコチラです。検証用サイトです。

柴犬ゆっきーのブログ

サクラサク2016

https://yukkisiba.com/サクラサク2016/

このページの目次

基本方針

テーマ推奨のロゴ画像サイズは240×240pxです。この推奨サイズでは、Media Queries毎に実際に表示されるロゴサイズが変わってきますが、一番画面幅の狭いMobile用サイズ180×180px以下のサイズをロゴ画像に指定すれば、Media Queriesの設定を省くことができます。さらに、サイトタイトル左に出すロゴ画像は、もっとサイズが小さくてよかったです。いくつか試して一番しっくりきたのが120×120pxでした。

　CSSの設定は、ロゴ画像のクラス名custom-logoに{position:absolute;}を指定するのが一番最初です。あとは、それに合わせて調整していく作業でした。ロゴ画像とサイトタイトルの上下のバランスを取るのに苦労しました。{position:absolute;}と{position:relative;}の使い方は私もぼんやりとしか理解できないので、設定して表示させて上手くいったら正解という素人手法なので解説は省きます。

ロゴ画像をアップする

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

子テーマのstyle.cssに追記

/* タイトル-カスタムロゴ　*/
.site-branding {
	position: relative;
	height: 120px;
	}

.site-branding .custom-logo{
	position:absolute;
	margin: auto;
	}
 
.site-branding .site-title {
	margin-left:135px;
	margin-top:10%;
	}

.site-branding .site-description {
	margin-left:135px;
	}