WordPressテーマ『Cocoon』に変更Simplicity2後継テーマはマジでスゴイ

cocoon wordpress テーマ
Cocoonのスゴイところイロイロ
スポンサーリンク
7月1日『Cocoon(v1.0.0)』正式版が公開されました♪登録なしで誰でもダウンロードが可能です。

2018.3.19 Simplicityの作者で「寝ログ」管理人の”わいひら”さんが!

無料のWordpressテーマ『Cocoon』(コクーン)をリリースされました!

 Cocoon
検索

↑こんなお茶目な機能も備わっています(笑)

それはともかく・・・

– Cocoonは機能が豊富! –『Cocoon』で実装されている機能は、思いつく限りで【218個】もあるそうですが…要望に応えて、どんどん追加されています(汗)豊富な機能のほんのイチブですが、個人的に気に入っている機能を紹介します。
スポンサーリンク

サイト高速化機能

「サイト高速化」設定項目から、ブラウザキャッシュを有効化にしたり、HTML、CSS、JavaScriptの縮小化もチェックひとつでOKです。

  • ページの表示速度が劇的にUPしました
  • PageSpeed Insights(モバイル) 74→97

この手の作業を自分で行うには、トラブル発生時に少々知識が必要になりますが、Cocoonなら簡単に高速化できてしまいます。

フォーラムを見ていると、エックスサーバー側で『mod_pagespeed』設定をONにしている時の不具合が目立つ気がします。個人的にはCocoon側の「サイト高速化機能」で十分だと思っていますので、よくわからない場合エックスサーバーの『mod_pagespeed』設定をOFFにして使用することをオススメします。

管理者パネル表示機能

PV数、AMP動作確認、ページ診断チェックツール各種、レスポンシブなどのチェックツールを選んで表示できます。

PageSpeed Insights、構造化データチェック、HTML5チェック、アウトラインチェックなど・・・

チェックしたいページ上で『管理者パネル』からリンクをクリックするだけ!

この機能は便利すぎて、必要以上にチェックしている気がします(笑)

管理者パネル

こんな感じで上スクロールすると、画面下あたりにあらわれます

アドセンス広告コード設定(AMP対応)

アドセンス設定 レスポンシブ

AdSenseのレスポンシブ広告コードを一つ入力するだけで、サイト内のいろいろな場所へ、簡単に表示させることが可能です。(関連コンテンツユニット除く)

Simplicity2のように「広告ユニット」ごとのコードを、ウィジェットに入力して使用することも可能です。

アドセンス設定

また、レスポンシブ広告コードをセットしておくと

  • ウィジェットの「PC用広告」や「モバイル用広告」を使用した場合でも、コードを入力することなく(空の状態で)自由に配置可能。
  • 自動広告にも対応(アドセンス側で設定している場合)
  • ショートコード[ad]と入力するだけで、レスポンシブ広告を表示
  • AMP対応(関連コンテンツユニット除く)
『Cocoon 0.5.8』より「リンクユニット」もAMP対応になりました。今までもウィジェットを利用すれば可能でしたが、「レスポンシブ広告コード」のように取得した「リンクユニット用コード」をCocoonのアドセンス設定にセットすれば、簡単にリンクユニット広告を選べ、AMPページにも表示されるようになりました。
リンクユニット用コード

アクセス解析設定

Cocoon設定→「アクセス解析」から、各種のIDを入力するだけで、<head>や<body>などに、面倒なコードを貼り付けなくても利用することができます。

  • Googleタグマネージャ トラッキングID
  • AMP用Googleタグマネージャ トラッキングID(Cocoon 0.5.0以降
  • Google Analytics トラッキングID
  • Google Search Console ID

今までは、AMPページの計測を行うために、GoogleタグマネージャのAMP用コンテナ作成し、コードを《amp-body-top-insert.php》に貼り付けていましたが、これからはIDを設定するだけになりました。

AMP Googleタグマネージャ

詳しくは⇒ GoogleタグマネージャでAMP用のトラッキングIDの設定方法

その他のアクセス解析タグも、ここから設定することができます。

アクセス集計機能

  • 有効化にすると「人気記事」ウィジェットが使用できます。
  • WordPress Popular Postsプラグインが不要に!

アクセス集計機能

Simplicityからの「SEO設定」引き継ぎ機能

『Cocoon 0.4.2』より、Simplicityで投稿ページに設定していた「SEO設定」「広告設定」「AMP設定」の引き継ぎ機能が追加されました。

「Cocoon 設定」→「その他」→「Simplicityから投稿設定を引き継ぐ」にチェックを入れるだけです。

SimplicityからCocoon SEO引き継ぎ

引き継げる設定はこちら

  1. SEOタイトル
  2. メタディスクリプション
  3. メタキーワード
  4. noindex
  5. nofollow
  6. 広告の除外
  7. AMP表示しない

Simplicityと完全な互換性は無いということで、「メタディスクリプション」の設定がすべて消えてしまい、正直頭を抱えていたのですが・・・

皆さんの要望に応えてくださり、機能が追加されたようです。

カルーセル機能(ヘッダー下にスライド表示)

  • このブログではトップページに表示しています。
  • 最大10個までのカテゴリをランダム表示
  • オートプレイも可能

カルーセル設定

ワンクリックでAMP対応

  • あっという間にAMP対応サイトが作れます
  • 除外カテゴリーも選択可能

AMP対応

いつかはAMP対応に! と思っていたのですが、AMPにはいろいろ制限があり、デザイン的にも「どうなんだろう?」という心配も正直ありました。

ほとんど通常ページと変わりなく表示されています。いろいろ調べてわかったことは、機能面でもビジュアル面でも、Cocoonだから簡単にできる!ということだったんですね。

「目次」機能

  • デフォルトで《もくじ》が使えるのでTable of Contents Plusプラグインが不要に!
  • 目次を表示させたいページ「投稿ページ」「固定ページ」を選べます。(Cocoon 0.5.4以降

Cocoon 目次設定

  • ページごと「目次」の表示・非表示が可能に!(Cocoon 0.5.4以降

ページ毎 目次 表示設定

通常は「目次」を表示していても、記事によって必要ない場合もありますよね。この機能は地味に嬉しいかも(笑)

目次ウィジェット

『Cocoon 1.2.7』より、目次ウィジェットが追加されました。

目次ウィジェット

最近よく、サイドバーにも目次があるブログを見かけ「長い記事のときは便利だなぁ~」って思っていたのですが…

目次ウィジェットが追加されたことで、『サイドバー』や『サイドバースクロール追従』エリアへ入れるだけで、簡単に目次を表示させることが可能になりました。

特にこのページのように目次(見出し)が多い記事は、読者さんにとって便利な機能だと思います。

ちなみにこのブログも、サイドバースクロール追従へ表示させてみました♪

サイドバー 目次

Cocoon設定 → 目次 → 「目次の表示」に  チェックが入っているときに有効な機能です。

ラベル付きブログカード

WordPressテーマ『Cocoon』に変更Simplicity2後継テーマはマジでスゴイ
7月1日『Cocoon(v1.0.0)正式版』が公開!ユーザー登録なしでのダウンロードが開放です。Simplicity2の後継テーマ『Cocoon』を使って感動した機能のゴク一部を紹介します。劇的に読み込み速度がアップ!アクセス集計機能や目次のデフォルト装備でプラグインが減りました。他にも数え切れないほどの機能が標準装備!

CocoonにはURLを入力するだけで ↑ このようなブログカードを作成できる機能がもともとありましたが

Cocoon設定 → ブログカード → 『ブログカード表示を有効にする』に設定している場合に有効です。

『Cocoon 1.2.8』より スタイル▼ → 「囲みブログカード」から、簡単にラベル付きのブログカード作成できる機能が追加されました。

使い方は、ビジュアルエディター画面で1行にURLだけを入力し、URLを選択した状態で スタイル▼ → 「囲みブログカード」から好みのラベルを選びます。

ラベルの種類は「関連記事」「参考記事」「人気記事」「あわせて読みたい」「詳細はこちら」「チェック」「ピックアップ」「公式サイト」と豊富!

URLのブログカードを無効化にする

ブログカード表示を有効化にしていても、時には文字列として表示させたい事もありますよね。

そんな時には、URLの先頭に半角の「!(エクスクラメーション)」を挿入するだけで文字列として表示されます。

  • 公式サイト(ブログカード無効化 ↓ )

https://wp-cocoon.com/not-blogcard/

  • 通常のブログカード(ラベル付き)
ブログカードの枠線やラベルのカラーは、Cocoon設定 → 全体 → キーカラー(サイトキーカラー、サイトキーテキストカラー)が反映されます。

アイキャッチ画像にキャプション表示

『Cocoon 1.2.5』より、アイキャッチ画像にキャプションを設定した場合、こんな感じに表示されるようになりました。

アイキャッチ キャプション対応

キャプションの設定は、アイキャッチ画像を選択したときに、表示させたいテキストを入力するだけです。

キャプションの入力

撮影場所や日時を入れたり、記事タイトルの補足情報を入れたりするのもイイですよね~

このページのアイキャッチにもキャプションを表示させてみましたが、画像上のテキストは目にとまりやすいので、サブタイトル的に使うのもオススメ。

定型文のテンプレート化機能

  • よく使う挨拶文などを登録しておくことができて便利です。

テキストテンプレート

アフィリエイトタグ登録機能

  • 一度登録してしまえば、何度でも使い回せてすごく便利
  • アフィリエイト案件の終了や変更したい場合など、一箇所で変更すれば全ページに反映されます!

アフィリエイトタグ管理

吹き出し機能

  • サンプルもいくつか用意されていますが、好きな画像を用意すれば、何個でもカンタンに作れちゃいます。
吹き出しがデフォルト装備だよ~ん

バージン0.7.0から『Cocoon』の吹き出しが独自イラストに変更されました。

Cocoon 吹き出し

吹き出し用の独自イラストDL

管理画面に『メモ機能』

なにげに超便利な『メモ機能』が(Cocoon 0.7.3)から追加されました。

  • 投稿ページや固定ページの画面に「メモ」ボックスが表示されます。(※表示されない場合、画面右上の「表示オプション▼」から『メモ』に  チェック)

メモ機能

  • 『メモ』に入力した内容は「Cocoon設定」→ 「管理者画面」 → 「投稿一覧設定」→「メモの内容を表示する」に  チェックを入れることで投稿一覧に表示されます。

カラム表示設定

このとき不要な項目の  チェックを外しておくと便利ですよ!

投稿一覧

こんな感じで投稿一覧に『メモ』が表示されるようになりました。いろいろと重宝しそうですね。

Simple Post Notesなどのメモ系プラグインも不要に!

記事内2カラム、3カラム、レイアウト簡単機能

  • 記事を、2カラム、3カラムのレイアウトへ、簡単に作成できる機能です。
  • 『Cocoon 1.2.2』より4種類のレイアウトが追加されました。
    • 2カラム(1:2)
    • 2カラム(2:1)
    • 2カラム(1:3)
    • 2カラム(3:1)

カラム

ビジュアルエディタ画面では、わかりやすいように色分けされていますが、プレビューすると ↓ このようになります。


クリックひとつで、簡単に2カラムも3カラムも作れちゃいます。

これは便利だ♪


●2カラムの中に2カラムを入れると…4カラムも作れます!
●詳しくは Cocoon公式ページへ

テキストを一発で「ボタン」「囲みボタン」へ

ボタンとは、こういうのです

(小)ボタンですよ~ん♪

(中)ボタンですよ~ん♪

(大)ボタンですよ~ん♪

  • テキストを選択し、スタイル▼から「ボタン」を選ぶだけで、簡単にボタンが作れます。
記事作成に使える拡張スタイル。ボタン編。
スタイル拡張ボタンの使い方。サンプルコードと表示例です。
  • 『Cocoon 1.2.1』より、アフィリエイトリンク(aタグを用いたテキストリンク)などを選択し、スタイルから「囲みボタン」を選ぶだけで、簡単にボタンを作成できる拡張スタイルが追加。
囲みボタン機能の使い方。アフィリエイトタグ利用向き。
手軽にボタンリンクを作成できる、囲み型ボタンスタイルの利用方法です。
ビジュアルエディターに スタイル▼ が表示されない場合、ほとんどのケースで「TinyMCE Advanced」プラグインの設定から表示させることができます。詳しくは⇒ビジュアルエディターのスタイルドロップダウンが表示されない(TinyMCE Advanced利用時の設定方法)

マイクロコピー拡張スタイル

  • テキストリンクや、ボタンの周りに補足情報やコメントを表示させる機能が『Cocoon 1.2.3』より追加されました。

例えば、アフィリエイトリンクを「囲みボタン」でボタン化したものに、マイクロコピーで補足コメントを『吹き出し(上)→中央』に入れてみると!

10/31まで送料無料です!

○○○の詳細はコチラ→こんな感じで目立たせることができます。

吹き出しタイプ・テキストタイプが選択できるので、シーンに合わせて使えるのが便利ですね。

マイクロコピー拡張スタイルの使い方。ボタン周りの販促文に。
コンバージョンリンク周りのコピーライティング用のスタイルです。使い方と表示例。

ボックス(囲み枠・飾り枠)デフォルト機能

Cocoonには、デフォルトでボックス装飾の機能がありますが、種類がどんどん追加されてきたので、『Cocoon 1.2.4』時点でのボックスをまとめてみました。(縮小画像です)

  • 使い方は、ビジュアルエディタのスタイル▼から選択するだけです。

ボックス(アイコン)

拡張スタイル ボックス(アイコン)

ボックス(案内)

ボックス(案内)

ボックス(白抜き)

ボックス(白抜き)

ボックス(タブ)

※各種(灰色・黄色・赤色・青色・緑色)あり
ボックス(タブ)

ボックス(付箋風)

ボックス(付箋風)

  1. このように、箇条書きリストボックスで簡単に囲めます♪
  2. ビジュアルエディタでリストをボックスで囲む方法

これだけボックスの種類があると、困ることもないですが・・・

もっとオリジナルなボックス(囲み枠・飾り枠)や、個性的なボックスも使ってみたい方は、こちらのページもご覧下さい

【CSS】シンプルな囲み枠(ボックス)コピペですぐ使える
飾り枠を使って文中や文末に関連記事・まとめ記事、Pickupなど、さり気なく目立たせたい!シンプルで無難な囲み枠・囲い枠(ボックス)を紹介します。CSS・HTMLをコピペでOK!色や太さをお好みでカスタマイズして使って下さいね。新作『黒板風(チョーク付)』と『ホワイトボード風(マーカー付)』自分で作っておいてナンですが…気に入ってます(笑)

新着記事・人気記事の一覧表示

  • ショートコードが用意されています。
  • 引数を指定すれば、タイプ・数・カテゴリを自由に表示することが可能。
  • 上記の「記事内2カラムレイアウト機能」を使えば更に簡単に!

新着記事一覧表示

当ブログのトップページで表示している「カテゴリー別 新着記事一覧」ですが、ちょっとわかりにくいと思うので(汗)

Cocoon公式ページで確認して下さい Cocoon

テーマ設定バックアップ・復元機能

  • 万が一の場合に設定を保存しておくとラクですね。
  • 複数のWordPressや、テスト環境などで同じ設定を使いたい時にも便利

バックアップ

まだまだ山ほど便利な機能がありますが、とても書ききれない(まだ使いこなせていない…)のでこのへんにしておきます(汗)

随時、更新していきますね~

さいごに

『Cocoon』は素晴らしいテーマで、有料のものよりも機能が豊富で優れています!

Simplicityとは互換性が無いものとして(全く無い訳ではないです)、別のテーマとして考えた方がよさそうですね

管理画面から行っていた設定も、ガラッと変わりました!(慣れれば『Cocoon』の方が簡単そう)

Cocoon 設定画面

Simplicityで慣れていた人は、少し戸惑ってしまうかもしれませんが

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

まさに「これでもか!」というほど、便利な機能が詰め込まれた『Cocoon』を使わない理由がないくらいです。

すでにプラグインをいくつか減らすことができたので嬉しいかぎりですが、恐ろしいほどの勢いで、機能がドンドン追加されていき、追いつきません・・・(笑)

『Cocoon』細かいカスタマイズ(まとめ&備忘録)CSSコピペでOK!
ワードプレス無料テーマ『Cocoon』の細かいところをカスタマイズした記録です。メニューにFont Awesomeアイコンを入れたり、目次を中央配置にして背景色の変更をしたり、カテゴリーのラベルを非表示にしたりなど、自己満足的に?細かく変更した箇所などの備忘録です。徐々に増えていく予定!
【CSS】シンプルな囲み枠(ボックス)コピペですぐ使える
飾り枠を使って文中や文末に関連記事・まとめ記事、Pickupなど、さり気なく目立たせたい!シンプルで無難な囲み枠・囲い枠(ボックス)を紹介します。CSS・HTMLをコピペでOK!色や太さをお好みでカスタマイズして使って下さいね。新作『黒板風(チョーク付)』と『ホワイトボード風(マーカー付)』自分で作っておいてナンですが…気に入ってます(笑)
トップへ戻る