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

最近では「あれ?このサイトひょっとして・・・」とソースを見るとやっぱりね!という位使う人が多くなった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 );
    を編集します。といっても↓のコードをそのまま上書きするだけです
    //カスタムヘッダー
    $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は不具合時に元に戻せるよう、パソコンなどに保存するようにしてください

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

    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(自動)」にしておいた方がいいと思います(これは実環境に合わせて調整するしかないと思います)。

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

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

    それは、画像によってはタイトルやサイト概要の文字が埋もれてしまうこと。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. 文字の周囲に白い影を付ける

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

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


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

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

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

    いろいろなスライダー系プラグインを試してみた中で久しぶりに無料でも面白いのを発見しました。プラグインの名前は【WonderPlugin Slider Lite】です。有料版もありますが、複数スライダーの作成も、たくさんのエフェクトも無料版で作ることができるのでこれ1つで基本的なスライダーとしての機能は十分だと思います。

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

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

    Wordpressの本

    Amazonの人気商品楽天市場の人気商品
    CS Shop
    【送料無料】 WordPressレッスンブック HTML5 & CSS3準拠 スマートフォン・タブレット対応 / エ・ビスコム・テック・ラボ 【本】

    【送料無料】 WordPressレッスンブック HTML5 & CSS3準拠 スマートフォン・タブレット対応 / エ・ビスコム・テック・ラボ 【本】

    3,024 円 (税込) 送料込
    基本情報ジャンル建築・理工フォーマット本出版社ソシム発売日2014年06月ISBN9784883379248発売国日本サイズ・ページ319p 24×19cm関連キーワード 9784883379248 【FS_708-2】出荷目安の詳細はこちら>>楽天市場内検索 『在庫あり』表記について 
    【中古】 WordPressレッスンブック ステップバイステップ形式でマスターできる / エビスコム / ソシム [単行本]【メール便送料無料】【..

    【中古】 WordPressレッスンブック ステップバイステップ形式でマスターできる / エビスコム / ソシム [単行本]【メール便送料無料】【..

    323 円 (税込)
    著者:エビスコム出版社:ソシムサイズ:単行本ISBN-10:4883377245ISBN-13:9784883377244■通常24時間以内に発送可能です。午後1時までのご注文は通常当日出荷。■メール便は、1冊から送料無料です。※宅配便の場合、2,500円以上送料無料です。※あす楽ご希望の方は、宅配便を..
    楽天ウェブサービスセンター CS Shop
    トップへ戻る