Simplicityヘッダーのタイトルをロゴ画像に変更するカスタマイズ方法

Emu-bird-head

WordPress管理画面からサイトロゴ画像に変更できるようになりました。
サイトロゴをWordPress管理画面から画像に変更する方法

Simplicityのタイトル表示は、デフォルトでテキストになっています。

ただ、サイトを運営している人の中には、ヘッダーをサイトのロゴに変更したい方もいると思うので、カスタマイズ方法を紹介します。

なお、これらのカスタマイズは子テーマを適用して行うとSimplicityをアップデートする時に上書きをする心配はなくなります。

参考 Simplicityの子テーマをインストールする方法

変更前のタイトル

まず、変更前の状態を確認しておきます。

デフォルトではこのようにテキストリンクになっています。

デフォルトのタイトル

この状態から、ロゴを画像に変更します。

タイトル用の画像を用意

まずはタイトルロゴとなる画像を用意します。

今回は、例のためにSquarespace Logoで以下のように作成しました。

logo

幅200px、高さ136pxの透過PNGです。

画像にlogo.pngと名前をつけて、テーマフォルダのimagesフォルダーにコピーしておきます。(小テーマのimagesフォルダーだとなおよし)

header.phpの編集

header.phpを編集します。

子テーマを使用している場合は、オリジナルのheader-logo.phpを子テーマ内のフォルダ内にコピーして編集するとSimplicityをバージョンアップする時に、誤って上書きするのを防ぐことができます。

まずはエディターの検索機能なのでheade-logor.php内の以下の部分を見つけてください。

<?php $site_title = '<a href="'.home_url('/').'">'.get_bloginfo('name').'</a>' ?>

これを以下のように変更します。

<?php $site_title = '<a href="'.home_url('/').'"><img src="'.get_stylesheet_directory_uri().'/images/logo.png" alt="'.get_bloginfo('name').'" /></a>' ?>

ロゴ変更中

ロゴが全て表示されていません。これは、スタイルでヘッダーの高さを限定しているからです。これを修正する必要があります。

style.cssの編集

style.cssの#h-top部分を以下のように変更します。(子テーマだと、style.cssに追記)

#h-top{
  height: 200px;/*画像の高さによって調整する*/
}

※WordPress管理画面「外観→カスタマイズ→ヘッダー画像」からも、ヘッダーの高さを変更できます。

ヘッダーの高さを変更

どちらの方法を利用してもOKです。

表示確認

すると、以下のようにロゴが全部表示されました。高さは画像の大きさに併せて調節してください。

ロゴの編集後

透過PNGを使っているのでモバイル画面でも以下のように表示されます。

ロゴの編集後(スマホ画面)

デフォルトのスタイル状態なら、モバイル用にスタイルシート変更する必要はありません。

Ptengine
初心者でも見やすいアクセス解析「Ptengine」。無料から使えて、Simplicityから手軽に設定することも可能です。
スポンサーリンク
アドセンス(大)
アドセンス(大)

スポンサーリンク
アドセンス(大)