ブログの上部に表示する画像といえば「ヘッダー画像」ですね。
WordPressの無料テーマCocoonはWEBデザインの知識が無い初心者でもそれなりのレベルの見た目まで持っていくことができます。
ここでは、ブログ講座⑥まで利用した無料テーマCocoonを使って、ブログの初心者でも簡単にできるヘッダー画像の表示方法を解説していきましょう。
今はブログ関連だけで稼いで海外と日本の両方で生活していますが、WEBデザイン、CSSなんて知識はほぼゼロです。
なお、ここでの説明はブログ講座を①～⑥まで進めてきた方に向けた内容となっています。
Cocoonで簡単にヘッダー画像を設置する手順
まず、ブログ講座①から⑥までをそのまま進めているのであれば上のような画面になっているはずです。
この画面を見てもっとデザインをどうにかしたいと思えば、まずはヘッダー画像の設置ですね。
今はブログの上部が「40代がブログで5万円稼ぐ方法」というタイトルが文字で表示されています。
このタイトル部分（ヘッダー）を画像にして、さらにブログっぽくしてしまいましょう！
Cocoonでヘッダー画像を入れる
ヘッダー画像というのは、上の写真で赤枠で囲んだ部分のことです。
大半のブログはここになんらかの画像が入っていますね。
ブログにヘッダー画像を入れるには、まず画像を用意しないといけません。
Cocoonの場合はヘッダー画像を1200✕300、1200✕400くらいのサイズにしておけばパソコンで見ても、スマホで見てもそれなりに綺麗に見えます。
ここまでブログ講座を①から順番に勧めてきた人であれば「アイキャッチ画像」を作るのにすでにCanvaを利用していると思います。
無料の画像編集サイトを利用した画像の作り方はこちらをご参考にどうぞ。
とりあえず先に進めたければこの1200✕400の画像を使って下さい。
Cocoon設定からヘッダー画像をアップロードする
ヘッダー画像をアップロードするには、まずダッシュボードのメニューから「Cocoon設定」→「Cocoon設定」を選択します。
ここでは、画像だけを設定しますが、Cocoonで何か設定する必要があれば、とりあえず「Cocoon設定」をチェックすればどうにかなりますね。
Cocoon設定の画面に移動すると、たくさんタブがある設定ページに移動しますので、その中から「ヘッダー」を選択します。
ヘッダー設定の項目には「レイアウト」「高さ」「ヘッダーロゴ」などが並んでいますので「ヘッダーロゴ」から用意した画像をアップロードしましょう。
画像をアップロードするとプレビューが表示されます。
このまま同じ設定ページで「ヘッダー全体色」と「グローバルナビメニュー色」の変更もしておきましょう。
後々に好きな色に設定すれば良いですが、とりあえずここでは一番シンプルな白と黒に設定しておきます。
画像のアップロードと色の設定が終わったら「変更を保存」をクリックして保存して下さい。
変更を保存すると、ブログのトップページを見てみると下の画像のようになっているはずです。
これで、さらにブログっぽくなりましたね。
今回はここまでです。
Cocoonのブログにヘッダー画像を挿入する・まとめ
ヘッダー画像はブログの顔のようなモノですので、デザインしてこだわり始めるとキリがありませんね。
ただ、ブログの読者の多くはトップページではなく、キーワードから一つの記事を検索してきています。
ブログのデザインにこだわるのは大事ですが、まず最初は適当に作っておいてブログを書く方に注力する方がおすすめです。
このブログのようにヘッダー画像を非常に適当に貼り付けているだけでも、月間10万PVは達成できていますしね。
次のステップは「Cocoonでブログにメニューを表示する方法」になります。
NEXT STEP Cocoonでブログにメニューを表示する【WordPress】へ進む
ここが一番最初「40代から始めるWordPressで稼ぐブログの作り方」から始める
