WPテーマ「Cocoon」おすすめの設定とカスタマイズまとめ【随時更新】

Cocoonおすすめの設定とカスタマイズまとめ

どうも、おしゃキミ(@Osha_Kimi)です。

ワードプレスでブログを開設してから長らくオリジナルテーマ(といっても継ぎ接ぎサイト)を利用していましたが、「Cocoon」という素晴らしいテーマに乗り換えました。

Cocoonは管理画面でたくさんの設定ができるので大変便利なテーマ。これが無料で配布されているのがいまだに信じられません。

しかしながら設定画面の中から自分がしたいこと見つけるのが難しいものもあったので備忘録として残しておきます。

また様々なサイト運営者様がカスタマイズのコードを掲載してくれているので、私も利用しています。その中でも素敵だったカスタマイズをまとめて紹介します

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

Cocoonの設定画面でできること

目次の上にリンクユニット設置

目次の上にアドセンスのリンクユニット広告を設置したいと以前から思っていて、Cocoonなら「Cocoon設定→広告」で簡単に設定できることがわかりました。

設定すればこんな感じ↓で広告を設置できちゃいます。

Cocoonテーマで目次の上にリンクユニット広告を設置できた

 

目次の上にアドセンスのリンクユニット広告を設置する方法

① Cocoon設定 → 広告タブへ移動

Cocoonテーマで目次の上にリンクユニット広告を設置する

② 広告の表示位置で「本文中」にチェックを入れる

③ 本文中の詳細設定クリック

④ フォーマットを「リンクユニット」に設定

Cocoonテーマで目次の上にリンクユニット広告を設置する

⑤ 同じ画面の「変更を保存」をクリック

 目次の上にリンクユニット広告が表示される!

ってな感じです。買い物しようと街までさんの記事を参考にさせていただきました。ありがとうございます。

子テーマに追加、カスタマイズでできること

目次のデザインを変える

デフォルトのデザインのシンプルさを保ちつつ、おしゃれ風目次にカスタマイズできます。

Cocoonの「目次」デザインをシンプルかつオシャレにCSSカスタマイズする
WordPressの無料テーマ「Cocoon」の目次をシンプルかつおしゃれ風にCSSカスタマイズしました。主に目次の位置を中央寄せ、下線を引く、行間の調整などを行っています。コピペ用のCSSコードもあるので自分好みに調整して利用していただければ!

この記事を書いた人(プロフィール)ボックスのカスタマイズ

LISBLO.さんの素敵なカスタマイズCSSをコピー、ちょこっと改変して利用させていただき、こんな素敵なプロフィールボックスになりました!!

左:ノーマル 右:カスタマイズ後

Cocoonテーマのこの記事を書いた人プロフィールをカスタマイズして変える方法

めっちゃオシャレ感。シンプルなプロフィールボックスが大変身しました。

CSSのコードは下記サイト様をご参照ください。

AMPは表示が崩れるので子テーマのstyle.cssに貼り付けて、背景の写真のURLを追加すればいいだけです。

これ以外にも素敵なカスタマイズがたくさんあるので、おすすめのサイトです!

ちょっとマニアックな設定

特定の記事をJSON-LDで構造化データマークアップ

カスタムJavaScriptでは、JSON-LDマークアップの記述はできなかったのでカスタムフィールドから入力することで対応しました。

詳しくは下の記事で紹介

特定の記事に対してJSON-LDを使って構造化データを記述する方法【Cocoon】