cocoonにテーマを変更。読み込みの高速化に成功!

ハック
スポンサーリンク

ブログのテーマをStinger PLUS2からcocoonに変更しました。

これまでStinger PLUS2をこのブログのテーマとして使ってきましたが、本日、cocoonにテーマを変更しました。

cocoonはサイト全体のカラーやデザインを簡単に選べます。今回はご覧のようにブラックベースのデザインにしました。ちなみに、Stinger PLUS2もcocoonも無料です。どちらも無料とは思えないほど充実した素晴らしいテーマです。

HTMLもCSSも分からない人でもカンタンなcocoon

ブログのテーマを選ぶ条件は「HTMLもCSSも分からない人でもカンタン」に使えること。というのも、自分はHTMLもCSSも分からずにWordpressでブログを運用しているからです。分からないこと、困ったことがあった時はWEBで検索してコードをいじらずに解決できることです。Stinger PLUS2も良かったのですが、cocoonはマニュアルも分かりやすく充実しているので初心者の人でも勉強しながら使いこなせるのではないかと思います。

テーマを切り替える最大の理由はカメのように遅い読み込み速度

Stinger PLUS2も大満足だったのですが、一昨日、久しぶりにPageSpeed Insights を試したら、モバイルのスピードが24%という大遅延状態に!ちなみにPCは74%。2ヶ月前はどちらも95%以上あったのに、ちょっと油断しているすきに読み込み速度がカメのように遅くなっていました。

モバイルのPageSpeed Insightsの結果

PCのPageSpeed Insightsの結果

そんなときにふっと思い出したのが、以前から気になっていcocoonです。スピードが速くなるという評判を耳にしていたので試してみようかなという気分になりました。

やるときめたら、アップロード、インストール、そして有効化。

当然のことですが、cocoonのテーマをアップロードしてインストールして有効化します。この手順はすでにネットで色々な人が書いています。また、cocoonの公式マニュアルもありますのでそちらを参考にしてください。

ちなみに、cocoonもStinger PLUS2もテーマは「親テーマ」「子テーマ」の2種類あるタイプです。色々な変更は「子テーマ」で行います。親テーマを直接いじらず子テーマに書き込むことでいろいろなリスクを軽減できるようです。(もっとも、自分はHTMLもCSSも分からないのでテーマをいじることはないと思いますが)

cocoonは多機能なので重複するプラグインは停止または削除

ブラグインがブログの読み込み速度の遅延の原因になるときがあります。不要なプラグインは停止または削除しましょう。また、cocoonは多機能なのでプラグインがなくても色々なことができるように設計されています。StingerPLUS2からの移行なのでプラグインは少ない方でしたが、ccoonにはブログカード機能が搭載されているので、それまで使用していたブログカード系プラグインは削除しました。

ブログ全体のトーンやデザインを一発で変更できるスキン機能

cocoonの設定をクリクすると多彩な機能が表示されます。そのトップにあるのが「スキン」です。ブログ全体に使用できる様々なカラーやデザインの「スキン」が表示されます。カーソルを合わせるとサンプルを見ることができるのでお好みのスキンを選びましょう。このブログのスキンはダークカモノハ [作者: y.hiroaki]にしました。全体的にブラックな、今までとはちがうイメージにしました。

ちょっと手こずったのがTOPページの画像やキャッチ、タイトルなど

これは人によると思いますが、StingerPLUS2で使用していたTOP画像がcocoonでは表示されませんでした。レイアウト的にもタイトル、キャッチコピーがごちゃごちゃな感じでレイアウトされました。自分の場合は、cocoon用に再設定が必要となりました。

ちょっと面倒だな・・・というのが正直な感想です。一瞬、StingerPLUS2にテーマを戻そうかという思いが頭の中をよぎりました。でも、最近、ブログの内容が当初計画していたものと変わってきていたので画像やタイトル、キャッチコピーをまるごと刷新する時期だなと思い、修正しました。変更は、cocoon設定>ヘッダーで行います。細かい設定は時間のあるときに紹介します。

読み込み速度はモーレツに速くなっていた!

TOPの画像を直し、タイトルの文字も修正、キャッチコピーは文字色の変更ができず削除・・といった作業も完了。課題はいろいろありますが、見てくれの体裁は整いました。そこで、PageSpeed Insightsでスピードテストを実施。すると、圧倒的に速くなっていました。サクサクです。テーマ変更の最大の目的が見事に解消!cocoonバンザイを三唱しました。

 

課題という名のチューニング

読み込み速度の問題は解決しましたが、いくつかの課題は残っています。

  • キャッチコピーの文字色の変更
  • 広告が表示されていない
  • アナリティクス、アドセンス、アマゾンなどの連携の確認

以上をコツコツと解決し、ブログのチューニングを完成させていく予定です。

あえて問題点をあげるとするなら・・

タイトルの文字色はヘッダー画像の文字色で変更できますがが、キャッチコピーの文字色はサイト全体の文字色になります。TOP画像やブログ全体のカラーによってキャッチコピーの文字色をコードを使わずに調整できるようにしてもらえると助かります。

まとめ

  • 読み込み速度が速くなり、多機能なcocoonに大満足です。
  • テーマ変更や修正にかかった時間は2時間ちょっと。
  • コードが苦手など素人でも簡単なオススメのテーマです。

コメント

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