Cocoonのアピールエリアのカスタマイズ方法を紹介！【Cocoonでもおしゃれに】

テーマ・デザイン
2023.01.07
  • Cocoonのアピールエリアをおしゃれにしたい
  • 見やすいブログにカスタマイズしたい
  • 読んでもらいたい記事があるのに中々見つけてもらえない

こんな悩みを解決します。

通常のCocoonのアピールエリアはデフォルトでは以下のようになっていますが、正直余白も多くスペースを無駄遣いしています。

あまりスタイリッシュではないですよね。


そこで今回は、Cocoonのアピールエリアを以下のようなデザインにカスタマイズします。

無駄な余白もなくなって、コンパクトになります！

是非、Cocoonを使っているユーザーさんは参考にしてくださいね！

Cocoonアピールエリアのカスタマイズ方法

Cocoonアピールエリアのカスタマイズ方法は以下の通り。

  1. Cocoon設定からアピールエリアタブをクリック
  2. アピールエリア各種設定を入力
  3. テーマファイルエディターからスタイルシートにコードを書きこむ
  4. コードと設定の色をあわせる

順番に説明していきます！

1.Cocoon設定からアピールエリアタブをクリック

まずは、ダッシュボード画面からCocoon設定を開きましょう。


次にアピールエリアタブをクリックします。

2.アピールエリア各種設定を入力

各項目を以下のように設定してください。

  • アピールエリアの表示:フロントページのみ
  • 高さ:800
  • エリア画像:空欄でOK
  • エリア背景色:好きな色を選択（全体の背景色にあわせるのがおすすめ）
  • テキストエリア表示:チェックを入れる
  • タイトル:空欄でOK
  • メッセージ:空欄でOK
  • ボタンメッセージ:好きな言葉を入力
  • ボタンリンク先:読ませたい記事のURLを入力
  • ボタンリンクの開き方:同じタブで開く
  • ボタン色:好きな色を選択

ここで、ボタン色のみ色彩コードをメモしておいてください。後ほど使います。


各種入力が終わったら、【変更をまとめて保存】をクリックします。

3.テーマファイルエディターからスタイルシートにコードを書きこむ

ダッシュボード画面に戻り、外観からテーマファイルエディタをクリック。

すると、以下のようなスタイルシートが出てきます。

スタイルシートにカスタマイズをしていないCocoonの場合、恐らく以下のように35行目から空欄になっていると思います。

スタイルシートにコードを書きこむ際の注意点
  1. 必ず編集前のコードをメモ機能にコピペしておく
  2. 編集するテーマがCocoon Childになっていることを確認する
  3. 既存のコードは消さずにその下から続けてコードを書きこむ（カスタマイズ初期状態のCocoonは35行目から）
マル
マル

スタイルシートのバックアップはメモ機能に必ず編集前とっておきましょう！

万が一の場合、デザインが崩れて戻らなくなる場合があります。


35行目でエンターキーを押し、36行目から以下のコードをコピーしてそのまま貼り付けてください。



/************************************
****　アピールエリア
************************************/
.appeal{
padding:0 0 .1em;
box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1);
}
div#appeal-in.appeal-in.wrap{
padding:0;
min-height:0px;
max-height:30px;
}
.appeal-content{
background-color:#b5b5b5; /*エリア背景色・ボタン色と同じカラーコードを入力*/
margin:auto;
padding:0;
max-width:100%;
opacity:1;
line-height:1.6;
}
a.appeal-button {
color: #fff!important;/*文字色はこちらで変更できます*/
font-size:.85em;
padding:0 23em 0;
margin:0;
max-width:100%;
white-space: nowrap;
box-shadow: none;
}
@media screen and (max-width: 1023px){
a.appeal-button {
padding:0 18em 0 ;
}}
@media screen and (max-width: 834px){
a.appeal-button {
padding:0 13em 0 ;
}
.appeal{
padding:.1em 0 .25em;
}}
@media screen and (max-width: 652px){
a.appeal-button {
padding:0 8em 0 ;
}}
@media screen and (max-width: 500px){
a.appeal-button {
padding:0 6em 0 ;
}}
@media screen and (max-width: 420px){
a.appeal-button {
padding:0 3em 0 ;
}}
.appeal-button:hover {
transform:none;
box-shadow: none;
}

入力が完了したら、【ファイルを更新】をクリックします。

4.コードと設定の色をあわせる

フロントページを確認しにいくと、形はスタイリッシュにカスタマイズされていますが、背景色が統一されておらず、グレーがかかっています。



最後にこのグレーの背景を取り除くために、先ほどスタイルシートに入力したコードの以下の部分を、ここで設定した色彩コードに書き換えます。



僕の場合、色彩コードは#42dfffなので以下のように入力します。



変更が完了したら、【ファイルを更新】をクリックしてフロントページを確認します。

以下のようにグレーの背景が消えていたらカスタマイズ成功です！


Cocoonをカスタマイズしてみよう

今回は、Cocoonアピールエリアのカスタマイズ方法について解説しました。

  1. Cocoon設定からアピールエリアタブをクリック
  2. アピールエリア各種設定を入力
  3. テーマファイルエディターからスタイルシートにコードを書きこむ
  4. コードと設定の色をあわせる

Cocoonはデフォルトこそシンプルなものの、カスタマイズ次第で有料テーマに引けを取らないほどオシャレになります！

是非、あなたのCocoonもカスタマイズしてみてください！

今回は以上です。

最後まで読んでいただきありがとうございました！

マル
マル

今後もCocoonのカスタマイズ方法を随時紹介していきます。

コメント

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