Cocoonの使い方情報まとめ

Cocoonの使い方情報まとめ Cocoon

WordPressの最強無料テーマであるCocoonの情報を取り扱っております。

ブログ運営に関するおすすめ記事

ブログ運営に関わる情報について書いた記事をリストアップしておきます。気になる情報があれば、ブックマークなどしてゆっくり楽しんでみてください。

Cocoonの評価

テーマ選定に悩んだ際に「どうしてCocoonが良いのか」について説明しています。

導入するメリット

Cocoonにテーマ変更するメリットをまとめてみました。

Cocoonにテーマ変更するメリット【ありがとうSimplicity】
Simplicityの作者、わいひらさんがCocoonという新しいテーマを提供してくれています。今回はCocoon導入を迷われている方に背中を押すメリットについてまとめてみました。無料テーマでここまでやられると有料テーマは商売上がったりですよ!

Simplicityとの比較

Simplicityへ移行したらメリット盛りだくさんだったという話です。

Simplicityへ移行したらメリット盛りだくさんだった
Xeory BaseからSimplicityへ。WordPressのテーマを変更してみました。そして伝説へ的なノリです。AMP対応が簡単だし、広告なども思ったように挿入できるようになったので収益化が計りやすくなりました。実際にSimplicityにしてから収益が伸びました。

Xeory Baseとの比較

かつては、Xeory Baseというテーマを使っていました。シンプルすぎて、自分でカスタマイズする必要があったのですが、その時の経験から、CSS/HTMLがいじれるようになりました。何事も経験であります。

Xeory Baseの情報まとめ
WordPressの無料テーマである【Xeory】に関する情報をまとめたカテゴリページです。Cocoonユーザーとしてはお勧めまではできないものの、Xeoryなしにブログは開設できなかった。

初期設定について

Cocoonを利用する上で知っておきたい初期設定について解説します。

ダウンロード方法

迷わずCocoonをダウンロードする方法についてまとめました。とはいえ、公式HPがかなり丁寧に解説しているので、もはやこの記事は不要かと思います。

【無料テーマ最高の出来栄え】迷わずCocoonをダウンロードする方法
無料テーマのCocoonのダウンロード方法を解説したページです。また、最初に選ぶテーマとして、有料か無料か悩まれている、あるいは無料テーマをダウンロードしたけどしっくりこない、という方に、最初は有料テーマを利用することを検討してもらう、ことについても書いています。注意点として必ず親テーマと一緒に子テーマもダウンロードして、子テーマを利用するようにしてください。

解析設定

ブログを本格的にやるなら「訪問者」を増やすことを考えていきます。

ぶちくま
ぶちくま

私は、少し捻くれているので訪問者が増えなくてもある程度の小銭が稼げれば十分だとは思っています。それでも、やはりある程度の流入は必要です。

タグマネージャとアナリティクス

Cocoon導入後のアナリティクスとタグマネージャーで設定変えたポイントについて解説しています。アナリティクスはそれほど面倒ではないのですが、タグマネージャーに関してはいまだに苦手意識あります。

Cocoon導入後のアナリティクスとタグマネージャーで設定変えたポイント
WordPress無料テーマで最強のCocoonを利用することになりました。Cocoonは設定が簡単な上に、製作者のわいひらさんが親切なこともあって、Cocoon利用者のフォーラムは毎日大にぎわいです。いいね。

ページ表示の高速化設定

ブログ高速化のためにやった5つの方法についてまとめています。

ブログ高速化のためにやった5つの方法|WordPressテーマはCocoon
サイト高速化のためにやることはシンプルです。要は、画像を減らして圧縮する。これだけでほぼ解決します。体感速度はまったくトラブルなし。ただ、それでもPageSpeed Insightsの評価は残酷なものです。なんとか、コードやカスタマイズ不要で高得点を出した記録を公開します。

カスタマイズについて

Cocoon以外にも応用できそうなカスタマイズ関連の記事です。

初心者でもできるカスタマイズ

Cocoonカスタマイズは初心者でも簡単にできるという話。そもそも、私も初心者みたいなものでしたからね。誰だって、コピペでできます。

ぶちくま
ぶちくま

ただ、意味があるカスタマイズになると、デザインだけではなく様々な分析が必要になってくるので、この辺りは情報収集と解析、考察が必要になります。

【Cocoonカスタマイズ】超初心者でも自分好みに「見出し」を変える!
今回は無料のWordPressテーマで国内最高峰のクオリティの「Cocoon」を使った見出しのカスタマイズ方法を、これでもかってくらいに画像を使って説明してみました。ほぼ何もできない状態の初心者の方でも、きっと自由にカスタマイズできるくらいのわかりやすさを目指したつもりです。まずはその第一段階、Google Chromeのデベロッパーツールの使い方も説明しました。

デザインで悩んだら

サイトのテーマを決めないと大変なことになるという話。私自身は、まずは「自分が好きなサイト」を作るのがモチベーションを保つ上でも、また、自分と似たようなペルソナをターゲットにする上でも大事だとは思います。

ぶちくま
ぶちくま

しかし、本格的にマーケティングなどして、自分とは違うターゲット層にもアプローチをかける必要性が出てくると、サイトデザインはかなり重要です。この辺りのことを勉強しています。

【Cocoonを使ってブログ作り】サイトのテーマを決めないと大変なことに
Cocoonを使ったブログ作りを解説しています。今回はサイトのイメージを固めて、サイト全体のカラーリングについて解説しています。また、設計図を作ることで、ブレなく、統一感のあるサイトを作成することができます。マテリアルデザインとフラットデザインの特徴、メリット/デメリットについても。

CSSコード付きカスタマイズ記事

カスタマイズ記事です。たまに、参考にしてくれる人がいるので、消すに消せない。

見出しを変えたい

Cocoonを超初心者でも自分好みに「見出し」を変える方法についてまとめました。見出しはカスタマイズの中でも、かなり簡単な方ですし、その上、記事内での重要性・メッセージ性は高いので是非とも挑戦したいところです。

【Cocoonカスタマイズ】超初心者でも自分好みに「見出し」を変える!
今回は無料のWordPressテーマで国内最高峰のクオリティの「Cocoon」を使った見出しのカスタマイズ方法を、これでもかってくらいに画像を使って説明してみました。ほぼ何もできない状態の初心者の方でも、きっと自由にカスタマイズできるくらいのわかりやすさを目指したつもりです。まずはその第一段階、Google Chromeのデベロッパーツールの使い方も説明しました。

ブログカード

ブログカードは回遊率をあげるためにシンプルが1番という記事です。今でこそ、Cocoonが便利すぎるので、何も手をつけずに活用できますが、他サイトとの差別化のためにも拘ったりしたものです。

ぶちくま
ぶちくま

ただ、情報は多すぎず、あくまでもリンクであることを示せればいいと最近では思っています。

【Cocoon】ブログカードは回遊率をあげるためにシンプルが1番!
WordPressの無料テーマ、Cocoonのカスタマイズ記事です。今回は、「ブログカード」という、リンクを貼るだけで記事のアイキャッチとタイトル、本文説明(snippet)を抜き出す便利な機能になります。目的は何より回遊率をあげること。ユーザーを求めている情報まで届けること。

グローバルナビ

サイトの水先案内、グローバルナビもかっこよく仕上げる方法についてまとめました。この辺りは、CSSでコンテンツを動かすことに手を出し始めて、もはや収集がつかなくなり始めた頃です。

ぶちくま
ぶちくま

グローバルナビが動いて、一体、誰が得するというのか。。。

サイトの水先案内グローバルナビもかっこよく仕上げる【Cocoonカスタマイズ】
WordPress無料テーマ最強のCocoonのカスタマイズ記事です。グローバルナビを変更したい方に対して、CSSへの理解度毎に設定のポイントを解説しています。Style CSS改編不要のものからアニメーションを駆使して魔改造する上級編まであります。CSSコードのコピペで使用できるし、解説もあるので自分用にデザインしてもOKです!

サイドバー

どうせ読まれないサイドバーを有効活用する方法です。ようやく、カスタマイズは「読者が読みやすい」ようにすることだと気づいて、サイト回遊率などを意識して取り組み始めました。サイドバーに関しても、それぞれのサイトで意図することは違うと思いますが、何かの参考になれば幸いです。

どうせ読まれないサイドバーを有効活用する方法|Cocoon改造
サイドバーはまったく読まれてないコンテンツになるわけですが、これを少し目立たせて存在アピールするカスタマイズを行いましたので共有投稿します。Cocoonのモバイルスライドインメニューボタンの改造記事になります。「サイドバー」のアイコンと文字を変えて、別の要素に切り替えて内容を示すというカスタマイズです。

収益化について

ある意味で、一番モチベーションに影響を与える収益化についてまとめました。

Cocoonの広告位置調整

WPテーマのコクーンの広告位置を調整してCTR倍増したという話。ただ、広告には流行り廃りがあって、増やせばいいときと、減らして質を高める時期とあります。この辺り、広告業界に流れるお金の量にも関連があるようです。

【収益倍加計画】WPテーマのコクーンの広告位置を調整してCTR倍増
CocoonはWordPressの無料テーマの中でも随一のクオリティを誇っていますが、広告戦略も簡単にできるので初心者におすすめのテーマとなっています。Google Adsenseの自動広告とマニュアル広告を併用させて、さらに記事中の好きな場所に、ショートタグで簡単に広告挿入できるのも魅力的です。アフィリエイトタグも使えて、定型文入力はお手のものです。

商品リンクの工夫

Amazonと楽天商品リンクモバイル表示をカスタマイズしました。我ながら、モバイルの商品リンクボタンはよくできたなと思っています。他所で使われているところはみたことありませんが。

Amazonと楽天商品リンクモバイル表示をカスタマイズ|Cocoon
Cocoonの商品リンクが素敵にアップデートされたので、モバイル版の形式だけ少しカスタマイズしてみました。Yahooのリンクだけ少し大きいなと感じたので、それぞれ同じ大きさにして、あまりみない丸いボタン風にしてみました。簡単なコードにしたので、さらにカスタマイズを深めてください。
カスタマイズ

Amazonと楽天商品リンクモバイル表示をカスタマイズ|Cocoon

Cocoonの商品リンクが素敵にアップデートされたので、モバイル版の形式だけ少しカスタマイズしてみました。Yahooのリンクだけ少し大きいなと感じたので、それぞれ同じ大きさにして、あまりみない丸いボタン風にしてみました。簡単なコードにしたので、さらにカスタマイズを深めてください。
カスタマイズ

怪しさMAXのリンクユニット風箇条書きリスト|読者を困惑させてもメリットなし

リンクユニット風の箇条書きリストをつくってみました。作成者の自分でも間違えてリンクユニット踏むレベルです。需要の有無よりもリンクユニット のカラー設定についての考察が役に立つと思われます。CSSコピペOKです。ご活用ください。
サイト高速化

キャッシュ最適化のためにWP Fastest Cacheを導入

ページキャッシュをつくると、サイトの表示速度が改善されます。プラグインを導入するだけで簡単にできるので初心者の方にお勧めの方法です。Googleのサイト速度評価「PageSpeed Insights」でも10点ほど上がる効果がみられました。ただし、キャッシュ導入は一歩間違えると大きなエラーが起きるので注意が必要です。
Cocoon

どうせ読まれないサイドバーを有効活用する方法|Cocoon改造

サイドバーはまったく読まれてないコンテンツになるわけですが、 これを少し目立たせて存在アピールするカスタマイズを行いましたので共有投稿します。 Cocoonのモバイルスライドインメニューボタンの改造記事になります。 「サイドバー」のアイコンと文字を変えて、別の要素に切り替えて内容を示すというカスタマイズです。
Cocoon

RinkerをAMPでも崩れない程度にカスタマイズに成功【Cocoon限定】

アフィリエイト商品の管理とリンク生成がとても便利なRinker。 AMPだと表示が大きく崩れたのでCocoon使用者限定にはなりますが、 シンプルだけど使い勝手のいいデザインになりました。
Cocoon

サイトの水先案内グローバルナビもかっこよく仕上げる【Cocoonカスタマイズ】

WordPress無料テーマ最強のCocoonのカスタマイズ記事です。 グローバルナビを変更したい方に対して、CSSへの理解度毎に設定のポイントを解説しています。 Style CSS改編不要のものからアニメーションを駆使して魔改造する上級編まであります。 CSSコードのコピペで使用できるし、解説もあるので自分用にデザインしてもOKです!
Cocoon

【Cocoon】ブログカードは回遊率をあげるためにシンプルが1番!

WordPressの無料テーマ、Cocoonのカスタマイズ記事です。 今回は、「ブログカード」という、リンクを貼るだけで記事のアイキャッチとタイトル、本文説明(snippet)を抜き出す便利な機能になります。 目的は何より回遊率をあげること。ユーザーを求めている情報まで届けること。
Cocoon

Cocoonカスタマイズは初心者でも簡単にできる【おすすめ一覧】

WordPress無料テーマ「Cocoon」の初心者でもできるカスタマイズ部とその方法をまとめてみました。見出しも本文だけではなく、「サイドバーウィジェット」「コメント」「関連記事」などもデザイン可能。ボタンやバッジ、ボックスデザインやCocoonおすすめ機能のカルーセルのCSS編集などを掲載しています。
Cocoon

【Cocoonカスタマイズ】超初心者でも自分好みに「見出し」を変える!

今回は無料のWordPressテーマで国内最高峰のクオリティの 「Cocoon」を使った見出しのカスタマイズ方法を、 これでもかってくらいに画像を使って説明してみました。 ほぼ何もできない状態の初心者の方でも、きっと自由にカスタマイズできるくらいの わかりやすさを目指したつもりです。 まずはその第一段階、Google Chromeのデベロッパーツールの使い方も説明しました。
スポンサーリンク
タイトルとURLをコピーしました