> 【チート級】ChatGPTでブログ執筆を超効率化へ!10倍速で書く方法
PR

Cocoonヘッダーをカスタマイズ|画像・グローバルナビを設定する方法

Cocoonヘッダーカスタマイズ

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

お悩み人

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

こういった切実な悩みを解決します。

Cocoonはシンプルで、ダサイテーマと言われることがあります。

実際、Cocoonでは着せ替え用の「スキン」が用意されていますが、ヘッダーの見た目はどれもイマイチなんですよね・・・。

でも、ヘッダーに画像を設定すれば、「めっちゃオシャレ!」とは言わないまでも、ダサイと言われないようなトップページにすることが可能です。

ここでは、ヘッダーに画像を設定する方法について解説すると共に、ヘッダー画像とセットになるグローバルナビの設定についても解説していきます。

ぜひ最後まで見て、Cocoonでも割とオシャレなヘッダーをゲットしてみてくださいね。

テーマ名WordPressテーマ「Cocoon」
価格無料
開発者わいひらさん(@MrYhira
推奨環境WordPress5.7.0以上
PHP7以上(5.6でも動作するとは思います)
Google Chrome
Firefox
Microsoft Edge
Safari
見たいところに飛べる目次

Cocoonのヘッダーカスタマイズの例

Cocoonトップページ

上記は、Cocoonでヘッダー画像、グローバルナビを設定したカスタマイズの例です。

Cocoonでは、このようにヘッダーに画像を載せることができます。

画像を設定すると、オシャレな見た目になりますね。

ここでは、下記の3つの項目に分けて解説していきますね。

  • ヘッダー画像の設定
  • グローバルナビの設定
  • タイトル名の設定

では、まいりましょう。

Cocoonのヘッダー画像を設定する方法

アピールエリア画像

では、Cocoonに上記のようなヘッダー画像を設定していきましょう。

具体的な手順は下記の通りです。

STEP
ヘッダー画像を用意する

まずはヘッダーに使う画像を用意しましょう。

僕がオススメするのは「Canva」という画像選定・編集ツールです。

42万点以上のテンプレート「Canva」

Canvaなら画像探しから編集まで、オールインワンで完結できます。

ちなみに、ヘッダーに使う画像サイズは、小さすぎないようにしましょう。ボケてしまいますので。

STEP
Cocoon設定の「アピールエリア」タブをクリック
Cocoon設定アピールエリア
STEP
アピールエリアに表示する画像を選択する
エリア画像
STEP
アピールエリアの高さ(上下の幅)を決める
エリアの高さ
STEP
変更を保存して、ヘッダー画像の設定完了
アピールエリア画像

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

グローバルナビ

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

STEP
「外観」→「メニュー」をクリックする
MENU
STEP
「新しいメニューを作成しましょう」をクリック
メニュー作成
STEP
メニュー名とメニュー位置を設定する

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

グローバルナビ

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

STEP
左側の項目からピックアップして、「メニューに追加」していく
MENUに追加
STEP
設定ができたら「メニューを保存」をクリック
メニューを保存
STEP
Cocoon設定「ヘッダー」で細かい設定を行う
グローバルナビ設定

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

Cocoonヘッダーのタイトルを設定する方法

サイトタイトル

最後に、Cocoonヘッダーに表示するサイトタイトルを設定する方法を解説します。

なお、ここに表示される文字は、WordPress一般設定の「サイトのタイトル」が表示されます。

サイトのタイトル
サイトのタイトル
STEP
Cocoon設定の「ヘッダー」をクリック
ヘッダー
STEP
設定項目で好きなように調整する

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

ヘッダー設定

以上、ここまでに解説してきた3つの項目をうまく設定することで、ヘッダーをオシャレにすることができます。

まとめ|ヘッダーをカスタマイズしてオシャレな見た目をゲットせよ。

と、いうわけで、今回はCocoonのヘッダーカスタマイズ方法を解説してきました。

正直、Cocoonでオシャレなデザインにするのは、中々に骨が折れます。

が、ポイントを押さえて設定すれば、簡単にオシャレっぽい見た目にすることは可能。

ヒナキラ

少しでも見た目で満足できた方が、モチベーションも高まりますし、デザインは重要ですよね。

手っ取り早くオシャレっぽくするには、画像を設定するのがオススメですし、そのためには「アピールエリア」を活用してみるのが良いと考えています。

ヘッダー背景にも画像を設定できますが、そうすると画像の中に「サイトのタイトル」が自動出力されてしまって、上手く設定できませんでした。

アピールエリアなら、画像そのまま表示できるので見た目的には使いやすいと思います。

ってな感じで、もしよかったら参考にしてみてくださいね。

ヒナキラ

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

では、また!

Cocoonの関連記事
Cocoonの評判&レビュー
Cocoonのインストール
Cocoonの初期設定

【参考】SWELLなら簡単にオシャレにできます

当サイトでは、SWELLという有料WordPressテーマを使用しています。

SWELLは有料テーマでは圧倒的一番人気。

オシャレで使いやすく、開発者の熱意がすさまじく、アップデートも頻繁。そして超高機能なテーマです。

もし有料テーマを導入する予定なら、個人的にはSWELLをおすすめします。

ヒナキラ

ぶっちゃけ、超絶おすすめです!時短になって生産性も上がりますよ~。

気になる方は、下記より詳細を見てみて下さいね。

\いま大人気のWordPressテーマ/

SWELLのおすすめ記事
SWELLの評判&レビュー
SWELLのサイト集
SWELLのインストール
SWELLの初期設定
SWELLの使い方
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

見たいところに飛べる目次