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

公開日:2018年6月26日 サイト作成日記 使い方など
Knowledge Base Wordpress 設定

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

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

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

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

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

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

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

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

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

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

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

Simplicityのヘッダー画像は

  • 高さ100px(ピクセル)で固定
  • パソコン表示用とスマホ(モバイル)表示用で別
  • になっています。スマホ用に関しては高さを設定して画像を指定すれば自動で縮小されていい感じに表示されるので、特にカスタマイズする必要はありません。

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

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

    functions.phpの修正方法

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

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

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

    64行目あたりにある

    //カスタムヘッダー
    add_theme_support( ‘custom-header’, $custom_header_defaults );
    【注意】コードをコピーして使用する前に必ずお読みください

    この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

    使用については自己責任でお願いします

    コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

    万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

    コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

    コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

    その場合には以下の方法で修正を行ってみてください

    1. コードの中に全角の記号が入っていませんか?
    2. 半角にすることで解消できます
    3. コードの中に全角の空白(スペース)がありませんか?
    4. 半角にすることで解決できます
    5. 上のようなことがないのに更新できない
    6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

    コードを転載する場合には

    ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

    を編集します。といっても↓のコードをそのまま上書きするだけです
    //カスタムヘッダー
    $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 );
    【注意】コードをコピーして使用する前に必ずお読みください

    この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

    使用については自己責任でお願いします

    コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

    万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

    コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

    コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

    その場合には以下の方法で修正を行ってみてください

    1. コードの中に全角の記号が入っていませんか?
    2. 半角にすることで解消できます
    3. コードの中に全角の空白(スペース)がありませんか?
    4. 半角にすることで解決できます
    5. 上のようなことがないのに更新できない
    6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

    コードを転載する場合には

    ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

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

    子テーマの場合は・・・

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

    以上でfunctions.phpの編集は完了です(簡単に書きすぎ??)

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

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

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

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

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

    CSSの修正方法

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

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

    #h-top{
      height:auto;
      background-repeat: no-repeat;
      background-position: top left;
    }
    【注意】コードをコピーして使用する前に必ずお読みください

    この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

    使用については自己責任でお願いします

    コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

    万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

    コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

    コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

    その場合には以下の方法で修正を行ってみてください

    1. コードの中に全角の記号が入っていませんか?
    2. 半角にすることで解消できます
    3. コードの中に全角の空白(スペース)がありませんか?
    4. 半角にすることで解決できます
    5. 上のようなことがないのに更新できない
    6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

    コードを転載する場合には

    ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

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

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

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

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

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

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

    追記する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;
    }
    【注意】コードをコピーして使用する前に必ずお読みください

    この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

    使用については自己責任でお願いします

    コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

    万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

    コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

    コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

    その場合には以下の方法で修正を行ってみてください

    1. コードの中に全角の記号が入っていませんか?
    2. 半角にすることで解消できます
    3. コードの中に全角の空白(スペース)がありませんか?
    4. 半角にすることで解決できます
    5. 上のようなことがないのに更新できない
    6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

    コードを転載する場合には

    ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

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

    1. フォントサイズをそれぞれ変更
    2. フォントを太字に
    3. 文字の周囲に白い影を付ける

    としているだけです。文字自体の色についてはここで「color:〇〇;」で指定するもよし、カスタマイザーで変更するもよしだと思います。

    ※あまり凝って色を選定するよりは、上のCSSのようにタイトル・概要ともデフォルトのカラーにしておいて、縁取りを白にすることで、背景が白っぽい時には通常の文字として表示され、背景が黒っぽいときは白い縁取りがクローズアップされるという感じにしておけばどんな画像が背景になっても対応できると思います。


    どうでしたか??案外簡単にできてしまうもんですねぇ。これに限らずSimplicityテーマは作者の方が仰る通り「ここをこうしたいなぁ・・」の部分がすべてユニット化されて記述されているので本当にカスタマイズしやすいと思います。

    いろいろなテーマを使ってみたけどどうも・・・という方は最初は殺風景だけど(語弊あり・・)カスタマイズするときれいなテーマ【Simplicity】を使ってみてください。ちなみに公式テーマではありませんのでネット検索で見つけてくださいね(一番上のリンクからも入手できます)。

    ちなみにこのサイトは更にオリジナリティを!!ということで今回紹介した方法は使っていません。

    というプラグインを使ってスライダー表示してます(記事ジャンルで画像セットが変わる工夫もしてます)

    いやぁ~Wordpressでのサイト作りは楽しいですね!!

    Wordpressの本

    Amazonの人気商品楽天市場の人気商品
    CS Shop
    いちばんやさしいWordPressの教本第4版 人気講師が教える本格Webサイトの作り方 [ 石川栄和 ]

    いちばんやさしいWordPressの教本第4版 人気講師が教える本格Webサイトの作り方 [ 石川栄和 ]

    1,706 円 (税込) 送料込
    人気講師が教える本格Webサイトの作り方 石川栄和 大串肇 インプレスイチバン ヤサシイ ワードプレス ノ キョウホン イシカワ,ヒデカズ オオグシ,ハジメ 発行年月:2019年08月 予約締切日:2019年06月26日 ページ数:280p サイズ:単行本 ISBN:9784295006664 石川栄和(イ..
    たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

    たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

    1,944 円 (税込) 送料込
    <p>WordPressによるWebサイト作成の基本を一から学べる書籍です。1日8時間の勤務時間内に読むことができる程度に解説内容を絞り込み,初心者・新人が最初の1冊目として読むのにふさわしい内容となっています。本書ではローカル環境にWordPressをインストールしてWebサイト..
    楽天ウェブサービスセンター CS Shop

    いつでもご相談・サイトカスタマイズの依頼を受け付けています

    Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

    ※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


    【スポンサーリンク】


    記事の拡散にご協力をお願いします

    閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

    関連情報