WordPress

WordPress Cocoonのカスタマイズ③【ブログのアピールエリアを設定する】

WordPress Cocoonのカスタマイズをやってみたシリーズ第2弾は【ヘッダーメニュー・アイコンをつける】です。

WordPress Cocoonは完全無料で拡張性が高いのが特徴、ユーザーも多くテーマ利用マニュアルなど、チュートリアルも豊富なので、ボクもずっとこのCocoonを愛用しています。

この記事では、Cocoonをちょっとおしゃれにカスタマイズしたいけど、何から手を付けたら良いか分からない初心者向けの設定方法とビフォー・アフターをご紹介します。

こちらが完成形。

アピールしたい記事URLはもちろん、画像を入れるなど、カスタマイズすることが可能です

設定方法

Cocoon設定>アピールエリアを選択します

アピールエリアの詳細設定をします

アピールエリアの表示 ▶全ページ表示

高さ ▶200

エリア画像 ▶そのまま

エリア背景色 ▶ここでは、#1e73be(カラーコード) と入力

テキストエリア表示 ▶☑テキストメッセージエリアを表示する

タイトル ▶そのまま

メッセージ ▶そのまま

ボタンメッセージ ▶表示したいメッセージを入力します

ボタンリンク先 ▶リンクさせたいURLを入力します

ボタンリンクの開き方 ▶同じタブで開く(_self)

ボタン色 ▶ここでは、#1e73be(カラーコード) と入力

このように設定できたら「変更をまとめて保存」をすれば完成です。

ここからのカスタマイズは、CSSを追加して行うことになります。

実際にコピペして使えるCSSを紹介しているサイトが幾つかあるので、好きなパターンを選んでやってみることをおすすめします。

https://wakuwaku-blog.com/appeal-area/
https://yujiblog.org/wordpress-appeal-area
https://unlimitedchaos.net/wordpress-theme-cocoon-customize-appeal-area-translucent-color-on-background/

💡今日のなるほど

集客できてきたら、アピールエリアをしっかり活用しましょう。

ABOUT ME
神作 英樹
●ウェブ解析士が日々の気付きをまとめています ●世田谷区在住 ●ウェブ解析や健康管理ネタなど ●身銭を切って買ったもの、実際に使ったもの、実際に見たものだけを紹介・我が子が理解できるわかりやすさが当ブログのポリシー

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください