ブログテーマを「Cocoon」に変更。カスタマイズのポイントなど

2018.06.20

先日、本ブログのWordPressテーマを「Simplicity2」から「Cocoon」に変更しました。

Simplicity2・Cocoonとも、開発者は「寝ログ」のわいひらさん。便利なテンプレートをありがとうございます。

Cocoon公式サイト

「Cocoon」は、SEO・高速化・モバイルフレンドリーに最適化した無料のWordPressテーマ。現在はテスト版での公開で、ダウンロードには登録が必要。ですがもうすぐ正式版が公開となるようです。

→「Cocoon1.0.0」として正式版が公開されました。現在はユーザー登録無しで誰でもダウンロード可能です。

スポンサーリンク
レンタルサーバーのキャンペーン
【エックスサーバー・キャンペーン】
期間限定！【初回利用料金最大30％OFF】キャンペーン　4/21 12時まで
【サーバー移転代行33,000円→0円キャンペーン】も同時開催中！
公式サイト：エックスサーバー

Cocoonの特徴

WordPressテーマ「Cocoon」は、以下の7点が大きな特徴です。

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

この中で私が特に気に入っているのは、「完全なレスポンシブスタイル」である、ということ。Cocoonは画面解像度によって可変的なレイアウトを取るので、PC用・モバイル用といった個別の設定が一部をのぞき、ほとんどありません。

これはSimplicity2でも出来たことですが、Simplicity2はレスポンシブを設定で選ぶのに対し、Cocoonは完全レスポンシブであるのが大きな違いです。

また「カスタマイズのしやすさ」も大きな魅力。

WordPress管理画面の「Cocoon設定」より、多彩な設定を行うことが可能。これまではstyle.cssやfunctions.php、またはプラグインで対応していたカスタマイズの多くが、Cocoonでは管理画面で設定を変更するだけで行うことができます。素晴らしい！

またSimplicity2では対応していなかったテーマの自動アップデートも可能なので、最新版へのアップデートが容易になったのも嬉しいところです。

スポンサーリンク

カスタマイズのポイント

多彩な設定ができるCocoon。カスタマイズしたポイントを挙げればキリがないのですが、ここが便利、というカスタマイズポイントを以下にまとめました。

スキン

同梱されているスキンから、お好みのデザインを選ぶことができます。本ブログはスキン「モダンブラック」を採用しています。一部カスタマイズした部分もありますが、それは本記事後半で。

広告

アドセンス広告の表示を

  • アドセンス自動広告のみ利用
  • 自動広告とマニュアル広告を併用
  • マニュアル広告設定（自前）で位置を設定

から選ぶことができます。最近導入された自動広告が利用しやすい仕組み。またトップ・ミドル・ボトムや本文上・本文下など、広告の出現位置をマニュアルで指定できるのも便利。ウィジェットで手動挿入する手間がなくなりました。

OGP

OGP項目から、トップページのOGPやTwitter Cardsで表示する画像の設定ができます。

アクセス解析

Google AnalyticsのトラッキングIDや、GoogleタグマネージャのIDなどをまとめて設定することが可能。その他のアクセス解析用タグについても、挿入フォームが用意されています。

本文

各種リンクの設定がめちゃ便利。外部リンクの開き方や、nofollowのあるなし、noopner・noreferrerなどの追加rel属性設定、外部リンクアイコンの表示など、細かい設定を行うことができます。

画像

本文上にアイキャッチを表示するか、本文中に最初に出てくる画像をアイキャッチにするか、といったアイキャッチ設定が便利。プラグインがなくても自動で画像をアイキャッチ化できます。

AMP対応

AMP（Accelerated Mobile Pages）に対応。「AMPの有効化」をオンにすることで、通常のURLの後ろに「/?amp=1」がついたAMPページを生成することができます。

AMPは投稿ページをモバイル上で高速表示させる仕組み。CocoonではAMPの見た目も、通常ページと極力見た目が同じになるように調整してくれています。

吹き出し

本ブログでは利用していませんが、吹き出し形式のパーツを利用できます。

新規に追加も可能。自分でスタイルや画像を用意しなくても使えるのは、嬉しいもの。

アフィリエイトタグ

使いまわしたり、定期的に内容を変更したいアフィリエイトタグのために、ショートコードを作成・管理することができます。複数ページに貼ったアフィリエイトタグを一つずつ修正、といった手間から解放されます。

アクセス集計

簡易なアクセス集計を取ることができます。またアクセス集計を有効化することで、「人気記事ウィジェット」が利用できるようになります。

高速化

  • ブラウザキャッシュの有効化
  • HTML縮小化
  • CSS縮小化
  • JavaScript縮小化

といった、ブログを高速表示させるための設定を標準で搭載。これは地味に嬉しい機能。

ヨメレバ・カエレバのCSS

これは設定では無いのですが、ヨメレバ・カエレバのスタイルシートを標準で装備しています。WordPressブログの多くが利用しているブログパーツなので、別途スタイルを準備しなくても良いのが楽です。

ヘッダーナビのスリム化

Cocoonの設定については以上。あとは独自でスタイルシート周りを若干さわりました。なお設定はCocoonの子テーマに記載しています。

どうしても編集したかったのは、ヘッダーナビゲーションの太さ（高さ）。ボタンの高さをもう少しスリムにしたかったので、下記のようなスタイルを子テーマのstyle.cssに追加しました。

.navi-in > ul li {
height: 40px;
line-height: 40px;
}

.navi-in > ul .menu-item-has-description > a > .caption-wrap {
height: 40px;
}

.navi-in a {
font-size: 14px;
font-weight: bold;
}

ボタンの高さを2/3に、フォントサイズを小さくボールドに、といった変更をしています。

スキン「モダンブラック」のカスタマイズ

「モダンブラック」がシンプルで個人的に気に入ったスキンなのですが、もう少し色を入れたかったので、見出し部分の色をstyles.cssでオーバーライドしました。

.header-container {
border-top: 3px solid #7883B4;
}

.navi {
background-color: #7883B4;
}

.navi-in a:hover {
background-color: #5A5A9A;
}

.article h2 {
border-top: solid 2px #7883B4;
border-bottom: solid 2px #7883B4;
}
.article h2:before {
border-top: solid 4px #7883B4;
}

.article h2:after {
border-bottom: solid 4px #7883B4;
}

.article h3 {
border-bottom: 3px solid #7883B4;
}

.related-entry-heading,
.comment-title {
border-top: 2px solid #7883B4;
border-bottom: 2px solid #7883B4;
}

スキンのCSSは「テーマの編集」から、Cocoon（親テーマ）＞skins＞skin-modernblack＞style.css　で参照できます。

ここから必要な部分を子テーマのstyle.cssに移植し、適宜オーバーライドの設定を加えました。親テーマのCSSをさわらないようにしましょう（アップデート時に上書きされる可能性があるため）。

【追記】
現在は上記スタイルからさらに変更をしています。上記スタイルでの見た目は、下記画像のようになります。

まとめ

以上、WordPressのテーマを「Cocoon」に変更、カスタマイズをしたよ、というお話でした。

今までプラグインやfunctions.php、styles.cssでカスタマイズしていたことも、大部分がテーマの設定のみでできる、という印象。本当に便利で、さわっていて楽しいテーマですよ。

なおレスポンシブデザインではありますが、実際のレイアウトはパソコン・タブレット・スマホなどの実機で確認しておくことをオススメします。実機がなければ、Chromeのエミュレーターで確認しておきましょう。

本ブログはレンタルサーバー「エックスサーバー」にて稼働中です。

公式サイト：エックスサーバー

コメント

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