【備忘録】Cocoon 設定

自分用 Cocoon 設定方法

自分用 Cocoon 設定方法

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

ゴミを吸い取るサイトのワードプレスのテーマを「カエテン」から「Cocoon」に鞍替。いずれ穴を開けるサイトのテーマーも変更したいと考えているので、設定するところを備忘録として記しておきたい。テーマ変更後の設定もスムーズに行えたので、もっと早く変更しておくべきだったと後悔。

ちなみにダッシュボードのメニューにある［Cocoon設定］で、おおかたいじれるからすごく使い勝手はよかった。また、同テーマーを使用しているユーザーも多いうえ、ネット上にフォーラムが公開されているため、問題が発生したときはぐぐれば解決するのも高ポイントだった。

アドセンスの設定

まずは所詮は世の中金なので、迷わず最初にアドセンスの設定を行うまき。時間食いそうだったが［Cocoon設定］→［広告］でアドセンスのIDをコピペするだけで完了。あとは、広告を表示させたい場所にチェックいれたり、広告の種類を選ぶだけなので、ウィジェットをいじる必要もなくスムーズに終わり目から涙が。

広告（AdSense）を手っ取り早く設定する方法

Cocoonテーマ利用時における、最も簡単なAdSense広告設定方法の紹介です。

アナリティクス

［Cocoon設定］→［アクセス解析］でアナリティクスのトラッキングIDをコピペするだけでおわり。

ページが存在しません | Cocoon

WordPress無料テーマ

サチコ

アナリティクス設定のついでにサチコとの紐付けも、［Cocoon設定］→［アクセス解析］からID登録するだけ。

Google Search Consoleに登録する方法

Google Search Console用のサイト認証タグを表示させてサイト登録を行う方法です。

スキンの変更

Cocoonにはあらかじめ素敵なスキンが複数用意されており、センスのかけらのないわしでもさくっといい感じに模様替えできた。［Cocoon設定］→［スキン］から選択可。

Cocoonスキンの機能の仕様

Cocoonのスキン機能に関する詳細な仕様書です。スキン機能を利用すれば、洋服を着替える感覚でサイトデザインを変更することが可能です。

テーブルのレスポンシブ

わしのサイトはワイドなテーブルを多用しているから、［Cocoon設定］→［本文］→［レスポンシブテーブル］の「横幅の広いテーブルは横スクロール」を有効にしてテーブルをレスポンシブ化。さらに、流行りの「横スクロール表示」がされるという嬉しいメリットも。CSSをいじらずにレスポンシブ化できて感動した。

テーブルをレスポンシブ対応の横スクロール方式にする方法

横スクロール表示対応のレスポンスでテーブル設定方法です。

目次プラグイン（Table of Contents Plus）の停止

CocoonはCocoon設定から目次表示の有無を選択できるから、以前のテーマのときに使用していた目次を表示させるプラグイン（Table of Contents Plus）を停止させた。

目次の位置を好きな場所に

始めてフォーラム利用させていただきます。トピック間違いなどありましたら大変申し訳ございません。目次の位置を自由に選ぶことは現状できないのでしょうか？現状、最初のh2の上に表示されるようですが、h2を使わないページもありますし、毎回必ずしもそこに表示したいわけではないので記事により場所を選べたらなと思...

囲み枠に使ってた（class名）をSearch Regexで置換

以前のテーマで使用していた囲み枠のclass名と、Cocoonの囲み枠のclass名を「Search Regex」で置換する必要があった。

こういうBOXです

こんなやつです

わたしです

ぼくです

拡張スタイル「アイコンボックス」と「案内ボックス」の表示サンプル。

Cocoonにデフォルトで用意されているボックスタイプの拡張スタイルの使い方と、サンプルコードです。

Cocoon Blocksの現在の対応状況

Cocoon Blocksが対応している旧ビジュアルエディタースタイルを紹介しています。

ファビコン

テーマを変更するとファビコンが卵のアイコンに戻ったから、［外観］→［カスタマイズ］→［サイト基本情報］から、ファビコンのアイコン設定を行う必要があった。そして、以前ファビコンを表示させるために使用していたプラグインは削除した。

サイトアイコンを設定する方法（ファビコン、アップルタッチアイコン等の設定）

テーマ用のファビコン、アップルタッチアイコン、マイクロソフトメトロスタイルの、タイル表示に使用するアイコンの設定です。

Cocoonに変えてからYoutubeが再生されなくなった！？

Cocoonのテーマに変更してから、Youtubeの動画が再生されない不具合が発生した。具体的には再生ボタンを押すと動画の部分が真っ白になり空白ができるのだ。CocoonにはYouTube埋め込みの高速化機能があるようだから、競合していると考えられる［Youtube SpeedLoad］のプラグインを停止or削除すれば解決すると思ったが、再生できないままだった。ぐぐっても解決せずはじめましてつまづく。

しかし、［Youtube SpeedLoad］を削除したときに、過去に貼り付けたYoutubeは再生されないものの、新しい記事に貼り付けたYoutubeのURLは再生できたため、削除した［Youtube SpeedLoad］のプラグインを入れ直して［Youtube SpeedLoad］の設定画面にある「Clear oembed cache」にチェックを入れて埋め込み動画のキャッシュをクリア。その後［Youtube SpeedLoad］を停止すると、過去の動画も再生できるようになった。