Cocoonアピールエリアを自作する【HTMLテンプレート付き】

2021年6月29日
ブログ

ブログ

ワードプレスの無料テーマCocoonを使ったブログでのトップページデザインもついに４回目になりました。

今回は、アピールエリアと呼ばれるエリアについてご説明します。

グリット

上のような部分ですね。

ここは、Cocoonの機能を使うことで自動的に作ることもできます。

しかし、独自性を出すために、わたしは独自にデザインしたアピールエリアを使用しています。

この記事では両方ともやり方を紹介していきたます。

1 Cocoonの標準機能を使ってアピールエリアをデザインする
2 Cocoonのアピールエリアを自作する方法【テンプレート付き】
- 2.1 固定ページでアピールエリアを作成する
- 2.2 固定ページをブログのアピールエリアに登録する
3 Cocoonアピールエリアを自作する【テンプレート付き】

Cocoonの標準機能を使ってアピールエリアをデザインする

標準機能を使ってアピールエリアを編集するには、Cocoon設定から、アピールエリアを選択しましょう。

具体的な設定も１分かからず終わります。

まず、アピールエリアの表示の箇所で、アピールエリアを表示するか、表示する場合はどのページで表示するかを選択します。

高さの設定は、してもしなくてもどちらでもOKです。

エリア画像に、アピールエリアに配置したい画像を選びましょう。

続いて、タイトル・ボタンメッセージ・ボタンリンク先・ボタンの開き方・ボタン色を設定します。

上記の設定とした場合、次の画像のように見えます。

これでもデザイン的にはかなり素敵ですよね！

ただ、写真を背景にその前にタイトルと説明、ボタンを置くという以外のデザインは、標準機能では作ることができません。

そこで、わたしが独自にデザインした方法をご紹介したいと思います。

Cocoonのアピールエリアを自作する方法【テンプレート付き】

固定ページでアピールエリアを作成する

グリット

アピールエリアを自作するには、固定ページを作る必要があります。

固定ページを新規作成したら、コードエディターを選択しましょう。

コードエディターのモードで、下のコードをコピペしたら、左側に画像・右に説明・右下にボタンの設定が出来上がります。

コピペしたらコードエディターの上にある、ビジュアルエディターを選択してみてください。

そこで、画像や文字、リンクなどをご自分のプロフィールやサイトに合わせて修正するだけで、簡単にオリジナルなトップページが作成できます。

自分の好きなデザインが完成したら、最後に再びコードエディターを選択して、すべてのコードをコピーしておきましょう（後ほど使います）。

<!-- wp:cocoon-blocks/column-2 --><div class="wp-block-cocoon-blocks-column-2 column-wrap column-2 column-2-2-1-1 layout-box"><!-- wp:cocoon-blocks/column-left --><div class="wp-block-cocoon-blocks-column-left column-left"><!-- wp:image {"id":1157,"align":"center","linkDestination":"custom"} --><div class="wp-block-image"><figure class="aligncenter"><a href="https://www.global-lifetips.com/about/" target="_blank" rel="noreferrer noopener"><img src="https://www.global-lifetips.com/wp-content/uploads/2019/05/Sekaiki.jpg" alt="" class="wp-image-1157"/></a></figure></div><!-- /wp:image --></div><!-- /wp:cocoon-blocks/column-left --><!-- wp:cocoon-blocks/column-right --><div class="wp-block-cocoon-blocks-column-right column-right"><!-- wp:heading {"level":4} --><h4><strong>海外旅行・生活・仕事に役に立つ情報を６テーマで発信</strong></h4><!-- /wp:heading --><!-- wp:paragraph --><p><strong>海外好き必見！オーストラリア留学</strong>経験。<strong>アジア各国</strong>で仕事し、現在は<strong>アメリカの首都ワシントンDC在住</strong>の<strong>３０代男</strong>が<strong>おすすめ情報</strong>を紹介！</p><!-- /wp:paragraph --><!-- wp:list {"ordered":true} --><ol><li> <strong>世界のニュース</strong>：日本語で話題のニュースを</li><li> <strong>英語ラボ</strong>：海外留学・就職・移住向けTOEIC・TOEFL</li><li><strong>海外生活の知恵</strong>：アメリカ・DC・ライフハック情報</li><li> <strong>海外資産運用：</strong>米国株投資・ロボアド・仮想通貨・口座 </li><li><strong>海外旅行ハック</strong>：マイル・飛行機・荷物</li><li><strong>ブログ研究</strong>：デザインx収益化</li></ol><!-- /wp:list --><!-- wp:cocoon-blocks/button-1 {"content":"詳細のプロフィールはこちら","url":"https://www.global-lifetips.com/about/","color":"#ffc107","align":"center"} --><div class="wp-block-cocoon-blocks-button-1 aligncenter button-block"><a href="https://www.global-lifetips.com/about/" class="btn btn-amber" target="_self">詳細のプロフィールはこちら</a></div><!-- /wp:cocoon-blocks/button-1 --><!-- wp:paragraph --><p></p><!-- /wp:paragraph --></div><!-- /wp:cocoon-blocks/column-right --></div><!-- /wp:cocoon-blocks/column-2 -->