sixteen-logo3

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

2016/04/17[公開]

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

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

表示確認

タブレット画面
タブレット画面

 ブラウザーの拡大縮小ボタンを押しながら、全部の画面幅で表示がおかしくなっていないのを確認して設定完了です。サイトタイトルとキャチフレーズが極端に長い場合を除き、ロゴ画像サイズが同じだったらコピペで使えます。タイトルが長い場合は、標準のままタイトル上にロゴを出したほうがいいかもしれません。

 ここのデフよんサイトのテーマtwenty fifteenでのロゴ設定は、ひとつ前の記事をご覧ください。【WP4.5】テーマTwenty Fifteenのカスタムロゴを追加してみた

こちらの記事もどうぞ

コメントを残す

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