詳しいプロフィールはこちら>>>

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

某全国紙新聞社でスポーツ記者として、オリンピックやプロ野球、Jリーグなどを担当してきた、とちです。真面目にかるく、わかりやすくが執筆信条。現在は編集者として、日々のスポーツ紙の制作をしています。

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

つまり、第一印象です。

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

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

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

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

その後また変えました…飽き性バンザイ^^;

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

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

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

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

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

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

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

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

最後に保存を忘れずに!

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

なんで4つ?偶数?

とち
とち

知らん!わいひらさんの言うことを信じるのみ。たぶん…モバイルで不規則になる関係。

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

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

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

設定できるのは

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

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

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

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

です。

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

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

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

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

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

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

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

とち
とち

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

とち
とち

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

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

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

これ!

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

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

誰も買わんわな。

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

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

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

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

完成です!!

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

カテゴリーの中の個別記事を、トップページで表示するにはこちらの記事を参考に。

>>>Cocoonトップページのカスタマイズ【3ステップでサイト型】

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

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

Cocoonに「おすすめカード」があるのを知らず

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

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

圧倒的感謝m(__)m

とち
とち

僕は本記事を書いたあとHTML・CSSの勉強を重ねました。プログラミングが分かると、Cocoonのような育成型テーマは100倍楽しくなりますよ(^o^)

コロナの影響で学び方も変わりました。プログラミング学習もオンラインの時代ですね。TechAcademy [テックアカデミー]ならHTML・CSSはじめ、すべてオンラインで学習できます。

ちなみに僕はHTML&CSSを独学でやりましたが、1万回絶望しました(*_*)
このオンライン時代の波に乗る方が賢明かなと思います。

WordPress有料テーマなら

Cocoonはカスタマイズ性に優れますが、シンプルゆえに、デザインをいろいろイジくりたくなります。

デザインに気をとられて「肝心の記事は?」なんてことは、ブロガーあるあるなんで、そういった方は最初からWordPress有料テーマでやっちゃった方がいいです。

おすすめのWordPress有料テーマは、下記の記事で紹介してます。

参考 WordPressおすすめ有料テーマ

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

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

いや、ほんとCocoon楽しいですw

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

のび太も頑張ります。

今回はこの辺で👋

人気記事【2020年最新】アフィリエイトASPおすすめ7社【悩み無用】

人気記事 DAZN(ダゾーン)の登録・契約方法を解説【プレーボール1分前で間に合う】

コメント待ってます!

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