【Simplicity2】スマホとPCでロゴ画像を替える方法。ヘッダーの余白の変更。

スマホで見たときのロゴ画像が縮小されてしまっていたので、スマホ専用のロゴ画像を作成し、PCとは別のロゴを使用できるようにした。
今回はその方法をメモしておく。

同時に、ロゴ画像の上下の余白が気になったのでその部分の調整も記しておく。

スマホ専用のロゴ画像の設定方法
ロゴ画像周りの余白を調整する

スマホ専用のロゴ画像の設定方法

基本的には、この項の最後にある参照で示した“simplicity公式フォーラム”に答えが書いてあったけれど、初心者の僕にはいろいろと手間取ったのでここに書いておく。

hedder-logo.phpを子テーマへコピー

まずは、FFFTPなどで wp-content → themes → simplicity2 と進み、header-logo.phpをコピーする。
次に子テーマのフォルダ、 wp-content → themes → simplicity2-child　進み、先ほどのheader-logo.phpをペーストする。以後、ソースの編集は子テーマで行う。

header-logo.phpを編集

header-logo.phpにある下記の部分を探す。



 $logo_url = ( get_header_logo_url() ? get_header_logo_url() : get_stylesheet_directory_uri().'/images/logo.png' );//ロゴ画像の取得
    $site_title = '< a href="'.home_url('/').'">< img src="'.$logo_url.'" alt="'.get_bloginfo('name').'" class="site-title-img" />'.get_bloginfo('name').'';

このコードのあいだに、下記のようにスマホでは別のロゴ画像を使うようにするコードを足す。


    $logo_url = ( get_header_logo_url() ? get_header_logo_url() : get_stylesheet_directory_uri().'/images/logo.png' );//ロゴ画像の取得


    if ( wp_is_mobile() ) {
      $logo_url = get_stylesheet_directory_uri().'/images/mobile-logo.png';//モバイルのロゴ画像のパス（子テーマ使用時）
    }


    $site_title = '< a href="'.home_url('/').'">< img src="'.$logo_url.'" alt="'.get_bloginfo('name').'" class="site-title-img" />'.get_bloginfo('name').'';

中央の部分のif文が今回追加した箇所。

スマホ用のロゴ画像をアップロードする

スマホ用のロゴ画像を用意し、以下の場所に置く。このとき、ロゴ画像の名前は「mobile-logo.png」にすること。

wp-content → themes → simplicity2-child → images

以上で完了。
はじめはモバイル用のロゴ画像を普通にメディアにアップロードし、絶対パスで指定しようとしたけどうまくいかなかった。
参照した公式フォーラムのリンクを貼っておく。

参照 https://wp-simplicity.com/suport/topic/%E3%83%AD%E3%82%B4%E4%BD%8D%E7%BD%AE%E3%81%AE%E5%A4%89%E6%9B%B4%E3%81%A8%E3%82%B9%E3%83%9E%E3%83%9Bpc%E3%81%A7%E5%88%A5%E3%80%85%E3%81%AE%E3%83%AD%E3%82%B4%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9/

ロゴ画像周りの余白を調整する

モバイル用のロゴ画像の挿入後、余白が気になったのでこの調整方法も記しておく。
ロゴ画像の下にあるスペースは、ヘッダーの下の余白部分と、メイン上部の余白から成り立つ。

メイン上部の余白の調整

メイン上部の余白をなくす場合、以下のコードをstyle.cssにコピペすればOK。
Woredpressの【外観】→【テーマ編集】から編集可能。

@media (max-width: 30em) {
  #body {
    margin-top: 0;
  }
}

参照 https://wp-simplicity.com/suport/topic/%E7%A9%BA%E7%99%BD%E3%82%92%E6%B6%88%E3%81%97%E3%81%9F%E3%81%84/

ロゴ画像の上下の余白を調整

上記のコードを参照してロゴ画像の上下の余白も調整が可能。
前項と同じ場所(style.css)に、以下をコピペ。

@media (max-width: 30em) {
  #site-title{
  margin-top:0px;
  margin-bottom:0px;
	}
}

アンダーラインの部分の数値を変えると余白を調整可能。
Wordpressのカスタマイズの設定で、ヘッダーの高さを設定している場合はこちらが優先される場合あり。うまく調整できない場合は、こちらもチェックしてください。

参照 https://repobu.com/2015/07/16/simplicity-title/

フルオーダーメイドのカリキュラム作成できるエンジニア塾【Samurai】

Simplicity備忘録リスト