無料WordPressテーマ「Cocoon」最初に見た目をざっとカスタマイズする

WEBサイトイメージ Cocoon

Cocoon設定では各項目ごとにタブ分けされていて、ここからカスタマイズや設定変更できることも多いです。
無料WordPressテーマCocoon最初に見た目をざっとカスタマイズ
初期デフォルトデザインだと他のWEBサイトと被るかもしれませんし、多少は変更しておくと自分のサイトの色が出せる思います。

Cocoonにはマニュアルページが用意されているので読むと色んなカスタマイズ方法が分かります。下記マニュアルを一通り読んでから始めるのもアリかもしれません。

テーマ利用マニュアル | Cocoon
https://wp-cocoon.com/manual/

テーマ「Cocoon」で最初の方に行っておくとよさそうな見た目が変わる設定を管理人の独断でまとめてみました。

スポンサーリンク

最初にしておくとよさそうな「Cocoon」の見た目を変える設定

詳しくは各リンク先のページを読んでください。
※ Cocoon 設定からの変更は「変更をまとめて保存」で変更を保存できます

スキンの変更

ダッシュボード → Cocoon 設定 → スキンのタグを選択 → スキン一覧に色々なデザインがデモと画像付きで用意されていますのでそこから選択してください。
Cocoonで外観を変えるスキン設定

無料WordPressテーマ「Cocoon」で外観を変えるスキンを設定する
無料WordPressテーマ「Cocoon」で外観を変えるスキンを設定する方法

ヘッダーの背景を画像にする

ダッシュボード → Cocoon 設定 → 「ヘッダー」タブを選択 → 「ヘッダー背景画像」 → 「選択」ボタンを → 画像をアップロードし設定
Cocoon:ヘッダー画像を入れる

「Cocoon」ヘッダーのサイト名をロゴ画像に変更する
WordPressテーマ「Cocoon」でヘッダーのサイト名の箇所をロゴ画像に変更する方法

サイトアイコンを設定

外観 → カスタマイズ → サイト基本情報 → サイトアイコン → 画像を選択 → 画像をアップロード → 公開ボタンをクリック
※画像は512×512pxのPNG画像(正方形)を設定することを強く推奨とのこと
CocoonWEBサイトアイコン設定

「Cocoon(コクーン)」でWEBサイトのアイコン(ファビコン、スマホのアイコン等)を設定
無料WordPressテーマ「Cocoon(コクーン)」でWEBサイトのアイコン(ファビコン、スマホのアイコン等)を設定する方法

ヘッダーのロゴを画像に変更する

ダッシュボード → Cocoon設定 → 「ヘッダー」タブを選択 → 「ヘッダーロゴ」 → 「選択」ボタン → 画像をアップロードか選択
「Cocoon」ヘッダーのサイト名をロゴ画像に変更

「Cocoon」ヘッダーのサイト名をロゴ画像に変更する
WordPressテーマ「Cocoon」でヘッダーのサイト名の箇所をロゴ画像に変更する方法

フッターの色を変える

ダッシュボード → Cocoon設定 → 「フッター」タブを選択 → フッター色をカラーチャートから選ぶか、カラーコードを記入
「Cocoon」フッターの色を変える

「Cocoon」フッターの色を変える
WordPressテーマ「Cocoon」でフッターの色を変えて変更する方法

サイトキーカラー(サイトメインとなる色)/ テキストカラーを変える

サイトキーカラー設定はヘッダー背景や見出しなどをいっぺんに変えるWEBサイトイメージカラーのような色設定です。
ダッシュボード → Cocoon設定 → 「全体」タブを選択 → キーカラーのサイトキーカラー色をカラーチャートから選ぶか、カラーコードを記入

「Cocoon」サイトキーカラー(見出し、サイドバーなどサイトメイン色)とテキストカラーを設定
WordPress無料テーマ「Cocoon」でメインの大枠となる色「サイトキーカラー」と「サイトキーテキストカラー」の色を設定する方法と手順

 

他にも色々と簡単に弄れる設定はありますが…凝ったデザインや変更をするのは慣れた人以外は記事をいくつか投稿するのと並行して後々カスタマイズしていく方がいいかもしれません。見た目のカスタマイズはやり出すとキリがないので。

タイトルとURLをコピーしました