当サイト採用!!Cocoonテーマの詳細はコチラ

【Cocoon】初心者でも簡単設定!おすすめのカスタマイズ3選

Cocoonテーマ

無料テーマ「Cocoon」を使用している方、こんなお悩みありませんか?

  1. 他の人とトップページが違う
  2. 色々カスタマイズしたいけど、知識がなくてできない
  3. 独自性のあるサイトにしたい

やはり有料テーマに叶わない部分はありますが、Cocoonでも有料テーマに近づけるカスタマイズが備わっています。

クマさん
クマさん

設定するのって難しいのかな?

キラ
キラ

はじめは混乱するかもしれないけど

わかりやすく解説していくよ

ここで紹介するのはCSSなどの難しい知識は一切必要ないので、初心者の方におすすめです。

この記事でわかること
  1. アピールエリアの機能と手順
  2. おすすめカードの機能と手順
  3. ボックスメニューの機能と手順

では早速みていきましょう。

 

スポンサーリンク

使って欲しいカスタマイズ3選

まずはCocoon使用している方でしたら、ぜひ使って欲しいカスタマイズを紹介します。

おすすめ機能①アピールエリア

赤丸で囲った部分が「アピールエリア」ですが、アピールしたい項目を画像付きで紹介することができます。

メリット
  1. 強調したい記事やサイトをアピールすることができる
  2. トップページの上部に表示されるため、目につきやすい

使い方次第では、ユーザーを誘導することができるのが「アピールエリア」の強みでしょう。

ここでは以下の項目に沿って説明していきます。

設定する項目
  1. アピールエリアの表示
  2. エリア画像
  3. タイトル
  4. メッセージ
  5. ボタンリンク先
  6. ボタン色

では見ていきましょう。

アピールエリア設定までの手順

  • STEP1 設定画面の表示

    「Cocoon設定」から「アピールエリア」をクリックします。

  • STEP2 各項目の設定

    以下のページになりましたら、ぞれぞれの項目を設定していきます。

    ※画像の続きになります

    1.アピールエリアの表示

    どのページまで表示するのか設定することができます。

    1. 全ページで表示
    2. フロントページのみで表示
    3. 投稿・固定ページ以外で表示
    4. 投稿・固定ページのみで表示
    5. 投稿ページのみで表示
    6. 固定ページのみで表示

    上記の選択肢の中から、「アピールエリア」を表示したい範囲を選びましょう。

    2.エリア画像

    WordPress内にアップロードしている画像を選択することができます。

    リンク先の内容に一致する画像にするのが重要です。

    3.タイトル

    このアピールエリアはどんなものなのか、ユーザーにわかるようタイトルを設定しましょう。

    場合によっては設定いなくてもOK!
    4.メッセージ

    リンク先にどんな内容があるのかわかりやすい説明文を記載すると良いです。

    メッセージ欄の例
    1. ブログ始めた方に知って欲しい情報を公開中!
    2. ぜひ見て欲しい記事をピックアップ中!

    タイトルを設定しない場合は、ここにタイトルとして設定する方法もあります。

    5.ボタンリンク先

    投稿記事やおすすめしたいカテゴリーなど、リンク先となるURLを入力してください。

    6.ボタン色

    お好みのカラーを選択しましょう。

    注意

    ボタン内の文字が白色のため濃いめで設定してください

以上6つを設定するだけで簡単に「アピールエリア」を導入することができます。

ぜひユーザーがクリックしたくなるような「アピールエリア」を作ってみてください。

おすすめ機能②おすすめカード

赤丸で囲った部分が「おすすめカード」ですが、こちらも画像付きで記事などを紹介することができます。

複数作成できるのが「アピールエリア」との差別化ポイントです。

注意

パソコン版では横1列、モバイル版では横2列になるので、4つ程度または偶数にするのがおすすめ

おすすめカード設定までの手順

  • STEP1 設定画面の表示

    「外観」から「メニュー」をクリックします。

  • STEP2 メニューの作成

    右上の赤丸で囲った「新しいメニューを作成しましょう」をクリックして新しいメニューを作成します。

    わかりやすく「おすすめカード」にしておくと良いでしょう。

  • STEP3 表示したい項目の選択

    おすすめカードに表示できる項目は以下の5つになります。

    1. 固定ページ
    2. 投稿
    3. カスタムリンク
    4. カテゴリー
    5. タグ

    好きな項目を選んで「メニュー保存」を押してください。

    「メニュー構造」の部分はどこにもチェックしれなくてOKです。

  • STEP4 設置するための設定

    「外観」から「ウィジェット」を選択し、「[C]おすすめカード」という項目があるのでクリックします。

    すると挿入できる一覧が表示されるので、好きな場所を選択して「ウィジェットを追加」をクリックしてください。

    「メニュー名」が先程作った「おすすめカード」が選択されていることを確認します。

  • STEP5 表示スタイルの設定

    画像の上に表示される各項目のタイトルになりますので、画像と合わせて見やすいものを設定してください。

    表示スタイルは青い画像マークにカーソルを合わせると参考画像が表示されます。

  • STEP6 表示したい範囲の設定

    おすすめカードをどのページまで表示するかの設定をします。

    下の方にいくと「Post Types」という項目があるので、表示したくない部分にチェックを入れてください。

    最後に「Save」をクリックして完了です。

以上が作り方の流れになります。

アピールエリアよりも少し複雑かもしれませんが、特に難しいことはないと思いますので、ぜひ参考にしてみてください。

おすすめ機能③ボックスメニュー

赤丸で囲った部分が「ボックスメニュー」ですが、画像を使うことができないのがおすすめカードとの違いになります。

クマさん
クマさん

表示されているマークは何のやつなの?

キラ
キラ

「Font Awesome」といって

ほぼ無料で使えるアイコンみたいなものだね

ボックスメニューの設定手順はおすすめカードと同じですので、ここでは割愛します。

以下ではFont Awesomeの挿入手順について説明していきます。

Font Awesomeの挿入手順

ボックスメニューはいろいろな場面で使えるので大変便利です。

キラ
キラ

私はメニューバーとして使っているよ

また「Font Awesome」も囲み枠のアイコンとしてもよく利用されているので、使い方を知っておくと便利ですね。

 

まとめ

私がおすすめする3つを紹介しましたが、それぞれ使い方次第ではおしゃれなトップページになること間違いなしです。

クマさん
クマさん

テーマに搭載されたものだから

簡単にできるのがおすすめだね

もちろんここでは紹介しなかった「Cocoon」で用意されているカスタマイズはまだあります。

無料テーマとは思えないほど、いろいろな機能が備わっていますので、ぜひチャレンジしてみてくださいね。

Cocoonテーマお役立ち情報
スポンサーリンク
キラをフォローする
キラ

2匹のペットと暮らしております。ペットを飼育する上での必要なものや情報などを発信していきます。またサイトカスタマイズにも挑戦しており、作成方法なども公開しております。
「まずは自分から動いてみる!」そして「自分で調べて身につける!」私のモットーです。

キラをフォローする
キラペット.com
タイトルとURLをコピーしました