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

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

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

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

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

関連 エックスサーバーの評判ってどうなの?料金プランや契約・更新のやり方は?

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

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

スポンサーリンク

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

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

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

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

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

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

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

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

ブログの顔とも言えるヘッダー画像ですが、素材をどこから調達すれば良いのでしょうか?いちばんポピュラーな方法は、自分でスマホで撮影する事ですね。外出先での景色や食べ物などを撮影して素材として使用するのが簡単です。

ここで注意点が1つありますが、ブログにGoogle AdSenseなどのクリック報酬型広告を貼る場合は著作権等に気を付ける必要があります。芸能人やキャラクター系の写真は使わない方が良いですね。

もう1つの方法は、フリー写真の素材を提供しているサイトからダウンロードしてくる事です。商用利用・加工OKなので、安心して使用する事が出来ます。

ワタシがいつも利用しているサイトを紹介しておきます。大体この3つで間に合うかと思います。

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

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

ヘッダー画像に使う素材は、トルコリラ紙幣にしようと思うので pixabay.comにアクセスしてみましょう。

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

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

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

背景が白色の写真がフリーの画像になります。7枚だけですので少ないですね。

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

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

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

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

次からはWordPressのブログでの作業になります。WordPressの管理画面から『サイトをカスタマイズ』⇒『ヘッダー』と進みます。

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

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

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

『ファイルをアップロード』から、①『ファイルを選択』をクリック。②画像を選択。③「開く」をクリックします。

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

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

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

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

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

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

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

上下の幅を拡大する方法

上下の幅が100pxでは、あまりにも狭い感じになるので、ヘッダーの高さを100pxから400pxに広げてみました。

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

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

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

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

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

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

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

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

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

画面一杯にヘッダー画像を表示させるには

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

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

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

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

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

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

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

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

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

『サイトをカスタマイズ』⇒『ヘッダー』と進み、『グローバルナビを横幅いっぱいにする 』にチェックを入れます。

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

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

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

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

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

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

Simplicityでは、『サイトをカスタマイズ』⇒『色』の『グローバルナビを横幅いっぱいにする』にチェックを入れます。

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

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

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

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

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

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

まとめ

今回、Simplicity2でのヘッダー画像を設定していきましたが、あまり派手な画像を設定してしまうと、肝心のブログ本文が目立たなくなってしまいます、ブログの内容に合わせて変更していくのがベストです。

やはりSimplicityでは、上下幅は100~200pxに設定するのが無難ですね。

スポンサーリンク

フォローする

コメント

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

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

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

    • ごりょんさん より:

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

コメントをどうぞ

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