Simplicityでメニュー下に画像背景を設定する方法

bs

シンプリシティ(Simplicity)では「ヘッダー画像」と「背景画像」のカスタマイズ機能はデフォルトで付いています。

しかし、メニューバーの下に「背景画像」を設定する、独自のカスタマイズ機能はバージョン1.8.9時点では付いていません。

個別にソースコードを入力するか、カスタマイズ機能を駆使して設定する必要があります。

そこで、レポ部では・・・
Simplicityでメニュー下に画像背景を設定する方法
について紹介したいと思います。
スポンサードリンク

今回のSimplicityを使ってのカスタマイズは?

4302

今回は冒頭でも解説した通り、メニューバー下に背景画像を設定していきます。

できるだけ「背景色と似た色を選択」すると、違和感なく設置することができます。

レポ部での背景色は白色なので、白をベースとした「背景画像」を使用しています。

このサイトの背景画像は「上から下に徐々に白くなっている画像」を使用しています。スクロールしたときに、背景色(白色)と馴染ませて、訪問者に違和感を与えないことを意識しているからです。

カスタマイズ機能を使って背景画像を設定する

4302_01

カスタマイズ機能の「背景画像」から各種の設定作業に入ります。

お使いのブラウザの横幅に合わせて画像を作成するとキレイに表示されます。

といっても、訪問者のブラウザのサイズに背景画像の横幅はカットされてしまうので、平均的なブラウザのサイズを選択することが大切です。

レポート部長は、これからのディスプレイの成長を予期して、1680pxの横幅の背景画像を製作しています。

その他の設定項目については以下の通り入力すると間違いありません。

  • 背景の繰り返し:繰り返しなし
  • 背景の位置:中央
  • 背景スクロール:スクロール

これらの設定を完了すると「画像」が「背景全体」に表示されます。

次に「タイトル部分」の背景画像を「白い画像」で上書きする作業に移ります。

カスタマイズ機能を使ってヘッダー画像を設定する

4302_02

カスタマイズ機能の「ヘッダー画像」から各種の設定作業に入ります。

真っ白な画像(400×400Px)を「ヘッダー外側背景画像」に設定します。

以下に「真っ白な画像」を貼っておきます。作成するのが面倒くさい方は、右クリック、名前をつけて保存で、ファイルを保存してください(.pngで保存すること)。

satu15

タイトル部分の背景画像に「白い画像」を設定することで、タイトル部分に設定されている「背景画像」を上書きすることができます。

最後に「保存して公開」をクリックして設定を保存します。

モバイル表示では表示しない(mobile.css)

背景画像はモバイルでも表示されてしまうのでレイアウトが崩れてしまう可能性があります。

レイアウト崩れが気になる方は、モバイルでは表示しないように設定しましょう。

テーマの編集、mobile.cssとアクセスして、次のソースコードを追加します。

モバイル表示の背景画像(background-image)を無し(none)に設定しています。

背景色(background-color)を白色(#ffffff)に設定していますが、お好みの色で結構です。

というより、設定していないことで、Simplicityのカスタマイズ機能である「背景色の設定」を受け継ぐことができるので、記述しないほうが良いかもしれません。

背景色が白色だったら問題はありませんが、他の色だとしたら「background-color : #ffffff !important;」は削除することを推奨します。

まとめ

いかがでしょうか?

わいひらさんが製作している「Simplicity」はSEO対策も施されている便利なテーマです。

WordPressを使用している方は、知らない人もいないと言われるほど有名なテーマですね。

カスタマイズ機能があるので楽々にスタイルを変更することができます。

今回のようにソースコードを編集しなければならない場合もSimplicity公式サイトで用意されている小テーマを使うことで安全にソースコードを上書きすることも可能です。

皆さんも、試してみてくださいね。