HPのヘッダー画像の作成の仕方

ヘッダーって？何と思われると思います？

HPの一番上の画像（バナー）といえば分かるのではと思います。
ＨＰの顔と言われています。
このヘッダーによって、そのHPの印象が変わってきます。

Simplicity2にはヘッダーがないので、物足りないと思っていませんか？

例えば、このHPのヘッダーは

これです。

今回は、
自分のＨＰにあうヘッダーを作成したいと思います。

ヘッダー画像の取得方法

ＨＰの顔になるヘッダー画像ですが、
素材をどこから調達すれば良いのか？これが問題です。

１．いちばんポピュラーな方法としては、
自分のデジカメ、スマホで撮影したものを使うことです。

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

フリー素材サイトで検索してみて下さい。

このエディターにインストールしてあるPixabayもフリー素材なので、著作権を心配すること無く取得することができます。

３．一番簡単な方法は、ヘッダーのあるスキンを選択することです。

ヘッダーの作成を後回しにして、簡単にヘッダーをＨＰにつける方法があります。

Simplicity2には、
あるスキンを選択するとヘッダーの付いているものがあります。

上にある管理メニュータブをクリックして、カスタマイズをクリックします。
表示された、スキンをクリックします。

したの方にある

ラージピクチャーのヘッダー
　　　　　　　　　ストロベリー

２種類のスキンを使うのも手です。

以下はストロベリーのヘッダーです。画面いっぱいなので、とても、いい感じです。
このヘッダーを使ってもいいと思います。

ヘッダーを作成していきます。

次に使用したい画像をパソコンからワードプレスの管理画面にアップロードします。

画像ですが、デジカメなどで撮った画像は大きすぎるので、パソコン上でヘッダーサイズに加工してから、アップロードします。

加工するためのソフトですが、
私は、FastStone Capture 8.5を使っています。

この部分を間違っていましたので、訂正させていただきます。

使っているのは「FastStone Capture5.3」です。
無料ながらとても高機能なソフトです。

このページではこのソフトのことを
サラッと書いてしまったのですが、興味を持たれた方がいましたので、
ダウンロードの仕方についてのページを作成しました。

高機能画像キャプチャツール「FastStone Capture5.3」

他に使っているソフトが有るのでしたら、そのソフトをご使用して下さい。

このソフトを使用しての手順で説明します。

１．画像のサイズを横幅を1070pxに縦幅を200px前後にリサイズします。（このテーマに合うサイズです、テーマによって変更ください）

１．FastStone Capture 5.3を起動させて、ヘッダーにしたい画像をその上にドロップアンドダウンさせます。

２．メニューのリサイズをクリックして、幅を1070pxにして、OKをクリック。

３．メニューの矩形（くけい）をクリックします。ヘッダーにしたい領域で画面構成を考えながら範囲指定します。最終的に、高さが２００pxになりましたら、ダブルクリックで確定します。

（サイズは画面の左下で確認することができます）

４．ファイルをクリックして、名前をつけて保存します。

以上でヘッダー画像（バナー）の作成は終了です。

７月２６日追記

ヘッダー作成部分の説明を簡略にしていたので、

夏らしいヘッダーを作成のページで詳しく書きましたのでご覧になってください。

２．作成したヘッダー画像をＨＰにアップロードします。

WordPressの管理画面から「外観」➝「ヘッダー」と進みます。

デフォルトの設定では、100pxになっています。
ヘッダーの高さが100pxでは狭いので200pxに設定します。
ヘッダーの高さを100pxから200pxに広げます。

変更手順

デフォルトでは、１００pｘになっています。

この１の後ろをクリックします。キーボードのバックスペースキーをクリックして１を削除します。
そして半角全角キーを半角にして２をクリックします。これで２００になりました。

※矢印で数字を変えることができるのですが、１文字ずつなので変更するのに時間がかかってしまいます。上記の方法の方が時間の節約になるし、簡単です。

このようになっていれば、OKです。

次に、新規画像を追加をクリックします。

ファイルをアップロードします。作成したファイルを選択、またはドラッグアンドドロップします。

選択をクリック。

保存して公開をクリックで、ヘッダー作成が完了です。

ちゃんと表示されているか、確認して下さい。

確認方法ですが、記事投稿のタイトルの上に

※　投稿を更新しました。投稿を表示をクリックすることで確認することができます。

ちょっとしたことですが、
このようなことを知ることで時間の短縮になりますので、覚えておいて下さい。

お疲れ様でした。

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

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

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

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

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

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

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

※この情報は、ネットで得た情報ですが、どこで得たのかアドレスがわからなくなりました。
ありがたく使わせていただきます、感謝します。
この情報ですが、これでいいのか私も確かめていません。

シック
ビジネスメニュー
ラージピクチャーヘッダー
ラージピクチャーストロベリー
ホワィティー
オレンジメニュー（サブメニューなし）
Monokai

これでグローバルナビがブログ幅いっぱいに広がるはずです。

私も画面の幅いっぱいのヘッダーを試してみたのですが、使用しているスキンのせいなのか失敗してしまいました。

いずれまた試してみたいと思っています。