ワードプレスのテーマをcocoon変更したらすごい

スポンサーリンク
cocoon

わたしはもともとbiz vektorという無料のテーマを使っていたんですけど、なんかちょっとシンプルすぎるな〜変えたい気もするけどどれがいんだろ〜と悩んでいたところにちょうどいろんな人にあちこちでおすすめされているテーマがあるではないですか!しかも無料らしい…。しかも有料並みにすごいらしい…。

 

さっそく私も導入してみました!

 

 

cocoon(コクーン)の特徴

 

cocoonとは

 

新しくテーマを作成したのは、Simplicity自体元々、個人用に作成したものを公開したテーマだったので、機能を増設するにつれて、多少の無理も出てきて、動作確認が大変になってきたからです。

また、Simplicityは、約4年前に公開したものなんですが、「当時のWEB状況」と「最近のWEB状況」に乖離もでてきました。ですので、一度現在の状況に合わせて作り直しておきたかったからです。

 

cocoonはわいひらさんという方が自作でテーマを作っていてしかも無料公開してくれてる方です!神様かな?

 

cocoonはSimplicityの後継テーマなんですね。Simplicityもネット上ではかなり好評でしたね。

 

cocoonのすごいところ

 

  • ページ高速化機能搭載(テーマ機能だけでPageSpeed Insights90点後半が取れる)
  • モバイルファースト(モバイルフレンドリー)
  • ワンクリックでAMP対応
  • PCとモバイルでソースコードが100%同じ完全レスポンシブ
  • W3CのHTML5バリデーションのエラー0
  • W3CのCSSバリデーションのエラー0
  • 基本的な構造化データタグの記入
  • 構造化データエラー0
  • 投稿ごとにメタディスクリプション記入欄の設置
  • HTMLアウトラインの最適化

 

わいひらさんのサイトからの引用です。たくさんありますね!

 

私には詳しいのまではわかりませんが、グーグルはページ表示の高速化に最近力を入れ始めていること、モバイルつまりスマホにも対応することが大事なことは最近よく聞きますね。

 

他にもわたしがテーマを変えてすげえ!ってなったところがあります。

サイトがもうなんかかっこいい

 

 

サイトトップページ

テーマを変更したあとのサイトをみた感想はうわ!なんかかっこよくなってる。でした。よく見る有名なサイトみたいな構成で感動しました。

 

以前のサイトトップページ

ちなみにこっちがテーマ適用前。

 

見出しもかっこよくなった

 

見出し

前使っていたものだと見出しタグを使っても文字が大きくなるだけで寂しい感じがしてました。

cocoonのテーマだと文字が大きい&太字&グレーの囲いがあるので大満足です。

サイトの表示速度がむっちゃ速くなった

 

テーマ変更前のpagespeedinsightsで測ったもの

PageSpeed Insights

ページ速度スコア

モバイルが68点と少し低め。

 

 

ページ速度スコア

パソコンは90点もともとよかったですね。

 

テーマ変更前のgtmetrixで測ったもの

GTmetrix | Website Speed and Performance Optimization
GTmetrix is a free tool that analyzes your page's speed performance. Using PageSpeed and YSlow, GTmetrix generates scores for your pages and offers actionable ...

 

ページ表示スピード

yslowのとこがBでしたのグレードのとこがcなのでまあまあ。

 

 

テーマをcocoonに変更後

ページ速度スコア

なんと99点!はやすぎw

 

ページ速度スコア98点

パソコンも90→98になりました。

 

ページ速度スコア改善

こちらもA判定になりグレードもB判定に上昇。すごく速くなりました。

 

標準文字が18ptになった!

 

前のテーマのときは標準文字が11だったので毎回文字を打ったあとに文字の大きさを変更していました。変更する方法はあったかも知れなかったけど見つけられなかった(´・ω・`)

 

なのでこのテーマだとそんな変更の手間がなくなり文字を打つだけでいい!すばらしい。

 

吹き出しがかわいい

いぬ
いぬ

ボタン一つでこんなに簡単に

うさぎ
うさぎ

吹き出しが作れちゃう!

これが…無料…??

プラグインなしで目次が生成された

 

目次一覧

目次付けたほうがいいかなぁなんて悩んでいたのでプラグインなしで目次を生成してくれるの便利!cocoonを使うなら目次のプラグインはもう必要なくなりますね。

 

プラグインなしでsnsボタンがついた!

 

 

シェアボタン

いままでsnsボタンはwp social なんとかというプラグイン使ってたんですけどこれも必要なくなりましたね!

ワードプレスはプラグインが多いと相性が悪いプラグインがあったりしてバグったりしてしまうのでプラグインが少ないことは大切です(●´ω`●)

feedly(オレンジのアンテナのボタン)いわゆるRSSのボタンも設置してくれるんですね。

 

piyoと表示されてる所は後で修正せねば。

 

プラグインなしで関連記事が表示された

 

関連記事

関連記事もプラグインでやろうと思っていた矢先だったのでとてもありがたい…!

 

 

プラグインについてばっかですね(笑)ですがわたしにとってはすごいことです。前のテーマのときはやらなきゃなーと思いつつ記事を書くので手いっぱいでなかなか手付かずだったものが今回cocoonのテーマを導入するだけですべて叶ってしまった…。ありがたや…。わいひらさんありがたや…。

 

cocoonのダウンロード方法

 

cocoonのダウンロード方法を順番に説明していきます。わかる人は飛ばしてください!

 

ユーザー登録

 

cocoonダウンロードページ

まずこちらのサイトに行きます。cocoonを提供してくださっているわいひらさんの寝ログというサイトです。

 

ダウンロードページ

サイトに行くと真ん中らへんにダウロードページがあるのでこれをクリック。

 

 

ユーザー登録

今現在お試し運用中ということでユーザー登録した人だけに配っているそうです。

 

しばらくしたら完全版がでて一般公開というかたちみたいですね。登録は簡単でメールアドレスとパスワード入力するだけでできました。

 

ユーザー登録のところをクリック。

 

メールアドレス登録

 

ユーザー名は好きな名前を入れてください。日本語だと登録できなかったので英語で入力します。

メールアドレスを入力して登録ボタンをクリック。

 

メール受信

 

するとcocoonユーザー名とパスワード情報という件名のメールが送られてくるので開きます。

 

 

リンク

貼られているリンクをクリック。

 

 

パスワード設定

ここでパスワードを決めます。新しいパスワードのところに英語や数字をまぜた文字列を入力。repeat new passwordには上と同じものを入力します。

入力できたらreset passwordをクリック。

 

これでユーザー登録できました。

テーマのダウンロード

 

ユーザー登録ができるとテーマがダウンロードできる画面に行きます。

 

テーマには親テーマ小テーマというものがあります。親テーマだけダウンロードでもサイトに適用できますが、特に手間も変わらないので小テーマも一緒にダウンロードしてください。

 

 

親テーマのみだと、もしカスタマイズをしているとテーマのアップデートがあったときにカスタマイズした設定がリセットされてしまいます。

逆に子テーマだけでもだめです。

 

小テーマもダウンロードすることでカスタマイズした設定を保存したままテーマのアップデートができます。基本的にカスタマイズするので小テーマも一緒にダウンロードしてください。

 

 

 

テーマダウンロード

cocoonテーマをダウンロードをクリックするとスマホ、パソコンのファイルに保存されます。

 

子テーマダウンロード

同じように小テーマの方もダウンロード。

 

テーマをサイトに適用

 

テーマ設定

外観→テーマをクリック。

 

テーマ新規追加

新規追加をクリック。

 

 

テーマアップロード

テーマのアップロードをクリック。

 

ファイル選択

ファイルを選択ボタンをクリックして

 

ファイル

下のcocoon-masterの方のファイルを選択。

 

インストール

今すぐインストールをクリック。

 

適用

親テーマが適用されました。続けて子テーマも適用します。

テーマのページに戻るをクリック。

 

ファイル選択

ファイルを選択をクリックして

 

子ファイル

今度はcocoon-child-masterの方を選択します。

 

インストール

今すぐインストール。

 

適用

完了できたら有効化を押します。

 

 

適用完了

この画面のように子テーマが適用されてれば完了です。

 

くま
くま

親テーマと子テーマ両方をインストールして子テーマを適用するのがポイント!

 

まとめ

 

とりあえずcocoonすごい…。これが無料テーマ?というレベルですね。できることが多すぎて私もまだまだ把握できていません…!

無料テーマはもうcocoon最強なんではないでしょうか。

有料テーマは使ったことないですが、ふつうに有料レベルだと思います!(有料のものよりすごいなんてこともあったりして…)

とにかくcocoonサマサマです。ありがとうございます!

 

cocoonのカスタマイズとテーマ変更したらやるべきこと
この記事はワードプレスの無料テーマcocoonのカスタマイズ方法とテーマを変更したらやるべきことについて解説しています。これを見ればcocoonのカスタマイズはだいたい完了します。ぜひご覧ください。

コメント

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