- Cocoonのアピールエリアをおしゃれにしたい
- 見やすいブログにカスタマイズしたい
- 読んでもらいたい記事があるのに中々見つけてもらえない
こんな悩みを解決します。
通常のCocoonのアピールエリアはデフォルトでは以下のようになっていますが、正直余白も多くスペースを無駄遣いしています。
![](https://i0.wp.com/manatoblog.net/wp-content/uploads/2023/01/image-20.png?resize=1024%2C528&ssl=1)
あまりスタイリッシュではないですよね。
そこで今回は、Cocoonのアピールエリアを以下のようなデザインにカスタマイズします。
![](https://i0.wp.com/manatoblog.net/wp-content/uploads/2023/01/image-19.png?resize=834%2C379&ssl=1)
無駄な余白もなくなって、コンパクトになります!
是非、Cocoonを使っているユーザーさんは参考にしてくださいね!
Cocoonアピールエリアのカスタマイズ方法
Cocoonアピールエリアのカスタマイズ方法は以下の通り。
- Cocoon設定からアピールエリアタブをクリック
- アピールエリア各種設定を入力
- テーマファイルエディターからスタイルシートにコードを書きこむ
- コードと設定の色をあわせる
順番に説明していきます!
1.Cocoon設定からアピールエリアタブをクリック
まずは、ダッシュボード画面からCocoon設定を開きましょう。
![](https://i0.wp.com/manatoblog.net/wp-content/uploads/2023/01/image-21.png?resize=888%2C556&ssl=1)
次にアピールエリアタブをクリックします。
![](https://i0.wp.com/manatoblog.net/wp-content/uploads/2023/01/image-22.png?resize=637%2C340&ssl=1)
2.アピールエリア各種設定を入力
各項目を以下のように設定してください。
- アピールエリアの表示:フロントページのみ
- 高さ:800
- エリア画像:空欄でOK
- エリア背景色:好きな色を選択(全体の背景色にあわせるのがおすすめ)
- テキストエリア表示:チェックを入れる
- タイトル:空欄でOK
- メッセージ:空欄でOK
- ボタンメッセージ:好きな言葉を入力
- ボタンリンク先:読ませたい記事のURLを入力
- ボタンリンクの開き方:同じタブで開く
- ボタン色:好きな色を選択
ここで、ボタン色のみ色彩コードをメモしておいてください。後ほど使います。
![](https://i0.wp.com/manatoblog.net/wp-content/uploads/2023/01/image-25.png?resize=840%2C459&ssl=1)
各種入力が終わったら、【変更をまとめて保存】をクリックします。
3.テーマファイルエディターからスタイルシートにコードを書きこむ
ダッシュボード画面に戻り、外観からテーマファイルエディタをクリック。
すると、以下のようなスタイルシートが出てきます。
![](https://i0.wp.com/manatoblog.net/wp-content/uploads/2023/01/image-23.png?resize=1024%2C600&ssl=1)
スタイルシートにカスタマイズをしていないCocoonの場合、恐らく以下のように35行目から空欄になっていると思います。
![](https://i0.wp.com/manatoblog.net/wp-content/uploads/2023/01/image-24.png?resize=1024%2C544&ssl=1)
- 必ず編集前のコードをメモ機能にコピペしておく
- 編集するテーマがCocoon Childになっていることを確認する
- 既存のコードは消さずにその下から続けてコードを書きこむ(カスタマイズ初期状態のCocoonは35行目から)
![マル](https://i0.wp.com/manatoblog.net/wp-content/uploads/2022/12/まなとアイコン.png?w=1256&ssl=1)
スタイルシートのバックアップはメモ機能に必ず編集前とっておきましょう!
万が一の場合、デザインが崩れて戻らなくなる場合があります。
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.コードと設定の色をあわせる
フロントページを確認しにいくと、形はスタイリッシュにカスタマイズされていますが、背景色が統一されておらず、グレーがかかっています。
![](https://i0.wp.com/manatoblog.net/wp-content/uploads/2023/01/image-26.png?resize=840%2C550&ssl=1)
最後にこのグレーの背景を取り除くために、先ほどスタイルシートに入力したコードの以下の部分を、ここで設定した色彩コードに書き換えます。
![](https://i0.wp.com/manatoblog.net/wp-content/uploads/2023/01/image-27.png?resize=1024%2C503&ssl=1)
僕の場合、色彩コードは#42dfffなので以下のように入力します。
![](https://i0.wp.com/manatoblog.net/wp-content/uploads/2023/01/image-28.png?resize=837%2C454&ssl=1)
変更が完了したら、【ファイルを更新】をクリックしてフロントページを確認します。
以下のようにグレーの背景が消えていたらカスタマイズ成功です!
![](https://i0.wp.com/manatoblog.net/wp-content/uploads/2023/01/image-29.png?resize=834%2C379&ssl=1)
Cocoonをカスタマイズしてみよう
今回は、Cocoonアピールエリアのカスタマイズ方法について解説しました。
- Cocoon設定からアピールエリアタブをクリック
- アピールエリア各種設定を入力
- テーマファイルエディターからスタイルシートにコードを書きこむ
- コードと設定の色をあわせる
Cocoonはデフォルトこそシンプルなものの、カスタマイズ次第で有料テーマに引けを取らないほどオシャレになります!
是非、あなたのCocoonもカスタマイズしてみてください!
今回は以上です。
最後まで読んでいただきありがとうございました!
![マル](https://i0.wp.com/manatoblog.net/wp-content/uploads/2022/12/まなとアイコン.png?w=1256&ssl=1)
今後もCocoonのカスタマイズ方法を随時紹介していきます。
コメント