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

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

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

デフよん

 

1 Pocket

ロゴ画像をテーマtwenty fifteenのサイトタイトルに追加

https://def-4.com/logo-twenty-fifteen-titile

ロゴ画像を追加する手順

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

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

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

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

子テーマの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の一覧と、それぞれのロゴ画像の横幅がコチラの表です。

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

/* タイトル-カスタムロゴ　*/
.site-branding .custom-logo{
	position:absolute;
	top:-100%;
	}

.site-branding .site-title,
.site-branding .site-description {
	margin-left:99px;
	}

@media screen and (min-width: 38.75em) {
	.site-branding .custom-logo{
		top:-30%;
		}
}

@media screen and (min-width: 46.25em) {
	        .site-branding .site-title,
	        .site-branding .site-description {
	        margin-left:125px;
	        }
}

@media screen and (min-width: 59.6875em) {
	.site-branding .custom-logo{
	        position:static;
        	top:0;
        	}

        .site-branding .site-title,
        .site-branding .site-description {
	        margin-left:0;
        	}
}

表示確認

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