【Cocoon】　Simplicityから変更後にやったこと

気づけば・・・

Cocoonの設定を触っている

Cocoonは素晴らしい、テーマです

 

しかし、テーマ変更は時間がかかることは事実です

出きるだけ、早く済ませたい

【Cocoonに変更】最低限やるべき８つのこと

 

「Simplicity」から「Cocoon」にテーマ変更した後に、真っ先にしなくてはいけないことが、８個ぐらいあります。

 

1. GoogleアナリティクスのIDを入力
2. GoogleサーチコンソールのIDを入力
3. Simplicityの設定を引き継ぐ
4. SSL化していたら、内部URLをSSL化（簡易版）にチェックを入れる
5. ヘッダー画像やロゴ画像を変更（初期はCocoon画像です）
6. Googleアドセンスをしているなら、アドセンス入力をする
7. 目次用プラグインを使っていたら停止する（ダブります）
8. SNSの設定（ツイッターやFacebook、はてぶ等）

 

サイトスピード　　高速化

Cocoonに変更した目的は、表示スピードの高速化です。

何もしなくても速くなっていますが、少しでも早くしたい。

 

高速設定　　　5項目を有効化しました

1. ブラウザキャッシュの有効化（ブラウザにリソースを保存する）
2. HTMLを縮小化する（HTMLのサイズを減らす）
3. CSSを縮小化する（CSSのサイズを減らす）
4. JavaScriptを縮小化する（JavaScriptのサイズを減らす）
5. Lazy Loadを有効にする
6. 変更を保存

※５、プラグイン 「Lazy Load」は削除していましたので、再度インストールしました

 

 

プラグイン削除　　　　　５つ削除しました

1. TinyMCE Advanced
2. Master Post Advert
3. Auto Post Thumbnail
4. WordPress　Popular Posts
5. Google Analytics for WordPress by MonsterInsights

以上の４つは不必要なはずなので、まずは停止しました。

その後、目に見える不具合が無ければ削除の予定です。

※Cocoonでは、「表を作る」は標準装備でなかったので「TinyMCE Advanced」復活です。

 

 

 

もう1つ、「トップに戻る」プラグインも外しました。

※Cocoonのプラグインについては下記のページに詳細を書きました

 

 

「そして贅沢だけど、もう少し高速化したい」
後日に回しました

 

 

 

WordPress　Popular Postsは、やっぱりいります。
Cocoonでは、プラグインを使わない方法があるらしいが、それはまた後にします。
かわりに「人気記事」をウィジェットでいれました。

 

 

1４～29　だったサイトスピードが、66まであがりました。

変更してよかった。

 

余談です　　　　フキダシを始めて入れてみた

いままで使ったことがなかったが、フキダシというものを始めて使いました。

Cocoonなら簡単です。

※画像なので遅くなると嫌なので、多様はしませんが、読み手には優しいかも？

 

「全体」　　ブログ全体の設定

「全体」タブでは、ブログ全体に影響を及ぼす設定を行うことができます。

キーカラー

まず行いたいのは「キーカラー」の設定。

キーカラーひとつでブログ全体の印象が、かわってしまいます。

淡いブルー系にしたいが、しばらくはデフォルト。

 

色の指定はカラーコードというすこし特殊な記法で行います。
#で始まり、RGB各色の度合いを2桁ずつ00～FFの2桁の16進数で指定するのです。
真っ赤(Red)だったら#FF0000、真緑(Green)だったら#00FF00、
真っ青(Blue)だったら#0000FFという感じです。

 

 

日付フォーマット　　　  　y/m/d

「全体」メニューから行うことができます。

デフォルトは、y/m/dです。

これもしばらくは、デフォルトのまま。

 

 

「ヘッダー」　　ブログ上部（ロゴ・メニュー）の設定

 

「ヘッダー」タブでは、ブログ上部の見た目を設定することができます。

ヘッダーレイアウト　　　　センター

「ヘッダーレイアウト」はデフォルトではセンターです。

 

 

グローバルメニューの注意点　　　　唯一少しややこしかった

グローバルメニューが増えてくると、ＰＣでは横一列表示になっていても、タブレットでは二列表示になっている場合があります。

そんな時は、トップメニュー幅で調整です。

 

 

「スキン」　　ブログ全体のデザインを手軽に変更

「スキン」タブでは、有志が作成したスキンを使ってブログ全体のデザインを手軽に変更することができます。

スッキリした感じのスキンを使いたいが、こちらも後日に。

 

 

「広告」　　アドセンスの表示設定

 

Cocoonは「広告」設定の自由度が魅力です

 

「広告コード」欄にGoogle AdSenseのHTMLタグを貼り付けてしまえば、あとは「広告の表示位置」でチェックをつけた部分に広告を表示してくれます。

 

収益を加速すると話題の「自動広告」もチェックひとつで表示してくれます。

 

オススメの「広告の表示位置」設定

「これが正解」、というものはありませんが、参考までに管理人１の設定を・・・

 

広告設定

広告の表示：全ての広告を表示

広告ラベル：スポンサーリンク

 

アドセンス設定

アドセンス広告の表示

：全てのアドセンス広告を表示

 

広告コード

：レスポンシブル広告のコードを貼り付け

 

アドセンス表示方式

：自動広告とマニュアル広告を併用

 

広告の表示位置

：インデックスページ～トップ、ボトム

：サイドバー　　　　～サイドバートップ

：投稿、固定ページ　～本文中、関連記事下

 

 

投稿ページと固定ページの「本文中」が、けっこうクリックされているはずです。

目次のすぐ上にあります。

出口としてのアドセンス広告という考えです。

 

 

、収益率の高い特化型ブログを扱っているのも理由ですが、
極少PVのわりには、アドセンス収益は多いほうだと思います

スポンサーリンク

ショートコード　も便利です

 

 

広告除外設定

「広告除外設定」は、アドセンス表示に適しないページ（アダルトや酒・煙草・ギャンブルなど）や、ASP商材を売りたいページなどで使えばいいはずです。（投稿ページからの個別指定も可能です）。

 

今のところ、使う必要が無いので利用はしていません。

 

「タイトル」　　ページ種別のタイトル・メタ設定

「タイトル」タブではページの種類別にタイトル（titleタグ内）、メタ（metaタグ内）の設定ができます。

この設定は検索結果ではじめに目に触れる部分の設定なのでこだわりたいところです。

基本的にはデフォルト設定で問題ないはずです。

 

「SEO」　　SEO関連の詳細設定

「SEO」タブ内の設定は上級者向けになっています。

デフォルト設定で問題なしです。

 

 

「OGP」　　SNSシェア時に表示されるOGPの設定

「OGP」とは、TwitterやFacebook、LINEなどといったSNSに記事がシェアされた場合にURLと併せて表示されるページの情報のことです。

 

Twitterカード設定

特に拡散力の強いTwitterでは、OGPを上手に設定したい。

「このサイト」も「あのサイト」も、検索導入以外は「Twitterから」がほとんどです。

 

「Twitterカードタイプ」の項目では「大きな画像のサマリー（summary_large_image）」を選んでいます。

 

Twitterでシェアされた際のプレビューは、
Card validatorにページURLを入力することで
確認することができます。

 

 

ホームイメージ

ホームイメージは、トップページのアイキャッチ設定。

トップページがシェアされることはあまりないかもしれませんが、適当に設定しておきました。

きれいな女性の写真を設定しました。

 

 

設定方法

1. Cocoon設定
2. OGPタグ
3. ホームイメージ（下の方です）
4. 選択

 

お勧めは、縦横比→４対３ ぐらいです。

 

※デフォルトだとCocoonのアイキャッチ画像ですので、設定しない場合も「クリア」がお勧めです

 

 

 

「インデックス」　　インデックスリストの表示設定

「インデックス」タブでは、インデックスリストの表示設定が可能です。

カードタイプがお勧めです。

 

 

「投稿」　　　投稿ページの表示設定

「投稿」タブでは投稿ページの表示設定が可能です。

関連記事設定

投稿下部の「関連記事設定」は、重要です。

回遊率がここで決まると言ってもいいぐらいです。

「数打ちゃ当る」の精神です。

 

ページ送りナビ設定

ページ送りナビゲーションの表示設定ができます。

ここはデフォルト以外を使いました。

 

「表示タイプ」はデフォルトでは場所を取ってしまいますので、
「サムネイル正方形」がお勧めです。

 

パンくずリスト設定

パンくずリストは、ページの現在位置をしめすものです。

 

配置はデフォルトでは、「メインカラムボトム」でしたが、変更しました。

「メインカラムトップ」が、なんとなく落ち着きます。

 

 

 

「固定ページ」　　　　固定ページの表示設定

こちらは固定ページの表示設定が可能です。

こちらも基本はデフォルトですが・・・

「パンくずリスト」の配置を、「メインカラムトップ」にしました。

 

 

「本文」：本文部分の設定

この「本文」タブでは、リンクの表示設定やテーブル表示設定などができます。

外部リンクに関しては「新しいタブで開く」、「アイコン表示」がお勧めです。

内部リンクは、「今のタブで開く」、「アイコン表示」にしてみました。

 

 

「目次」　　　　　TOCライクな目次設定

TOCプラグインを使わないといけなかった目次も、簡単に表示させることができます。

そうです、Cocoonは本当にユーザー目線で作られています。

設定はデフォルトです。

 

 

下記を少し期待しています↓

もしかしたら、プラグインを外したので、AMPと表示できないという
「AMPエラー」が、出ないかも？

 

 

 

「SNSシェア」　　　　　SNSシェアボタン設定

特にこだわりはないので、もちろんデフォルトで・・・

 

時間がある時に２つ削って、「Twitter」「Facebook」「はてなブックマーク」「LINE」の4種類にしようかな、と思ってはいます。

基本的にサイトスピード重視ですので、省けるものは削りたい。

 

 

 

 

「SNSフォロー」　　　　フォローボタン表示設定

こちらもデフォルトのまま。

 

Cocoonが凄いところが、このSNSフォローボタンのリンク先をアカウントのプロフィール設定から指定できること。

複数人でブログを運営している場合に特に役に立ちます。

 

 

「画像」　　　　　本文画像の表示設定

基本的にはデフォルトですが、少し触りました。

 

当サイトでは「アイキャッチラベルを表示する」と「アイキャッチの中央寄せ」にチェックを入れています。

 

 

「画像の拡大効果」でLightbox設定が簡単にできるのも魅力的。

当サイトでは「baguetteBox（スマホ向け）」を使用しています。

 

 

「ブログカード」ブログカード表示設定

Cocoonでは、投稿本文に直接URLを書き込むことで「ブログカード」に自動変換してくれます。

こちらは、デフォルト設定で。

「コード」　　　　ソースコード表示設定

よく解からないので、デフォルトで。

 

 

「コメント」　　　コメント設定

「コメント」はスパムが多いので、非表示にしています。

 

 

「通知」＆「アピールエリア」＆「カルーセル」

サイト上部に、「イチオシのページ」へのユニークなリンクを貼ることができます。

こちらもデフォルトのままです。

 

 

「フッター」　　　フッター部分の表示設定

フッター（footer）とは、サイト最下部のこと。

こちらは、以前からプロフィールや免責事項等のあまり目だたたせたくないものを、「フッターメニュー」として入れています。

フッターにメニューを表示させたい場合

1. 「外観」
2. 「メニュー」
3. 「メニューの位置」
4. 「フッターナビ」

 

他にも「お問い合わせページ」や「プライバシーポリシー」へのリンクを置くのがお勧めです。

 

 

「ボタン」　　　トップに戻るボタン設定

デフォルトで・・・

と言うか、また１つプラグインを省けるかも・・・

 

「Smooth Scroll Up」を停止しました。

 

 

「モバイル」　　　モバイル表示時のボタン設定

デフォルトでは「スライドインボタン」です。

デフォルトのままで。

 

「404」　　　　404ページ設定

サイト内でリンク切れがあった際に表示されるのが、この404エラーページ。

 

404 が出るのは仕方がないが、できるだけ別のページも見て欲しい。

以前作成しましたが、画像が消えていたので、画像を入れました。

 

 

「AMP」            AMP設定

Googleが開発したモバイル高速表示のための機能が、この「AMP（アンプ）」。

SEOにも影響があるとのことで、デフォルトでAMPに対応してくれるCocoonは素晴らしい。

 

しかし、「AMPエラー」が大量に出ると、本当に大変です。

カテゴリー「AMP」に色々と書きましたが、実は本日も新しいエラーが出ています。

「対応した方がいい」のはわかっていますが、本当にきりがない。

 

 

「管理者画面」　　　　　管理者画面の設定

管理者パネルとは？

Cocoon独自の機能です。

ログインしているときにブログを見ると、フッター部分に薄い灰色が出てきます。

 

PV数や編集画面へのリンク、AMPチェックやSEOツールへのリンクなど、管理に役立つさまざまな機能が搭載されています。

 

便利だけと・・・

 

 

「エディター」　　　　エディター画面の設定

デフォルトで。

 

「API」　　　　AmazonなどのAPI設定

Amazonや楽天、Yahoo!ショッピングの商品リンク機能が搭載されています。

よく解からないので、このままで・・・

 

 

おわりに・・・

備忘録としてつくりました。

このページを表示させて、「ここ」や「あそこ」のサイトを触っています。

設定だけで、3サイトで1時間ぐらいかかりました。

 

でも、まだ色々と不具合は残っています。

テーマ変更は、けっこう大変です。

でも、表示速度が大幅に上がったので、検索順位も上がるかも？

 

Simplicity も素晴らしかったが、「Cocoon」はもっと素晴らしい。

繰り返しになりますが、ワイヒラ氏に感謝。

 

読了、ありがとうございました

また、どこかで・・・