先日、本ブログのWordPressテーマを「Simplicity2」から「Cocoon」に変更しました。
Simplicity2・Cocoonとも、開発者は「寝ログ」のわいひらさん。便利なテンプレートをありがとうございます。
「Cocoon」は、SEO・高速化・モバイルフレンドリーに最適化した無料のWordPressテーマ。現在はテスト版での公開で、ダウンロードには登録が必要。ですがもうすぐ正式版が公開となるようです。
→「Cocoon1.0.0」として正式版が公開されました。現在はユーザー登録無しで誰でもダウンロード可能です。
Cocoonの特徴
WordPressテーマ「Cocoon」は、以下の7点が大きな特徴です。
- シンプル
- 内部SEO施策済み
- 完全なレスポンシブスタイル
- 手軽に収益化
- ブログの主役はあくまで本文
- 拡散のための仕掛けが施されている
- カスタマイズがしやすい
この中で私が特に気に入っているのは、「完全なレスポンシブスタイル」である、ということ。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のエミュレーターで確認しておきましょう。
本ブログはレンタルサーバー「エックスサーバー」にて稼働中です。
公式サイト：エックスサーバー
コメント