Cocoonヘッダー下には「おすすめカード」【キレイな玄関を!】

とち
とち

産経新聞社サンスポ記者として

  • Jリーグ
  • プロ野球
  • オリンピック
    などを担当してきた『とち』(@blue_chikippaa)です。

真面目に、かるくが執筆信条。
現在は独立して、いろいろ書きながら生きてます。

ブログのヘッダー周辺って、まず最初に読者の目に飛び込んでくるもの。

つまり、第一印象です。

やっぱり玄関はキレイにしておいて、「まぁ!素敵なおうち(ブログ)」と言われたい!

Cocoonの「おすすめカード」を使えば、簡単にヘッダー下に画像付きカテゴリーや、見てほしい記事のリンクを作ることができます。

こんな感じのやつ(※20年1月時点の当ブログ)。

スッキリして、いい玄関ですw

追記【20年8月】

現在はこんな感じにモデルチェンジしました、、、飽き性バンザイ^^;

トップページヘッダー画像

※おすすめカードの上に、アピールエリアを配置した構図です。

htmlやcssなどのコードは使わずCocoonなら簡単にできちゃうんで、ぜひやってみてください。

本記事の内容
  • Cocoon「おすすめカード」でカテゴリー設置
  • グローバルメニューの削除
  • トップページヘッダー下のアドセンス広告削除

Cocoonヘッダー下には「おすすめカード」

Cocoonヘッダー下には「おすすめカード」

Cocoon「おすすめカード」のメニュー作成

Cocoon「おすすめカード」を作るには、まず「外観」→「メニュー」を開いて、「新しいメニューを作成しましょう」をクリック。

次にメニュー名に「おすすめカード」と入力し、メニュー作成ボタンを。

編集するメニューを選択→「おすすめカード」に設定して、表示させたい項目を入れていくだけです!

最後に保存を忘れずに!

テーマ製作者のわいひらさんによると、おすすめカードの数は「4つぐらいがちょうど良い。何個でも表示はできるが偶数がおすすめ」とのこと。

なんで4つ?偶数?

とち
とち

おそらくモバイルで不規則になるから!

※僕は2021年3月現在、1つのカードを大きくしたいため、おすすめカードを奇数の3つでやっています。モバイルのおすすめカードは消しています。

Cocoon設定から「おすすめカード」

表示させるものが決まれば、Cocoon設定から「おすすめカード」を選択します。

「おすすめカード」はCocoon設定の、これ!

cocoon設定

設定できるのは

✔どのページで表示させるか

✔表示スタイル(4種類)

おすすめカード1
おすすめカード2
おすすめカード3
おすすめカード4

写真は各カテゴリーでアイキャッチ画像を設定。

✔カード間&左右幅の余白の調整

です。

表示させたい文字は、作ったメニューのカテゴリー▼を開いた先のナビゲーションラベルから設定できます。

テーマ製作者・わいひらさんはCocoon公式サイトで、おすすめカードに関して「まだβ版機能なので、スタイルの変更があったり、新たにデザインが追加されるかもしれません」と言っています。楽しみ!

Cocoonの「おすすめカード」があればいらない

Cocoonの「おすすめカード」があればいらない

Cocoonおすすめカードがグローバルメニューとかぶった

当ブログは今回、「おすすめカード」の設定をカテゴリーのリンクにしたんでグローバルメニューがほぼカブるなと。

なので、ポイッとします。

とち
とち

グローバルメニューは設置しつつ、「おすすめカード」で個別の記事を紹介するのもオススメ!

とち
とち

あっ、このオススメは、「おすすめカード」のおすすめとは違ったオススメで…って、このテーマ書くときに「オススメ」はNGワードやな。

Cocoonトップページのアドセンス広告も

だいぶスッキリしたんで、ついでにトップページのヘッダー下にドンと居座るアドセンス広告もポイっとします。

これ!

アドセンス広告

バカでかいだけでノン収益…

来てくれたお客さん(読者)に、いきなり玄関でタンスを売りつけるようなもん。

誰も買わんわな。

Cocoonトップページのアドセンス広告消すには

実は以前、ヘッダー下のアドセンス広告を削除しようとして、固定ページの「広告を除外する」にチェックしていたんですが、消えませんでした。

ただ、Googleアドセンスの審査用コードを貼ったままにしていただけのこと…。

当ブログでは、「Head、Footer and Post Injections」というプラグインでコードを貼っていましたが、これを消去すると

Googleアドセンス広告削除

完成です!!
いい玄関になりましたか?

お疲れさまでした^_^

Googleアドセンスの審査用コードは「貼ったままで問題ない」といった意見もありますが、はがしておいた方が後々操作しやすいです。

アフィリエイトおすすめASPの記事にとびます。

Cocoon「おすすめカード」を自作しようとしていた

Cocoon「おすすめカード」を自作しようとしていた

実はCocoonの「おすすめカード」が実装されたのに気づかず、ヘッダー下の画像付きリンクはコードで作ろうと考えていました。

そこに、こんなパッとできるウィジェットを作ってくれるんだから、やっぱり、わいひらさん、すごい!

圧倒的感謝m(__)m

コード見るだけで白目むくって人は

できない…。
コードってのを見るだけで頭痛がするんだよ。

Cocoonはユーザーが育てるテーマです。
思い通りに設計するには多少のプログラミング知識が必要になります。

僕から対応策を提案するなら、こちらのいずれか。
①カスタマイズが容易な有料テーマを選ぶ
②プログラミングを学ぶ

もちろん①が簡単ですが、プログラミングがわかるとCocoonは100倍楽しい。
どうせなら②の「学び」に投資した方がいいですよね?

※なんと0円プログラミングスクールがあります。
TechAcademyは1週間の無料体験があります。
無料体験カリキュラムでは『天気予報アプリ』の作成を通じてWebアプリケーションの基礎が学べます。
無料なのでとりあえず試してみるのが良いかなと思います。
»TechAcademyの無料体験はこちら

Cocoonヘッダー下には「おすすめカード」:まとめ

Cocoonヘッダー下には「おすすめカード」:まとめ

『こんなのが欲しいな』と思ってたら出てくるんだから、わいひらさんは、もはやドラエもんですね。

のび太も頑張ります。

今回はこの辺で!

アフィリエイトおすすめASP記事へとびます
当ブログで叶えられるCocoonユーザーの願い
【Cocoonカスタマイズ編】
【Cocoonカスタマイズ以外】

Cocoon
スポンサーリンク
この記事を書いた人
とち

★2020年産経新聞社を退職→Web制作・マーケティング会社を設立
★ブログ、デザイン、スポーツ(サッカー&NBA)を愛する39歳。
★いろいろ書きながら、やんちゃ息子2人と陸ガメと鬼嫁と京都に生息中。
★副業を推奨するファイナンシャル・プランナー(FP2級技能士)でもあります。

「良い記事」と思ったら拡散を!
副業・会社脱出ガイドtochiblog〜元スポ新聞記者の編集室〜

ご意見ご感想ぜひ!

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