WordPressのテーマをコクーン(Cocoon)に変更しました。
Simplicityから変更した場合、どのような変更があったのが、
どこに利点を感じて、どこが困ったのか書いていきます。
Contents
コクーンに変更した理由
SimplicityでGoogle Adsenseの自動広告が表示されるとき、
記事の下の方に意味不明な空白が表示されることがあるようになったのです。
空白が表示されるのはタブレットで見たときで、
多分Google広告を取得中だから空白に見えるのだと思われます。
あとは地味に表示速度が遅いのも気にはなっていました。
どうしてもこの意味不明な空白を無くしたくて、有料テーマに変更しようかなと有料テーマを探していたところ、
「コクーン」が出ている!
と知って飛びつきました。
コクーンがなかったら、たぶん無理しても「JIN」を購入していたことでしょう。
しかし!JINは¥14,800!!高っ。
むり、弱小アフィリエイターには、いくら複数サイトで使えて綺麗なサイトが作れるとわかっていても、無理。
コクーンに変えて思ったのは、ちょっと無理してもJINを買っても良いかもと思いつつ、
買うならサイト構築最初に買わないと面倒と思う。
(全ページを設定し直しかと思うと気が遠くなる。)
コクーンに変更した時にまずやること2つ!
Simplicity → コクーンに変更した時にやるべきことがいくつかあります。
最初に設定すべきなことが2つあります。
- 広告がリセットされるので、設定し直す
- CSSのデザイン設定コピペ
この2つは急ぎ行いましょう。
広告の再設置
何を置いても1番最初に広告の再設置を行いましょう。
記事に直接貼り付けてある広告は、消えていません。大丈夫です。
Goodle Adsenseの自動広告や、ウェジットで設定していた広告が設定が消えています。
設定し直しましょう。
Google Adsense自動広告の設定
Google Adsenseの自動広告のコードは、こちらをご確認ください。
ただし、設定した覚えもないのにsimplicityの時の設定が引き継がれているのか勝手に広告が表示されていたり、
headerへコピペしたコードとバッティングして表示されなかったり、
多少の困ったことは起きるようです。
CSSのコードのコピペ
次に、以前まで使用していたテーマで、独自でCSSでデザインした部分がある場合、
CSSコードをコピペします。
早めに設定し直さないとサイトデザインが崩れていますので注意です。
このサイトなら、例えば「参考記事ボックス」とか、アマゾン楽天ボタンとか、
サイドメニューとグロバールメニューとかの表示設定をコピペ。
※カエレバはコピペしなくても綺麗に表示されていました。
後日追記:アナリスティクスとコンソール
※グーグルアナリスティクスのコードをheaderに記載していた人は、
コクーンでも忘れずにheaderにコピペしましょう。
サーチコンソールの設定とかも見直した方が良さそうです。
コクーンに変えたら、ここをカスタマイズした!
広告の設定と、CSSのコピペが終わったら、
自分好みにサイトをカスタマイズしていきましょう。
私が行ったコクーンのカスタマイズはこちら。
- ヘッダー、グローバルナビ設定
- インデックス(トップ画面)の表示設定
- パンくずリストの表示位置変更
- 関連記事の表示設定
- 目次の表示設定
- SNS系の表示設定
- アーカイブの表示設定
- サイトカラー、文字色、行の高さなど設定
- パーマネントリンクの設定変更
- モバイル表示の設定
サルネイムのサイズがバラバラになるのは注意点。(これはいまだに解決したようなしていないような。)
細かく見ていきましょう。
ヘッダー、グローバルメニューの設定
コクーンにすると、サブタイトルがタイトルの上に表示されるなどの変更点がありますので、
グローバルメニュー合わせて、自分の好きなように設定し直す必要があります。
(グローバルメニューはCSSでカスタマイズしていた人は、CSSをコピペ)
インデックス(トップ画面)の表示設定
インデックス(トップ画面)の表示設定をします。
コクーンになったら、サルネイムで目立たせるインデックス表示になりました。
※画像サイズのズレについては次回。
私は縦型カード2列を今のところ洗濯していますが、3列でも良いかもと悩んでいます。
文字数も設定でき、私は「60」文字に変更しました。
パンくずリストの表示設定
パンくずリストの表示位置を好みに設定します。
私は、「メインカラムトップ」(記事タイトル上)が好みなのです。
関連記事の表示設定
関連記事の表示設定をします。
プラグインを別で入れている場合は、プラグインを停止するか、
Cocoonの関連記事を表示しないかを選びましょう。
私はプラグインの数を減らしたいので(表示速度に影響する??)、
Cocoonの関連記事表示を利用しています。
※画像サイズのズレについては次回。
目次の表示設定
コクーンで目次が標準装備されました。
プラグイン「Table of Contents Plus」などを使っていた方は、どちらを使うか選択しましょう。
(どちらかの表示を削除しないと2つ目次が表示される可能性あり。)
中央表示か、開くと閉じるの文言は何にするかなどの設定もできます。
SNS系の表示設定
lineやfacebookeなどのシェアボタンの表示設定もしましょう。
デフォルトは記事上と記事下に表示されるようになっています。
SNSフォローボタンは私は使わないので非表示にしています。
Cocoon設定→ SNSフォロー
アーカイブの表示設定
サイドメニューのアーカイブ(年と月が表示されているところ)の表示設定を変更しました。
Simplicityでは去年以前の記事は年表示、今年のは月表示とされていたのが、
コクーンは全て月表示。
サイトの年数が多ければアーカイブ表示がただ長くなってしまうので、
ドロップダウン表示に変更しました。
メインカラー、文字カラー、行の高さ設定
ある程度設定が落ち着いてきたら、サイトメインカラーや文字カラー、行間設定などを好みで行いましょう。
サイトメインカラーは、サルネイムのカテゴリー表示のカラーや目次のカラーなどに使われます。
文字カラーは、黒(black)よりも「#666666」などの色の方が読みやすいそうなので、私は変更しています。
行の高さはデフォルトは1.8ですが私は1.6に変更しました。
Cocoon設定→ 本文(行の高さ)
パーマネントリンクの設定変更
コクーンにして新たに記事を書いた時に何がびっくりしたかって、
パーマネントリンクが日本語表記になっていることでした。
(記事のurlの途中からタイトルそのままの日本語が設定される。)
私はurlに日本語表記は好みでは無いので、半角英数字に変更しました。
モバイル表示の設定
コクーンではモバイル表示の設定もできるようになりました。
これは本当に好みですね。
コクーンになって便利になったこと
Simplicity → コクーンにして便利になったことはいくつかあります。
- ボックスの種類が増えた
- ブログカード機能が使える
- 吹き出し機能も使える(カスタマイズ簡単)
- 過去のカエレバ部分が何もしなくても綺麗に表示される
- カエレバっぽい部分を作り出すことができるようになった
- Goole Adsenseの自動広告の表示位置を設定できる
あとは、たぶん表示も以前より速くなったっぽい。
トップページや関連記事がサムネイル表示になって見やすくなって嬉しいです。
コクーンにして困ったこと
でも、実は逆に不便になったこともあります。
- 記事の見出し(h2、h3)のCSSが、以前のをコピペしてもうまく反映されない
- 「Regenerate Thumbnails」プラグインを使っても、トップページや関連記事のサムネイルサイズが統一されない
- ボックス内でリストが使いにくい
- カエレバ風が結局使えなかった
記事の見出し表示は解決しました。
サムネイルのサイズについては、インデックスは解決したんですけど、関連記事が微妙。
ボックス内でのリストが使いにくいけど一応使えるようになりました。
カエレバ風はアマゾンでのエラーで使えず、結局自作のもので行くことにしました。
この4つの困ったことへの解決方法は、次回記事にします。
Simplicity→コクーン(Cocoon)にして捗る
過去記事にブログカードをどれくらい入れて行くか要検討中です。修正も時間かかるから。
コクーンにしてみて良かったと思いつつも、細かい困ったや面倒があるため、
有料テーマだったらこういう困ったはないのかなあ、と思ってみたり。
コクーンでの困ったも書こうとしたんですけど、長くなったので次回です。