WordPress ヘッダー画像の設置や編集&サイトの背景変更方法【simplicity編】

Wordpress

こんにちは、さちよです。

 

今回はWordpress(ワードプレス)の「ヘッダー画像の設置や編集、サイトのカスタマイズ方法」についてご紹介します。

 

今回は、無料テーマ(テンプレート)simplicityのヘッダー画像の編集やカスタマイズになりますので、simplicity(シンプリシティ)をお使いの方はぜひ参考にしてください。

 

また、ヘッダーはブログで一番に目に入る重要な場所なので、かわいい画像やかっこいい画像で、あなたらしいヘッダーを設置してみてくださいね(^^)

 

スポンサーリンク

simplicity ヘッダー画像の編集&サイトのカスタマイズ【動画解説】

こちらの動画では

◎ヘッダー画像の設定方法

◎ヘッダーの編集方法

◎サイトの背景変更

などについて解説しています。

 

動画の手順通りにすすめていけば簡単に作成できますので、ぜひ一緒に操作してみてください。

※動画の再生速度を速めてみたいときは、右下の歯車アイコンをクリックすると速度変更ができます。

 

 

 

ヘッダー画像の作り方については、「Photoscapeの使い方」の記事で詳しく解説しています。

 

ヘッダーとは

ヘッダーとはブログやサイト画面の上部にあり、すべてのページに共通して表示される場所(固定している場所)です。

 

ヘッダーはブログのトップページに表示され、サイトに訪れた人が一番最初に目にする場所なので、ブログの中で最も重要な場所になります。

 

訪問者の第一印象というのはこのヘッダー画像で決まるというくらい、重要な場所になりますので、ぜひこの動画を参考にしてかっこいいヘッダーを作成してみてください。

 

 

simplicityヘッダーサイズ おすすめの画像サイズは?

simplicityの初期設定では、ヘッダーのサイズは「1070×100ピクセル」になっています。

 

通常は「1070×100ピクセル」サイズでもOKですが、画像挿入する場合、100px(ピクセル)よりも高く設定したほうが見栄えもよく、画像もきれいに入る場合が多いです。

 

ヘッダーの高さについては挿入する画像によって変わってきますので、お好みの高さに設定してみてください。

 

ちなみに私の場合、ヘッダー画像のサイズは高さ「150~200px(ピクセル)」にすることが多いです。

 

ヘッダー画像の設定方法

では、さっそくヘッダーに画像を設定していきましょう!

 

Wordプレスの管理画面(ダッシュボード)にアクセスし、左サイドメニューの「外観」⇒「ヘッダー」を選択します。

 

 

次に、「現在のヘッダー」「新規画像を追加」クリックし、

 

 

「ファイルをアップロード」⇒「ファイルを選択」をクリックして、

 

 

 

 

あなたのPCに保存している使いたい画像を選択し、「開く」をクリックします。

 

 

シンプリシテイの場合、ヘッダー画像の初期設定サイズは「1070×100」ピクセルです。

 

挿入画像がヘッダーサイズにぴったりの場合

 

 

挿入するヘッダー画像をPhotoscapeなどでヘッダーサイズぴったりに作成している場合、ヘッダーサイズに合わせて切り抜く必要がないので、「切り抜かない」をクリックします。

拡大図

 

 

挿入画像がヘッダーサイズより大きい場合

 

 

挿入画像がヘッダーサイズよりも大きい場合、ヘッダーサイズに合わせて切り抜く必要があります。

ヘッダーサイズに合わせた白抜きが表示されるので、使いたい場所に白抜きを合わせ「画像切り抜き」をクリックします。

 

 

アップロードされると、ヘッダーに画像が挿入されます。

ヘッダーの編集 高さを変える

初期設定で設定されているヘッダーのサイズは、変更することができます。

 

 

ヘッダーの高さを変更するには、「ヘッダーの高さpx」でお好みのサイズを入力します。デフォルトでは100ピクセルになっているので、ここに数字を入力すると高さが変更できます。

 

ちなみに私は、ヘッダーに画像を挿入した場合、高さを100~200にすることが多いです。

 

 

ヘッダーの編集 タイトルをロゴに変更する

 

ヘッダーは通常、文字のみのサイトタイトルが表示されますが、このサイトタイトルを「ロゴ画像(絵)」に変更することができます。

 

 

ロゴ画像への変更は、「ロゴ画像」の「画像を選択」をクリックし、あなたのPCに保存している使用したいロゴを選択しアップロードします。

 

ロゴ画像をアップロードしたら、「ロゴを画像にする」にチェックを入れます。

 

 

これでサイトタイトルをロゴ画像に変更できました。

<変更前>

↓↓

<変更後>

 

 

サイトタイトルは通常、タイトルをクリックするとトップページに飛ぶようにリンクが貼っています。simplicityではロゴ画像に変更しても、ロゴ画像にトップページのリンクが貼られるので、クリックするとトップページに移動できます。

 

サイトの編集 色を変更

simplicityでは、ブログの背景色やリンクの色、サイトタイトルの色、グローバルメニューの色など、さまざまな個所を好きな色に変更できます。

 

色を変更するには、「外観」⇒「カスタマイズ」⇒「色」をクリックすると、いろんな場所の色を変更できます。

 

詳しくは動画で解説していますので、ぜひ参考にしてみてください。

 

まとめ

ヘッダーは「サイトの顔」といってもいいほど、ヘッダーでブログのイメージが決まります。

画像を挿入する場合は、イメージに合った画像を挿入し、素敵なヘッダーを作成してみてくださいね。