【10/22夜時点あと86記事追いかけ更新中!

【随時更新】WordPressテーマ「Cocoon」に実施したカスタマイズまとめ

ブログ運営のメモとか
スポンサーリンク

先日、ブログテーマをCocoonに変更しました。

関連記事:シンプルイズベスト。ブログテーマを「Cocoon」に変更しました!

自分のメモがてら、カスタマイズ内容をブログで記事として公開しておきます。

同じくCocoonに変更して情報を求めている方は参考にしてください。
(各項目内に併記してあるURLはカスタマイズの際に参考にしたサイトのURLです)

そして、ここに書いてない良きカスタマイズがあれば教えてください!

ロゴを自前のものにする

まず手を付けたのがこれ。

あんまり影響ないと思いますが、毎回表示されるものなので圧縮してサイズを落としています。

また、ブログテーマを変えたタイミングでキャッチフレーズを

「いいね!」を集積する個人メディア

に変更しています。

ヘッダーのロゴを画像に変更する方法
ヘッダーにあるロゴを用意した画像に変更する設定方法です。

記事とウィジェットの見出しをカスタマイズ

はじめはデフォルトデザインの見出しで運用していましたが、簡単に差別化できる部分なのでカスタマイズしました。

このへんのデザインはしっくりくるまで試行錯誤すると思います。

見出しのデザインテンプレートと、サイドバーウィジェットの見出しのカスタマイズは、それぞれ以下のリンク先を参考にしました。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。
[無料WordPressテーマ] Cocoonの見出しカスタマイズ用に主なclassセレクタを調べてみました | unlimited chaos
リリース当初から何かと話題になっている無料WordPressテーマのCocoonですが、Simplicityと同様に機能はこれでもかってくらい盛り沢山なのに対して、見た目的にはちょ...

GoogleタグマネージャのトラッキングID設定

せっかくなので、このタイミングでGoogleタグマネージャを導入しました。

以下に貼ってあるCocoonのマニュアルページを見ながらやれば迷うことはなし。

Googleアナリティクスもこれで同時に設定されるので追加の処置は必要ありません。

GoogleタグマネージャのトラッキングID設定方法
タグマネージャ登録をするとアナリティクスのトラッキングID登録は不要です。

関連記事:CocoonでAMP化させたブログのGoogle Analytics解析を正確に集計するためにやったこと

プロフィール画像や情報、SNSページの設定

ツイッターやインスタグラム等のSNSボタンに自分のアカウントを設定。

「Amazon」のところには「ほしいものリスト」へのリンクを設定することができます。

これまで外部公開用のほしいものリストは作ってなかったので、これを機に作りました。

プロフィール画像やプロフィール情報、SNSページを設定する方法
Cocoonでは、記事の投稿者ごとにプロフィールを設定することが可能です。また、自前のプロフィール画像設定機能も保持しており、手軽に設定できるようになっています。

アクセス集計機能の設定

基本的には以下のCocoonマニュアルページの通りに設定。

アクセス集計はちょっとだけ負荷がかかるようですが、サイドバーの人気記事表示に使いたいので有効化しました。

アクセス集計機能の説明
Cocoonのアクセス集計機能に関する解説です。使用することで、管理者はアクセス状況を把握しやすくなるという利点もありますが、多少なりともサーバーに負荷をかけてしまうという難点もあります。

Googleアドセンスのコードを入れる

基本的には以下のCocoonマニュアルページの通りに設定。

広告の配置は今後試行錯誤しながら見直していくつもり。

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

グローバルナビのメニューを設定

Cocoonはページトップにアピールしたいリンクを配置することができます。

今後、ここには「はじめに読んで欲しい記事10選」とかをつくって貼るのもいいかも。

自分なりの特色が強く出る部分と思うのでカスタマイズするのがたのしみ。

グローバルナビのメニューを設定する方法
主にパソコンなどで表示されるグローバルナビメニューの設定方法です。サブキャプション機能で補足説明を入力することも可能です。

AMP対応

CocoonはAMP化が標準搭載されています。

なので、AMP化は設定ページでチェックボックスにチェックを入れるだけ。

AMP化のためのプラグインは不要です。

AMPのチェックを入れてから数日待てば、GoogleにAMPページがインデックスされていきました。

テーマをAMP対応する方法
Cocoonテーマの投稿・固定ページをAMP化してモバイル端末での表示を速くする方法です。

ロゴ表示部分の幅を狭くする

細かいところですが、ロゴ表示部分の幅をデフォルトよりも狭めに変更しました。

一度250pxに指定してから、やっぱ150pxに落ち着いています。

これはほとんど自己満足の世界。

ヘッダーのロゴを画像に変更する方法
ヘッダーにあるロゴを用意した画像に変更する設定方法です。

フォントを変える(メイリオにした)

Cocoonはフォントを変更できるので、メイリオに変更しました。

これもかゆいところに手が届いていて嬉しい機能。

サイトの全体のフォントを変更する方法
Cocoonデフォルト機能のサイトフォント変更方法です。管理画面から手軽に変更することが可能です。

ブログトップに検索を入れる

これはずっとやりたかったカスタマイズ。

前のテーマではできなかったカスタマイズだったので、ものすごくうれしい。

Cocoonデフォルトのウィジェット機能まとめ
Cocoonのデフォルト状態で利用できるウィジェット機能を見やすくまとめてみました。

検索窓に表示するデフォルト文字列の設定

2018年9月時点ではCocoon公式の機能としてはまだないようなので、以下のフォーラムを参考に実装しました。

ブログ内検索の中の文字列変更
お世話になっております。 ウィジェットで「検索」がありますが、検索BOXの中に表示される文字列が「ブログ内を検索」となっています。 これを「サイト内を検索」という文字列に変更したいのですが。 テーマと関係無いかもしれませんが、よろしければお教えください。

記事の中に著者情報を入れる

控えめながら存在感をアプールできる機能があったので、設定しておきました。

Cocoonデフォルトのウィジェット機能まとめ
Cocoonのデフォルト状態で利用できるウィジェット機能を見やすくまとめてみました。

フッターのAll Rights Reserved.の表示をカスタマイズ

デフォルトはブログをはじめた年である「2015」でしたが、ここを「2015–2018」に変えました。

あわせて、一番下までスクロールしてくれた人向けのメッセージも一言載せました。

フッターデザインの変更方法
フッターにある「ロゴ」と「フッターメニュー」と「クレジット表記」の配置を変更する設定方法です。

カエレバの表記を変更

Cocoonではなにもしなくても、デフォルトで「カエレバ」とか「ヨメレバ」の表示がいい感じになります。

それを活かすために「Amazonで最安値をチェック!」のような表記を「Amazon」だけに変更しました。

これは「Search Regex」というプラグインで一括置換しました。

手書きで入れていた「最終更新日」を消す

Cocoonでは、ブログテーマ側で

  • 投稿日
  • 最終更新日

を表示するようになっています。

これまでのテーマはその機能がなかったので、手書きで「最終更新日」を書き加えていましたが、不要になったので消しました。

これも「Search Regex」で処理。

ワイルドカードの書き方はこの記事を参考にしました。

Search Regexで全記事の文字列一括置換!正規表現を使えばhtmlタグも一発!
最近、テンプレートを変えようかなと思ったことがあります。実際に変更はしなかったのですが、その時文字列を一気に変換する必要があるなと!と感じました。そんな時に発見したのがWordPressのプラグインのSearch Regexです。正規表現も使えるのでhtmlタグも一発です。

コメント欄とトラックバックを消す

個人的にはつかっていない機能なので、設定から消しました。

AmazonほしいものリストをつくってCocoonに公開

公開用の「ほしいものリスト」を作成して公開しました。

ほしい物リスト

参考にしたのは以下の記事。

Amazonのほしい物リストを匿名で公開、送ってもらう方法 - ムトウの日記
こんにちは、ムトウです! 今回は、タイトルにあるように、Amazonで欲しい物リストを公開する方法・手順について解説していきたいと思います! ところで、Amazonの欲しいリストに入れている商品がいきなり届いたらどう思いますか?めちゃくちゃ嬉しくないでしょうか?僕なら飛んで喜びます。 というのも、先日、ツイッターを見...

関連記事:新しいコミュニケーションツールとして「Amazonほしいものリスト」をつくりました!

AMP用のアナリティクス設定

AMP化するとアナリティクスの設定変更が必要なので、以下を参考に行いました。

GoogleタグマネージャでAMP用のトラッキングIDの設定方法
Cocoonテーマで、Googleタグマネージャを用いてAMPページの計測を行う方法です。通常のWEB用コンテナとは別に、AMP用コンテナを作成して、IDを新規作成する必要があります。

Cocoon設定「投稿」タブ内で関連記事をオンにして「AdSense関連コンテンツユニット」にチェック

記事下に「関連コンテンツ」の広告パーツを表示するようにしました。

さらに表示数を3行✕4列にして、さらにAMPでもいい感じに表示できるよう出し分けの設定をしました。

CSSで沈み込むボタンの実装

Cocoon自体のカスタマイズとはまた別だけど、最近やったのがこれ。

好きなところでボタンが作れて便利だし、沈み込むギミックがかわいいです。

参考にしたのはdelaymaniaさん。デザインよくてめっちゃ痺れる憧れる……!

CSSでボタンを押したときに沈むようなデザインにする方法
近年、CSSでボタンをデザインすることが多くなりました。 ボタンのデザインが出来たら、次はマウスオーバーしたときのアニメーションもつけたくなりますよね。 今回はシンプルに「ボタンが沈み込む」ような動き

No Imageの設定

アイキャッチがない記事などがデフォルトのNo Image画像だとカッコ悪いので、かっこいいクロワッサンの画像を投入しました。

NO IMAGE画像を変更する方法
Cocoonデフォルトの味気ないNO IMAGE画像を自前で用意した画像に入れ替える方法です。

サイトの高速化設定をする

Cocoonはサイトの高速化設定をチェックボックスひとつで行うことができます。

PHPバージョンが古い状態で試したらブログが真っ白になって焦りましたが、最新にしてから再度試したらうまくいきました。

ちなみに、Jetpackの圧縮機能ももともとONにしています。

画面外の画像読み込みをあえて遅らせることでページ表示を高速化するプラグイン「LazyLoad」と同じ機能はJetpackでも実現できてるっぽいので、LazyLoadはこのタイミングで消しました。

関連記事:WordPressブログでつかってるプラグイン14個(2018年5月版)。Cocoon導入で5個減。

関連記事:ネットオウル「ミニバード」のPHPバージョンを最新版にアップデートする方法

Cocoonおすすめのサイト高速化設定
Cocoonと相性の良いページの高速化設定方法の紹介です。Cocoonデフォルト機能だけでも十分にPageSpeed Insightsで高得点が狙えます。加えて、ページキャッシュプラグインや、画像最適化プラグインを利用すれば、より良い良いパフォーマンスを目指すことも可能かと思います。

まとめ:Cocoonの良さを消さない範囲で自分色に。

今回のカスタマイズで気をつけたのは「できるだけCocoonの良さを消さない」こと。

カスタマイズでごちゃごちゃさせてしまっては、せっかくのテーマの持つ良さが失われてしまうので。

また何かカスタマイズしたら追記します!

お知らせ。

#旅 #書評 #ときめくモノ #キャンプ #ベランダ菜園 #iPad #α7II