Simplicity2のヘッダー画像の変更方法『wordpress無料テーマ』

ヘッダー画像カスタマイズ

こんんちは、こんばんは、ごりょんさんです。

先日初めてSimplicity2をダウンロードして有効化しました。

関連記事➝WordPress無料テーマSimplicity2のダウンロードと設定方法

エックスサーバーに移行(引っ越し)した際に、ドメインプレゼントで貰った独自ドメインが1つありましたので、WordPressをインストールしてSimplicity2のテーマを導入しました。

関連記事➝【最新版】エックスサーバーへの新規登録方法の手順を解説【WordPress移行】

まだブログ名は考えていませんが、投資関係のブログにしようと思っています。

とりあえずTOP画像(ヘッダー画像)でも替えておこうと思いまして、どうせなら他のブログと違うようなオリジナリティ溢れるヘッダー画像にしていきたいなと。

スポンサーリンク

ブログのヘッダー画像とは?

ヘッダー画像とはブログのいちばん上からグローバルメニューまでのブログタイトルと説明文が掲載されているバックの画面の事ですね。

当ブログはSimplicityを使用していますが、ヘッダー画像はかなり小さめになっています。

ヘッダー画像カスタマイズ2

デフォルトでは上下100pxの高さに設定されていますが、当ブログでは200pxに変更しています。

ヘッダー画像カスタマイズ3

この上下の幅をもう少し広く設定すればどうなのか実験してみることにしました。

ブログのヘッダー画像の取得方法

ブログの顔になりますヘッダー画像ですが、素材をどこから調達すれば良いのでしょうか?

いちばんポピュラーな方法としまして、自分でスマホで撮影する事ですね。外出先での景色や食べ物などを撮影して素材として使用するのが簡単です。

ここで注意点が1つありますが、ブログにクリック報酬型広告を貼る場合は著作権等に気を付けないといけません。

芸能人やキャラクター系の写真は使わない方が良いですね。

もう1つの方法はフリー写真の素材を提供しているサイトからダウンロードしてくる事です。

商用利用・加工OKですので安心して使用する事が出来ます。

わたくしがいつも利用しているサイトを紹介しておきます。

  • photo AC  1日5回までしか検索ができません。
  • ぱくたそ   人物写真が豊富です。
  • pixabay   ここも写真が大量にあります。

大体この3つでまかなっています。

新たに開設するブログは投資系のFX関係にしようかなと思っています。当ブログでも2記事だけ掲載していますが、全くアクセスがありません(笑)。

使う素材はトルコリラ紙幣にしようと思いますのでpixabay.comにアクセスしてみましょう。

「トルコリラ」もしくは「Turkish Lira」どちらかで検索します。

ヘッダー画像カスタマイズ8

検索結果が表示されました。ここでの注意点としまして、いちばん上にあります背景が黄色の画像はスポンサー画像ですので、無料ではダウンロードできません。どう見ても上の写真の方がカッコ良いですね(笑)。

背景が白色の写真がフリーの画像になります(クリックで拡大)。6枚だけですので少ないですね。

ヘッダー画像カスタマイズ7

とりあえず3つほどダウンロードしておきます。すべて1920×1280pxの大画像です。

ヘッダー画像カスタマイズ6

wordpressブログでヘッダー画像を作成する

次からはWordPressのブログでの作業になります。

WordPressの管理画面から「サイトをカスタマイズ」➝「ヘッダー」と進みます。

デフォルトの100pxで設定してみる

デフォルトの状態です。推奨設定が1070×100pxになっています。とりあえず新規画像を追加してみましよう。

ヘッダー画像カスタマイズ9

①「ファイルを選択」をクリック。②画像を選択。③「開く」をクリックします。

ヘッダー画像カスタマイズ10

画像がアップロードされましたので「選択して切り抜く」をクリックします。

ヘッダー画像カスタマイズ11

上下の幅の設定が100pxになっていますので切り取れる範囲が少ししかありません(笑)。

ヘッダー画像カスタマイズ12

試しに切り取ってみましたところ、何ともカッコ悪いヘッダーになりました。

ヘッダー画像カスタマイズ13

上下の幅を拡大する方法

上下が100pxではあまりにも狭い感じになりますのでもう少し幅を広げる設定を試してみましょう。

ヘッダーの高さを100pxから400pxに広げました。

ヘッダー画像カスタマイズ14

次に先ほどダウンロードした画像のサイズを横幅を1070pxに縦幅を400px前後にリサイズしました。横は縮小ですが縦はいらない部分を切り取りました。

ヘッダー画像カスタマイズ15

もう一度チャレンジしてみましょう。しかし相変わらず100px以上切り抜きの幅を広げる事は出来ませんが、代わりに「切り抜かない」という項目が表れました。これをクリックします。

ヘッダー画像カスタマイズ16

それなりにマシになりましたね。

ヘッダー画像カスタマイズ17

なお、画像を複数アップロードして「アップロード済みヘッダーをランダム表示」にチェックを入れますとブログのヘッダー画像がランダムで表示されます。

ヘッダー画像カスタマイズ21

画面いっぱいにヘッダー画像を表示させるには

今度はブログの画面いっぱいにヘッダー画像を表示させてみましょう。

先ほどの画像を挿入したのは「現在のヘッダー」ですが、もう少し下に「ヘッダー外側背景画像」という項目がありますのでここに画像を設定します。更に「グローバルナビを横幅いっぱいにする 」にチェックを入れておきます。

ヘッダー画像カスタマイズ18

ばっちりブログの横幅に収まりましたが男性の口元が切れてしまいました(笑)。やはり400pxでは大きすぎるみたいですね。

ヘッダー画像カスタマイズ19

結局こんな感じに落ち着きました。上下の幅は200pxに設定しました。使用した画像は1495×222となりました。

ヘッダー画像カスタマイズ20

ヘッダー画像ブログ幅いっぱいに広げますとグローバルナビが短くなりますのでこれを長くしてやります。

ヘッダー画像カスタマイズ22

カスタマイズページページ➝「ヘッダー」の「グローバルナビを横幅いっぱいにする 」にチェックを入れます。

ヘッダー画像カスタマイズ28

しかしSimplicity2ではスキンによってグローバルナビの幅が広がらないものもあるみたいです。そこでスキンを変更してやります。

カスタマイズページで「スキン」を選択します。赤枠内の7種類がグローバルナビが長いバージョンです。

ヘッダー画像カスタマイズ22

これでグローバルナビがブログ幅いっぱいに広がりました。

ヘッダー画像カスタマイズ23

Simplicityではカスタマイズページページ➝「色」の「グローバルナビを横幅いっぱいにする」にチェックを入れます。

モバイルでのヘッダー画像の設定

今まではパソコンでのヘッダー画像の設定でしたが、スマホでも独自のヘッダー画像を挿入する事が出来ます。

カスタマイズページの「ヘッダー」のいちばん下の「モバイルヘッター背景画像」で画像を設定します。

ヘッダー画像カスタマイズ24

スマホで見てみますとこんな感じになりました。

ヘッダー画像カスタマイズ27

まとめ

今回Simplicity2でのヘッダー画像を設定していきましたが、あまり派手な画像を設定してしまいますと肝心のブログ本文が目立たなくなってしまいます。

ブログの内容に合わせて変更していくのがベストですね。

やはりSimplicityでは100~200pxに設定している方が無難ですね。

スポンサーリンク

シェアする

フォローする

コメント

  1. こんばんは。はじめまして。
    大喜まさこと申します。

    私もこのテンプレートが好きで使っています。カスタマイズしやすいですよね。
    pixabayもよく使います。こちらのブログはヘッダー画像が目を引きますね。

    また越させてください。ポチして帰ります。

    • ごりょんさん より:

      大喜さん初めまして。猫は可愛いですね(笑)。
      コメントありがとうございました。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です