初心者がWordPressテーマをSimplicity2からCocoonに移行!カスタマイズまとめ

ブログ運営

WordPressを始めて2ヶ月過ぎました!サトシ(@donann310)です。

 

WordPressまだまだ勉強中です。

そんな中、WordPressテーマをSimplicity2からCocconに変更しました。

Simplicityの製作者様 わいひら様(MrYhira)が、

新たにCocconというWordPressテーマを作成され公開されました。

無料WordPressテーマ「Cocoon(コクーン)」を公開しました
SEO・高速化・モバイルフレンドリーに最適化した無料テーマCocoonの紹介記事。

このテーマは今後のスタンダードになる!っと思い、早速移行させていただきました。

本日は、初心者の私でもテーマの変更ができたこと、

またSimplicityとは違う操作性について紹介します。

 

スポンサーリンク

Cocoonとは

   出典:寝ログCocoon

Simplicity後継テーマのCocoon。
現在は、ユーザー登録者のみがダウンロードして使用が可能です。
まだ、不具合等を確認されているようで、後々一般公開されるようです。

詳しい特徴は、

以下の7つが主な特徴となります。

  1. シンプル
  2. 内部SEO施策済み
  3. 完全なレスポンシブスタイル
  4. 手軽に収益化
  5. ブログの主役はあくまで本文
  6. 拡散のための仕掛けが施されている
  7. カスタマイズがしやすい

Cocoonでは、これらの基本的な考えは変えずに、Simplicityフォーラムに投稿された「約3500トピック」と「約23000の投稿」から、ご意見を出来る限り参考にさせていただいて、新しいテーマとして再構築しました。

引用:https://wp-cocoon.com/

私は、初心者にもかかわらず、ユーザー登録しダウンロードしました。
一般公開されるまで待つ方が良さそうですが、
新しいものには早く触れて覚えたいので利用させていただいております。

 

テーマ変更をしてから行ったこと

私がSimplicityからCocconに移行してから、行ったことを紹介します。

  • 目次のプラグイン(Table of Contents Plus)停止、目次を中央に移動
  • ヘッダーの変更
  • Googleアドセンスの設置
  • GoogleアナリティクスのID設定
  • GoogleサーチコンソールのID設定
  • 見出しのカスタマイズ
  • サイドバーのカスタマイズ

今後変更したことやカスタマイズしたことはこちらに随時追加して行こうと思います。

 

目次のプラグイン(Table of Contents Plus)停止

 

目次のプラグイン Table of Contents Plusを停止しました。

停止をしないと二重で目次が表示されている状態です。

Cocoonではプラグインを使わなくても、目次を作ってくれます。

そして、この左にある目次を中央に移動させました。(CSSに追加)

/* 目次を中央へ*/
.toc {
  margin-left: auto;
  margin-right: auto;
}

その際、こちらを参考にさせていただきました。

【CSSカスタマイズ】コクーンで使えるCSSを追加するオススメの方法
有料級のワードプレス無料テーマCoccon(コクーン)のCSSカスタマイズ記事のまとめと、CSSを追加する方法を記載した記事です。 古いカスタマイズから新しいものまで、まとめてますので流し読みをしてください。

 

ヘッダーの変更

 

ヘッダーにロゴを表示させました。

Simplicityでは『外観』から、『カスタマイズ』に進み『ヘッダー』で変更していましたが、

Cocoonでは、『Cocoon 設定』からヘッダーを変更することができます。

この『Cocoon設定』から、様々な変更をしていくようになってます。

Simplicityに慣れていたので少し違和感を感じますが、

以前よりも簡単にサイト全体の変更したいところを見やすく、

変更しやすくなったような感じです。

 

Googleアドセンス、アナリティクス、サーチコンソール

『Cocoon設定』から『広告』のタブを押して、

Googleアドセンスのタグを入力。設置場所も簡単に指定することができて便利。

設定方法はこちらを参考にさせていただきました。

広告(AdSense)を手っ取り早く設定する方法
Cocoonテーマ利用時における、最も簡単なAdSense広告設定方法の紹介です。

 

アナリティクス、サーチコンソールの設定は『アクセス解析』タブから設定します。

両方ともIDをコピペするだけで設定できます。

Google Search Consoleに登録する方法
Google Search Console用のサイト認証タグを表示させてサイト登録を行う方法です。
Google Analyticsでアクセス解析する方法
Google AnalyticsのトラッキングIDをテーマに登録する方法です。

 

見出しのカスタマイズ

記事内を見やすくしたい、そして、自分のサイト感が出るように

見出しのカスタマイズをしました。

これは、Simplicityと同じように『外観』→『カスタマイズ』→『追加 CSS』

 

そこにCSSコードを追加して変更しました。

.article h2 {
padding: 0.5em;/*余白*/
color: #494949;/*文字色*/
background: none;/*背景色*/
border-left: solid 5px #696969;/*左線(実線 太さ 色)*/
}
.article h3 {
    border: 0;
border-bottom: solid 3px black;/*線 太さ 色*/
}

初心者の私がここで少し悩んだこと。

もともとあるh3の見出しの四角く囲む線を消したい。どうやっていいのかわからず、

正しいやり方かどうかわかりませんが、

最終的に『border: 0;』と記載することで解決しました。

見出しのカスタマイズに関しては、こちらを参考にさせていただきました。

[無料WordPressテーマ] Cocoonの見出しカスタマイズ用に主なclassセレクタを調べてみました | unlimited chaos
リリース当初から何かと話題になっている無料WordPressテーマのCocoonですが、Simplicityと同様に機能はこれでもかってくらい盛り沢山なのに対して、見た目的にはちょ...
【CSSカスタマイズ】コクーンで使えるCSSを追加するオススメの方法
有料級のワードプレス無料テーマCoccon(コクーン)のCSSカスタマイズ記事のまとめと、CSSを追加する方法を記載した記事です。 古いカスタマイズから新しいものまで、まとめてますので流し読みをしてください。

 

サイドバーのカスタマイズ

サイドバーをカスタマイズしました。

カスタマイズ前は、文字が左詰に配置されております。

この文字を中央に配置しました。

.sidebar h3 {
    text-align:center; 
    padding: 5px 10px;
    background-color: #ffffff;
    border-bottom: 1px solid #696969;
}

こちらを参考にさせていただきました。

[無料WordPressテーマ] Cocoonの見出しカスタマイズ用に主なclassセレクタを調べてみました | unlimited chaos
リリース当初から何かと話題になっている無料WordPressテーマのCocoonですが、Simplicityと同様に機能はこれでもかってくらい盛り沢山なのに対して、見た目的にはちょ...

 

最後に、

初心者の私でも簡単に自分の思う通りに変更できてます。

個人的に好きなのは、Simplicityから変わらずシンプルなデザイン。

これ本当に無料でいいのかと思うぐらい便利です。

モバイル対応もよくなったようで、今後、どんな感になっていくのか期待です。

あまりわかっていないSEOの部分やスピードに関しても勉強!

では、

ブログ運営
スポンサーリンク
satoshiをフォローする
正直、どーなん?

コメント