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

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

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

 
グリット
上のような部分ですね。

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

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

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

Ad

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

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

 

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

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

高さの設定は、してもしなくてもどちらでも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>海外旅行・生活・仕事に役に立つ情報を6テーマで発信</strong></h4><!-- /wp:heading --><!-- wp:paragraph --><p><strong>海外好き必見!オーストラリア留学</strong>経験。<strong>アジア各国</strong>で仕事し、現在は<strong>アメリカの首都ワシントンDC在住</strong>の<strong>30代男</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 -->

固定ページをブログのアピールエリアに登録する

固定ページが完成したら、アピールエリアに登録していく必要があります。

外観から、カスタムHTM→コンテンツ上部→ウィジットを追加まで順番にクリックしましょう。

次に、右側にあるコンテンツ上部をクリックして広げましょう。

内容の箇所に先ほどコピーしたコードを貼り付けましょう。タイトルの箇所には何も書く必要はありません。

 
グリット
設定はこれだけです!とても簡単ですね!

コンテンツ上部を選択した場合は、すべてのページで表示されます。

もし特定の記事の上だけで表示させたい場合には、インデックスリスト上部や、固定記事上部などを選ぶようにしましょう。

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

以上、Cocoonを使ってアピールエリアをデザインする方法をご紹介しました。

標準機能のデザインと自作のデザインはそれぞれ違った良さがあると思います。

ご自分のブログのイメージに合った形でアピールエリアを作成してみましょう!

 

記事はいかがでしたか?

読んでいただいた方に関心がありそうな広告が表示されます。

<スポンサーリンク>

最新情報をチェックしよう!
Ad