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

2016/04/16[公開] 2016/04/20[最終更新]

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

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

このページの目次

スポンサー リンク

ロゴ画像を追加する手順

 ロゴ画像の推奨サイズ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
620px38.75em84px
740px46.25em105px
880px55em104px
955px59.6875em179px
1100px68.75em198px
1240px77.5em238px
1403px87.6875em248px

子テーマ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の醍醐味だと思っています。ついついブラウザーの拡大縮小を繰り返して遊んでしまいます。サイトタイトルがかなり長い場合は、標準のままのほうが良いかもしれません。

コメントを残す

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