Cocoonでヘッダー画像・グローバルナビを設定する方法を「初心者向けに」分かりやすく解説!

Cocoonを使っていますが、全然オシャレな見た目にできません。



こういった切実な悩みを解決します。
Cocoonはシンプルで、ダサイテーマと言われることがあります。
実際、Cocoonでは着せ替え用の「スキン」が用意されていますが、ヘッダーの見た目はどれもイマイチなんですよね・・・。
でも、ヘッダーに画像を設定すれば、「めっちゃオシャレ!」とは言わないまでも、ダサイと言われないようなトップページにすることが可能です。
ここでは、ヘッダーに画像を設定する方法について解説すると共に、ヘッダー画像とセットになるグローバルナビの設定についても解説していきます。
ぜひ最後まで見て、Cocoonでも割とオシャレなヘッダーをゲットしてみてくださいね。




テーマ名 | WordPressテーマ「Cocoon」 |
価格 | 無料 |
開発者 | わいひらさん(@MrYhira) |
推奨環境 | WordPress5.7.0以上 PHP7以上(5.6でも動作するとは思います) Google Chrome Firefox Microsoft Edge Safari |
Cocoonのヘッダーカスタマイズの例


上記は、Cocoonでヘッダー画像、グローバルナビを設定したカスタマイズの例です。
Cocoonでは、このようにヘッダーに画像を載せることができます。



画像を設定すると、オシャレな見た目になりますね。
ここでは、下記の3つの項目に分けて解説していきますね。
- ヘッダー画像の設定
- グローバルナビの設定
- タイトル名の設定
では、まいりましょう。
Cocoonのヘッダー画像を設定する方法


では、Cocoonに上記のようなヘッダー画像を設定していきましょう。
具体的な手順は下記の通りです。
まずはヘッダーに使う画像を用意しましょう。
僕がオススメするのは「Canva」という画像選定・編集ツールです。
Canvaなら画像探しから編集まで、オールインワンで完結できます。
ちなみに、ヘッダーに使う画像サイズは、小さすぎないようにしましょう。ボケてしまいますので。








Cocoonのグローバルナビを設定する方法


続いて、上記のようなグローバルナビを設定する方法を解説します。




メニュー名は分かりやすいように「グローバルナビ」などとしておき、メニュー位置は「ヘッダーメニュー」を選択しましょう。


入力、選択ができたら「メニューを作成」をクリックします。






設定ができたら「変更をまとめて保存」をクリックして、グローバルナビの設定は完了です。
Cocoonヘッダーのタイトルを設定する方法


最後に、Cocoonヘッダーに表示するサイトタイトルを設定する方法を解説します。
なお、ここに表示される文字は、WordPress一般設定の「サイトのタイトル」が表示されます。




下記のエリアで、好きなように調整してみましょう。


以上、ここまでに解説してきた3つの項目をうまく設定することで、ヘッダーをオシャレにすることができます。
まとめ|ヘッダーをカスタマイズしてオシャレな見た目をゲットせよ。
と、いうわけで、今回はCocoonのヘッダーカスタマイズ方法を解説してきました。
正直、Cocoonでオシャレなデザインにするのは、中々に骨が折れます。
が、ポイントを押さえて設定すれば、簡単にオシャレっぽい見た目にすることは可能。



少しでも見た目で満足できた方が、モチベーションも高まりますし、デザインは重要ですよね。
手っ取り早くオシャレっぽくするには、画像を設定するのがオススメですし、そのためには「アピールエリア」を活用してみるのが良いと考えています。
ヘッダー背景にも画像を設定できますが、そうすると画像の中に「サイトのタイトル」が自動出力されてしまって、上手く設定できませんでした。
アピールエリアなら、画像そのまま表示できるので見た目的には使いやすいと思います。
ってな感じで、もしよかったら参考にしてみてくださいね。



「Cocoonで画像設定したい」とか、簡単にオシャレにしたい、という方にこの記事をオススメしてくれると嬉しいです~。
では、また!


Cocoonの関連記事 |
---|
Cocoonの評判&レビュー |
Cocoonのインストール |
Cocoonの初期設定 |
【参考】SWELLなら簡単にオシャレにできます
当サイトでは、SWELLという有料WordPressテーマを使用しています。
SWELLは有料テーマでは圧倒的一番人気。
オシャレで使いやすく、開発者の熱意がすさまじく、アップデートも頻繁。そして超高機能なテーマです。
もし有料テーマを導入する予定なら、個人的にはSWELLをおすすめします。



ぶっちゃけ、超絶おすすめです!時短になって生産性も上がりますよ~。
気になる方は、下記より詳細を見てみて下さいね。
\いま大人気のWordPressテーマ/




コメント