サイトタイトルをロゴ画像に変更【テーマtwenty fifteen編】

 WordPress標準テーマtwenty fifteenのサイトタイトルをロゴ画像に変更する方法です。前回のサイトタイトルにロゴ画像を追加する方法よりも簡単でした。サブタイトルのキャチフレーズを出す、出さないの両パターンともご紹介します。いつものようにCSSの擬似要素:beforeを使います。私はなんでもコレを使いたがります。

 前回記事のロゴ画像を追加する方法はコチラです。

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

基本方針

  • ロゴ画像は擬似要素:beforeで出す。
  • 擬似要素で画像サイズは指定できないので、サイズ毎に画像をアップする。
  • Media Queriesでレスポンシブテーマに合わせる

ロゴ画像を4種類用意

 テーマtwenty fifteenのレスポンシブに変化するヘッダーに合わせて、今回は4種類の画像をメディアライブラリーにアップロードしました。

 PC用ブラウザーの大画面用に幅250px、小さい画面用に幅200pxの2種類です。PC画面ではヘッダーがサイドバー化するので、気をつけるのは横幅がサイドバーからはみ出ないようにします。縦サイズはわりと自由です。

 タブレット・スマホ用に2種類。タイトル部分がヘッダーに変わるので、コチラは横長の画像を2種類用意しました。サイズは画面からはみ出なければOKですが、あまり大きいとヘッダーがやけに縦長になるので、下図サイズにしています。

 画像をアップロードしたら、画像のURLをメモしておきます。

PC用は横幅250pxと200pxの2種類
PC用は横幅250pxと200pxの2種類
スマホ・タブレット用画像は高さ90pcと50pxの2種類
スマホ・タブレット用画像は高さ90pcと50pxの2種類

子テーマのstyle.cssに追記

  • 画面幅620px未満→ファイル名:logo-h50.png
  • 620px以上(38.75em)→ファイル名:logo-h90.png
  • 955px以上(59.6875em)→ファイル名:logo-w200.png
  • 1240px以上(77.5em)→ファイル名:log-w250.png

とした場合のStyle.css追記内容です。

副題(キャッチフレーズ)も非表示の場合

副題(キャッチフレーズ)ありの場合

最後に

 副題(キャッチフレーズ)を出すか、出さないかは5行目の.site-descriptionを非表示にするか、しないかの一行違いになっています。ここのサイトは、前回記事のサイトタイトルとキャッチフレーズを両方とも表示したままロゴ画像だけ追加する設定の方を使っています。

こちらの記事もどうぞ

“サイトタイトルをロゴ画像に変更【テーマtwenty fifteen編】” への2件の返信

  1. ロゴ画像をクリックしたら、HOMEに飛ぶように設定するには、どうしたらよろしいのでしょうか…??

コメントを残す

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