40代からブログで稼ぐ PR

Cocoonでヘッダー画面を設定する方法・ブログ初心者向け

記事内に商品プロモーションを含む場合があります
Cocoonでヘッダー画面を設定する方法・ブログ初心者向け

 

ブログ初心者

ブログ講座を⑥まで進めて来ましたが、もうちょっとブログのデザインを良くしたいです。ブログの上部に画像を入れるにはどうすれば良いですか?

 

ブログの上部に表示する画像といえば「ヘッダー画像」ですね。

WordPressの無料テーマCocoonはWEBデザインの知識が無い初心者でもそれなりのレベルの見た目まで持っていくことができます。

ここでは、ブログ講座⑥まで利用した無料テーマCocoonを使って、ブログの初心者でも簡単にできるヘッダー画像の表示方法を解説していきましょう。

 

ロク

ちなみに、私は40代にしてフィリピンで完全に無職になった状態から日本の社会に戻るのが嫌でブログを始めて2年ほど経ちました。
今はブログ関連だけで稼いで海外と日本の両方で生活していますが、WEBデザイン、CSSなんて知識はほぼゼロです。

 

なお、ここでの説明はブログ講座を①~⑥まで進めてきた方に向けた内容となっています。

40代から稼ぐブログの作り方|簡単に超わかりやすく説明しています
40代から稼ぐブログの作り方|簡単に超わかりやすく説明していますブログで副業するって言っても何からどう始めれば良いのか分からない。副業ブログで5万円稼ぐために1から10まですべての手順を誰でも分かるように教えてくれると嬉しい!こんな悩みを解決するために、ここでは40代からでもできる副業で5万円稼ぐブログの始め方を超簡単に説明していきます。...

 

Cocoonで簡単にヘッダー画像を設置する手順

 

まず、ブログ講座①から⑥までをそのまま進めているのであれば上のような画面になっているはずです。

この画面を見てもっとデザインをどうにかしたいと思えば、まずはヘッダー画像の設置ですね。

今はブログの上部が「40代がブログで5万円稼ぐ方法」というタイトルが文字で表示されています。

このタイトル部分(ヘッダー)を画像にして、さらにブログっぽくしてしまいましょう!

 

Cocoonでヘッダー画像を入れる

 

ヘッダー画像というのは、上の写真で赤枠で囲んだ部分のことです。

大半のブログはここになんらかの画像が入っていますね。

 

ブログにヘッダー画像を入れるには、まず画像を用意しないといけません。

Cocoonの場合はヘッダー画像を1200✕300、1200✕400くらいのサイズにしておけばパソコンで見ても、スマホで見てもそれなりに綺麗に見えます。

ここまでブログ講座を①から順番に勧めてきた人であれば「アイキャッチ画像」を作るのにすでにCanvaを利用していると思います。

無料の画像編集サイトを利用した画像の作り方はこちらをご参考にどうぞ。

ブログで使えるアイキャッチ画像が無料で編集できるCanvaが便利
ブログで使えるアイキャッチ画像が無料で編集できるCanvaが便利ブログで使うアイキャッチ画像などの編集に使える無料ソフトって何がおすすめですか?ブログは画像でかなり見た目が変わりますし、適した画像があることで記事がスムーズに読まれるという効果もあります。ここでは、アイキャッチ画像など無料で編集が出来るCanvaの使い方を簡単に説明してみましょう。...

 

とりあえず先に進めたければこの1200✕400の画像を使って下さい。

 

ロク

ヘッダー画像を作成したら先に進みましょう。

 

Cocoon設定からヘッダー画像をアップロードする

 

ヘッダー画像をアップロードするには、まずダッシュボードのメニューから「Cocoon設定」→「Cocoon設定」を選択します。

ここでは、画像だけを設定しますが、Cocoonで何か設定する必要があれば、とりあえず「Cocoon設定」をチェックすればどうにかなりますね。

 

 

Cocoon設定の画面に移動すると、たくさんタブがある設定ページに移動しますので、その中から「ヘッダー」を選択します。

 

 

ヘッダー設定の項目には「レイアウト」「高さ」「ヘッダーロゴ」などが並んでいますので「ヘッダーロゴ」から用意した画像をアップロードしましょう。

 

 

画像をアップロードするとプレビューが表示されます。

このまま同じ設定ページで「ヘッダー全体色」と「グローバルナビメニュー色」の変更もしておきましょう。

 

 

後々に好きな色に設定すれば良いですが、とりあえずここでは一番シンプルな白と黒に設定しておきます。

画像のアップロードと色の設定が終わったら「変更を保存」をクリックして保存して下さい。

変更を保存すると、ブログのトップページを見てみると下の画像のようになっているはずです。

 

 

これで、さらにブログっぽくなりましたね。

今回はここまでです。

 

Cocoonのブログにヘッダー画像を挿入する・まとめ

 

ヘッダー画像はブログの顔のようなモノですので、デザインしてこだわり始めるとキリがありませんね。

ただ、ブログの読者の多くはトップページではなく、キーワードから一つの記事を検索してきています。

ブログのデザインにこだわるのは大事ですが、まず最初は適当に作っておいてブログを書く方に注力する方がおすすめです。

このブログのようにヘッダー画像を非常に適当に貼り付けているだけでも、月間10万PVは達成できていますしね。

 

次のステップは「Cocoonでブログにメニューを表示する方法」になります。

NEXT STEP Cocoonでブログにメニューを表示する【WordPress】へ進む

Cocoonでブログにメニューを表示する手順【簡単に説明します】
Cocoonでブログにメニューを表示する手順【簡単に説明します】無料テーマのCocoonでブログにメニューを表示したい場合はどうすれば良いですか?メニューが無いブログはまずありませんので、どのブログでも設定が必須になるのが「メニュー」です。ここでは、ブログ初心者でも分かるように簡単なメニューの表示方法を説明していきましょう。...

ここが一番最初「40代から始めるWordPressで稼ぐブログの作り方」から始める

40代から稼ぐブログの作り方|簡単に超わかりやすく説明しています
40代から稼ぐブログの作り方|簡単に超わかりやすく説明していますブログで副業するって言っても何からどう始めれば良いのか分からない。副業ブログで5万円稼ぐために1から10まですべての手順を誰でも分かるように教えてくれると嬉しい!こんな悩みを解決するために、ここでは40代からでもできる副業で5万円稼ぐブログの始め方を超簡単に説明していきます。...