【WordPress】Simplicity2テーマのヘッダー画像の高さをカスタマイズする方法|Knowledge Base

公開日：2018(平成30)年6月26日／最終更新日： 2018(平成30)年7月5日

最近では「あれ？このサイトひょっとして・・・」とソースを見るとやっぱりね！という位使う人が多くなったSimplicity2テーマ。多分他のテーマでもそう感じる人はいるのでしょうけど、私はSimplicity2フリークなのでやっぱり気になって（気が付いて）しまいますね。

ただ・・・有名なテーマだからこそ、使いやすいテーマだからこそ、同じテーマでも別の見せ方をしたい！！と思うのが人の性というものですよね。

WordPressにかかわらず、ウェブサイトの表示で構成される要素は

タイトルなどのヘッダー部分
本文が入る部分
横に関連記事などを表示するためのサイドバー
サイト最下部にあるフッター

の４つ。１、２、４は必ずありますし、３についてはないものや左・右・両方と多少の違いはあるものの、結局は同じ構成になっています。

で、違いと言えば文字の種類だったり、線の種類だったり、隙間の量だったり・・・とやはりそれほど違うものでもないです。

そんな中でどうやって違うように見せるのか？？それはこの要素の間に違うものを挟んだり、オリジナルよりも何かを大きくしたり小さくしたりすることでしょう。

そこで今回は本当にたくさんのサイトで使われている、カスタマイズしやすいテーマ【Simplicity2】を他の人とは違う！！とするために、ヘッダー画像をカスタマイズして大きくする方法を紹介します。

案外簡単なのでびっくりしますよ、きっと・・・。

【Simplicity2】テーマでヘッダー画像を大きくする方法

まずはSimplicity2のテーマヘッダ画像は、サイトの横幅に合わせるパターンと、画面の横幅一杯に表示するパターンがありますが、今回は前者について、画像の大きさをカスタマイズする方法を紹介することにします。

Simplicity2のヘッダー画像は

高さ100px(ピクセル)で固定
パソコン表示用とスマホ（モバイル）表示用で別

になっています。スマホ用に関しては高さを設定して画像を指定すれば自動で縮小されていい感じに表示されるので、特にカスタマイズする必要はありません。

従って今回のカスタマイズの肝はこのモバイル表示に影響を与えないようにしつつ、パソコン用の画像の高さを変更するということになります。

変更するのはテーマのfunctions.phpとcssの２つです。

functions.phpの修正方法

子テーマを使っている場合は親テーマのみを使っている場合で若干違います。

親テーマのみの場合は・・・

テーマ編集でfunctions.phpを開きます

６４行目あたりにある

//カスタムヘッダー
add_theme_support( 'custom-header', $custom_header_defaults );

を編集します。といっても↓のコードをそのまま上書きするだけです

//カスタムヘッダー
$custom_header_defaults = array(
'random-default' => false,
'width' => 1070,
'height' => 400,
'flex-height' => false,
'flex-width' => false,
'default-text-color' => '',
'header-text' => false,
'uploads' => true,
);
add_theme_support( 'custom-header', $custom_header_defaults );

※改行がおかしい場合は修正してください（各行が「,」や「;」で終わるようにすればOKです）

子テーマの場合は・・・

子テーマのfunctions.phpへ↑のコードをそのまま貼り付けるだけです。

以上でfunctions.phpの編集は完了です（簡単に書きすぎ？？）

少しコードの説明をすると、 ‘width’ => 1070で幅を、’height’ => 400で高さを決めています。幅はこのテーマの標準幅と同じになっていますからそのままで、高さは上のコードでは400ピクセルにしてありますが好みに応じて調整してください（多分グローバルメニューと本文の上のかけら程度が見えるのがこの高さだと思うので、あまり大きくしない方が無難かもしれません）。

あとは、テーマのカスタマイザーから「ヘッダー」→「ヘッダーの高さpx（デフォルト：100）」をfunctions.phpの高さと同じにして、画像をアップロードして切り抜けばできあがりです

※親テーマの場合でも子テーマの場合でも何かの不具合で変更した途端に画面真っ白・・となったりエラーメッセージとともにロールバックされて更新できない場合もありますので、FTPなどを使ってパソコン上で修正したものをアップロードするといいと思います。

※元のfunctions.phpは不具合時に元に戻せるよう、パソコンなどに保存するようにしてください

この修正方法はSimplicity2の公式サイトでも紹介されていますが、元のソースの記述内容が現在のものと違うようなのであえて書かせていただきました。バージョンによっては公式サイトのような記述になっている場合もありますので調べてみてください。

CSSの修正方法

CSSは親テーマのCSSを上から順に読んでから子テーマのCSSを最後に読み込んで表示されます。したがって、親テーマ内で必死に探さなくても、親テーマの末尾に追記するか、子テーマの末尾に記述すれば優先適用されます。

閲覧するデバイスによって表示がおかしくなるのを最小限にするため、CSSコードを追記します。追記するCSSコードは

#h-top{
height:auto;
background-repeat: no-repeat;
background-position: top left;
}

です。こちらも基本そのままコピペで大丈夫です。

ページをキャッシュ（一時保存して表示）するプラグインを使っていたり、見ているブラウザのキャッシュ（一時保存機能）により、変更したのに適用されない場合は、前者であればキャッシュをクリアしてみる、後者であればデベロッパーツールでキャッシュをクリア（Google Chromeなら閲覧画面上で右クリックして「検証」をクリック後、リロードボタンで右クリックして「キャッシュを削除してハード再読み込み」）することで適用されたものが表示されるようになります。

他のサイトでも似たような記事があり、height(高さ)をfunctions.phpと同じ高さにするというような記述が多数あったのですが、デベロッパーツール上で確認すると、スマホ表示の時に高さが異なる場合には無駄な隙間ができたりしますので、heightは「auto(自動)」にしておいた方がいいと思います（これは実環境に合わせて調整するしかないと思います）。

おまけ　画像によってタイトルや概要が隠れてしまうときは

これでトップの画像背景が完成しました。・・・でちょっと不都合が。

それは、画像によってはタイトルやサイト概要の文字が埋もれてしまうこと。Simplicity2のタイトルは黒系、概要はグレーですから単純にこれを変えればと思っていろいろ調整してもやっぱり文字が埋もれてしまう・・そんなときはアウトライン（縁取り）を使って装飾しましょう。

追記するCSSはこちら

/*********** サイトタイトルと概要の装飾 ************/
#site-title a{
font-size:50px;
font-weight: bold;
text-shadow: #fff 1px 1px 0px, #fff -1px 1px 0px,
#fff 1px -1px 0px, #fff -1px -1px 0px;
}

#site-description{
font-size:18px;
font-weight: bold;
text-shadow: #fff 1px 1px 0px, #fff -1px 1px 0px,
#fff 1px -1px 0px, #fff -1px -1px 0px;

}

サイトタイトルのリンクと概要の部分に対してコードの上から