これが無料だなんて!Cocoon導入してみた!

WordPress

みなさんこんにちわ、にゃーお。です。
今回は WordPressテーマCocoon(コクーン/繭)です!以前から評価の声が高く気になって導入したかったのですが、この週末まとまった時間が取れたので色々と導入を兼ねて触ってみました。
この記事では導入に一通り必要なステップに沿って、自分でカスタマイズできるポイントや特徴を紹介していきたいと思います^^

スポンサーリンク

Cocoon(コクーン)とは?


Cocoonとはわいひら氏開発のSimplicityの後継の位置づけ(※完全な互換性はないです)となるWordPressテーマです。
Simplicityの設計思想を踏襲し以下の特徴があります。オフィシャルサイトに大変丁寧に解説が記載されておりますが、こちらでも少し抜粋してご紹介します。

シンプル

テーマ名をCocoon(繭)としたのは、繭のように白い、シンプルなテーマを作りたかったからとのことです。実際内部の作りもSimplicity以上に非常にシンプルで分かりやすくなっています。
カスタマイズして利用するユーザーの事を非常に考慮した作りとなっています。

内部SEO施策済み

ここまでテーマ側でSEO施策を組み込んで頂いています。
・ ページ高速化機能搭載
・ モバイルファースト(モバイルフレンドリー)
・ ワンクリックでAMP対応
・ PCとモバイルでソースコードが100%同じ完全レスポンシブ
・ W3CのHTML5バリデーションのエラー0
・ W3CのCSSバリデーションのエラー0
・ 基本的な構造化データタグの適用
・ 構造化データエラー0
・ メタディスクリプション記入欄の設置
・ HTMLアウトラインの最適化

完全なレスポンシブスタイル

Google推奨のレスポンシブデザインも踏まえPCやモバイル端末でソースコードが変わるような事はせず(is_mobile()系の関数で条件分岐しない)、一度のクロールでページ情報の取得が可能となっています。自分で独自にレイアウトを配慮する必要が無く大変便利です。

手軽に収益化を図れる

こちらも大変ありがたい機能です。
Google アドセンス広告では1つの広告コードを張るだけで広告フォーマットを自由に選べるようになっています。
・ アドセンス自動広告(手動設定と併用可)
・ レスポンシブ広告
・ バナー広告
・ レクタングル広告
・ ダブルレクタングル広告
・ ラージスカイスクレーパー
・ 記事広告
・ リンクユニット広告
また、adショートコードを利用することで、本文中の好きな場所に手軽に広告を貼れるようにもなっています。

ブログ支援機能が充実

ブログコンテンツの充実を支援する機能として以下の機能がサポートされています。
これもSimplicity2に比べ非常に充実しています。ここらへんは後ほど。
・ 吹き出し機能
・ 定型文テンプレート機能
・ アフィリエイトタグ管理機能
・ ランキング作成機能
・ ブログカード機能
・ 文章装飾機能
・ カラム設定機能

テーマ独自の設定機能

WordPressテーマカスタマイザーを使わずにテーマ独自設定画面で集約してサクサクカスタマイズできます。これがすごく便利でGood!!

次は導入のステップを紹介します。

スポンサーリンク

Cocoon(コクーン)テーマのダウンロードとインストール



テーマはオフィシャルブログからダウンロードできます。親テーマ「cocoon-master」と子テーマ「cocoon-child-master」をダウンロードしましょう。
本記事作成の10/14時点では親テーマ「cocoon-master」はver1.3.0が公開されています。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

事前のバックアップとローカル環境での構築

事前にローカル環境へのバックアップをおすすめします。
以前に記事にしていますのでご参考ください。
※SQLデータベースのバックアップ等も今後記事にしたいと思います。

みんなやってる? WordPress ローカル環境構築 2018年版
みなさんWordPressで作成したブログの改修やバージョンアップを行うとき、いきなり本番環境でエイヤで試してみたりしていますか?バージョンを変更したことで、エラーや警告メッセージが表示される可能性がありますしエラーがあった場合サイト全体に影響があることもありえます。運営中のWebサイトであれば非常にリスキーといえます...

テーマのインストール

上記オフィシャルサイトからダウンロードしたテーマファイルを圧縮してzipファイルにしましょう。

WordPress管理画面から「外観」->「テーマ」画面を表示します。
「新規追加」ボタンをクリック->「テーマのアップロード」をクリックします。


「ファイルを選択」をクリックし、先程zipにしたテーマ親テーマファイル&子テーマファイルをアップロードします。

アップロードと同時にインストールしてくれます。完了するとこちらのようにテーマ一覧にCocoonのテーマが表示されます。


親テーマ->子テーマの順番に有効化すればインストール完了です。
後は設定すればOKです!

スポンサーリンク

Cocoon(コクーン)テーマの設定とカスタマイズ



テーマの細かな設定やカスタマイズは全てが必須ではありませんが、ブログの個性を出す意味で色々とコンセプトや好みを元にカスタマイズしていくと楽しいですよ!
ここでは当ブログで触ったところを中心に紹介していきたいと思います。
(詳細は次の記事等でまとめたいですね)

ではWordPress管理画面のサイドメニューに「Cocoon設定」がありますのでクリックして設定画面を出しましょう。
タブをクリックすることで個々の設定が可能となります。

ヘッダー

ヘッダーはある意味そのブログ・Webサイトの顔になります。一番最初に目に入るところですもんね。当ブログでは個性は出しつつ、今回はシンプルにしてみました。
「ヘッダー」メニューをクリックするとヘッダー編集画面に切り替わります。 従来のWordPress標準のカスタマイズメニューに比べとても見やすくていいですね!
設定結果のプレビューを表示しながら変更できます。

以下、いくつか当ブログで設定したところをご紹介。

・ヘッダーロゴ画像の設定
「ヘッダーロゴ」メニューをクリックし画像を取り込みます。サイズやレイアウトは気にいるまで色々変更してみましょう。

・ヘッダー背景の設定
Cocoonでは画像を取り込み、ページ全体の動きに対して画像部分を固定化する事で視覚的な効果を得られるオシャレな機能があります。かなり悩んで色々試しましたが、当ブログではそのまま背景無しにしました。

・グローバルメニュー(ヘッダーナビ)の設定
メニュー部分の幅やレイアウト、メニュー部分の色、テキストの色等設定できます。
後からテキスト装飾はCSSで設定可能です。(子テーマのstyle.cssにcssコードを追記していきます)

– ナビエリアの隙間指定
  #navi { padding: xx px; }
– ナビエリアの上下線の追加
  #navi { border-top: xx; border-bottom: xx; }

・グローバルメニュー(ヘッダーナビ)の項目、構成設定
メニュー自体は「外観」->「メニュー」で設定画面が表示されます。
メニューテキストにはおなじみのfontawesome Webアイコンの表示も可能です。

エントリーカード

エントリーカードはトップ画面で表示されるコンテンツカードです。これもブログの顔ですね。レイアウトや見せ方、デザインを変更可能です。
このエントリーカードはインデックス設定にてカード形式で表示するようにした場合に表示されます。

エントリーカードはこのように構成されていて、該当する箇所を指定すればCSSで自由にデザイン、レイアウトのカスタマイズが可能です。

・エントリーカードタイトル .entry-card-title {}
・エントリーカードスニペッド .entry-card-snippet {}
・エントリーカードメタデータ .entry-card-meta {}
・エントリーカードサムネイル .entry-card-thumb {}
・エントリーカードカテゴリラベル .cat-label {}

今回はシンプルに変更しようと思ったのでこんな感じでも十分雰囲気が変わったと思います。

投稿

こちらでは以下の変更ができます。
 ・カテゴリー、タグ表示設定
 ・関連記事表示設定
 ・関連性をタグにするかカテゴリにするか。->当ブログでは内容に繋がりをもたせたくタグにしました。

他、以下の設定もできます。
・関連記事見出し
・表示タイプ(Adsense設定ができます)、表示数、文字数
・前/次ページ送りのナビゲーション設定
・パンくずリストの設定

本文

こちらでは以下の変更ができますが基本、デフォルトのままにしてます。
・外部リンク設定
・内部リンク設定
・レスポンシブテーブル(横幅)設定
・投稿情報設定

目次

こちらも超便利機能です!!必要項目を入力しておくだけで自動で各記事の目次を作ってくれます。
数字の割り当てや開く/閉じる、階層の深さなど設定できます。

目次部分はこのように構成されていて、該当する箇所を指定すればCSSで自由にデザイン、レイアウトのカスタマイズが可能です。

・Table of Contents(ToC) 全体 .toc-center {}
・Table of Contents(ToC) タイトル .toc-title {}
・Table of Contents(ToC) リスト .toc-list {}

画像

主に投稿記事、固定ページの画像表示、またアイキャッチ画像の表示設定ができます。
記事でのアイキャッチ画像の中央寄せとカラム幅に合わせる項目はチェックを入れておきました。

ブログカード

こちらも超便利機能!記事を作成する際にURLを記載する事でブログカードとして表示できます。

内部リンク、外部リンクのブログカードの表示設定ができます。外部リンクについてはキャッシュ更新を有効にしておきました。

ブログカード部分はこのように構成されていて、該当する箇所を指定すればCSSで自由にデザイン、レイアウトのカスタマイズが可能です。

・ブログカード全体 .blogcard {}
・ブログカードタイトル .blogcard-title {}
・ブログカードスニペッド .blogcard-snipet {}
・ブログカードサムネイル .blogcard-thumbnail {}

カルーセル

事前に設定したカテゴリの記事がランダムに横スクロールして表示されます。

これいいですね!!!超設定したい・・!でもまだ記事が少なすぎて微妙そうでいったん見送り。。

大体これぐらいでCocoon設定メニュー上の主だった設定は完了です。


スポンサーリンク

サイドメニュー(ウィジェット)の設定


最後にサイドメニュー部分の設定を終えれば最低限必要な部分の設定は完了となります。
サイドメニュー部分は従来のWordPress管理メニューにある「外観」->「ウィジェット」で設定します。

何気に便利なのが、最近のCocoonのバージョンアップで設定した各ウィジェットの並び替えがこの設定画面上でできるようになったのがありがたいです。(各ウィジェットをドラッグするだけ)

これらウィジェットのデザインのカスタマイズは設定画面からはできません。
ウィジェットの構成をふまえてCSSで変更する必要があります。

少しややこしいのですが、ウィジェットの枠組み全体は共通のクラスがあり、これを指定することで色々と変更できるのですが、ウィジェットの中身部分についてはユーザーが採用するウィジェットコンテンツを自由に設定できるようになっていることもあり、利用するコンテンツによってクラスやIDが異なります。よって、これは生成されたHTMLを見ながら設定を変えるしかなさそうです。

・サイドバー全体 .sidebar {}
・ウィジェット全体 .widget {}
・エントリーカード部分 .widget-entry-card-title {}

以下、ご参考までに一部紹介

・検索ボックス
 - 全体 .search-box {}
 - 検索テキストエリア .search-edit {}

・新着記事
 - ウィジェットタイトル部分(ID指定で変更) #new_entries-** h3 {}

・アーカイブ
 - ウィジェットタイトル部分(ID指定で変更) #archives-** h3 {}
 - まとめリスト(ID指定で変更) #archives-** > ul > li a{}

・タグクラウド
 - ウィジェットタイトル部分(ID指定で変更) #tag_cloud-** h3 {}
 - 全体 .tagcloud {}
 - タグテキスト .tag-caption {}
 - タグリンク部分 .tag-cloud-link {}

・人気記事
 - ウィジェットタイトル部分(ID指定で変更) #popular_entries-** h3 {}

・最新のコメント
 - ウィジェットタイトル部分(ID指定で変更) #recent-comments-** h3 {}

・プロフィール
 - 全体 .author-box {}
 - 名前 .author-name {}
 - 説明文 .author-description {}
 - SNSエリア .author-follows {}


スポンサーリンク

さいごに


今回のCocoonの導入にともないブログのデザインの見直しをかけました。
本記事では書ききれないほど多くのところで細かな配慮が見られ大変感激しました。これが無料ですよー・・・有料のテーマに引けを取らないのではないでしょうか。

ぜひ無料テーマをお探しでシンプルにカスタマイズしてみたい方はこの記事をご参考ください!

コメント