Twitterにてブログの新着記事更新情報をお届けしてます!(ここをクリックするとTwitterへ)

Cocoonの使い方情報まとめ

Cocoonの使い方情報まとめCocoon

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

Cocoonの評価

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

導入するメリット

Cocoonにテーマ変更するメリット【ありがとうSimplicity】

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

Simplicityとの比較

Simplicityへ移行したらメリット盛りだくさんだった

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

Xeory Baseとの比較

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

 

初期設定について

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

ダウンロード方法

【無料テーマ最高の出来栄え】迷わずCocoonをダウンロードする方法

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

解析設定

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

Cocoon導入後のアナリティクスとタグマネージャーで設定変えたポイント

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

ページ表示の高速化設定

ブログ高速化のためにやった5つの方法|WordPressテーマはCocoon

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

カスタマイズについて

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

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

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

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

デザインで悩んだら

【Cocoonを使ってブログ作り】サイトのテーマを決めないと大変なことに

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

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

見出しを変えたい

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

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

ブログカード

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

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

グローバルナビ

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

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

サイドバー

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

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

収益化について

Cocoonの広告位置調整

【収益倍加計画】WPテーマのコクーンの広告位置を調整してCTR倍増

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

商品リンクの工夫

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

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

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

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

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

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

CDN導入のためにJetpackとCloudflareを使った感想

CDNを導入すべくJetpackとCloudflareを使ってみました。使用感でいうとJetpackはとにかく簡単で安定感あり。Cloudflareはかなり暴れ馬でめちゃくちゃ速くなったけどいろいろエラーは吐き出している。サーバーが落ちる可能性も考えると、どちらがいいかしっかりと考える必要がありそうです。
サイト高速化

ブログ高速化のためにやった5つの方法|WordPressテーマはCocoon

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

Cocoonを高速化する際に必須の画像最適化方法|WPプラグイン

画像最適化すればほとんどのサイトでページ表示を高速化できます。「Compress JPEG & PNG images」プラグインで簡単にできます。設定は簡単で、APIキーを取得して一括最適化をお願いするだけ。ただし、枚数制限があるので有料となるので、無料でできるお得な方法もまとめています。
サイト高速化

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

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

エックスサーバー利用者なら簡単にサイト高速化ができる方法を伝授!

サイトを高速化するために、エックスサーバーのmod_pagespeedの設定をONにしました。2クリックでできる、最も簡単な方法だと思います。画像を多用してわかりやすいように解説しています。効果としてはPageSpeed Insightsの点数がだいたい5点くらい上がるようなイメージです。
サイト高速化

Headをすっきりさせて読み込みを早くするお勧めのWPプラグイン

「レンダリングをブロックする JavaScript を除去」「CSS 配信を最適化」の処理に手を焼いているようでれば解決策として考えられるのがhead部分をきれいにすること。PageSpeed Insightsの得点をあげる奥の手としてプラグインを使って簡単に解決した方法をまとめています。
Cocoon

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

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