【コピペ可】「Cocoon」まるごとカスタマイズ講座【簡単】

【コピペ可】「Cocoon」まるごとカスタマイズ講座【簡単】 Cocoonカスタマイズ

このページでは「Cocoon」のカスタマイズ方法を紹介しています。


こんにちは、さいとう(@S41T0H)です。

寝ログ」でお馴染み、わいひらさんが作られた最強のWordPress用無料テーマ「Cocoon(コクーン)」、あなたはもうお使いでしょうか。

今回はその最高なCocoonにせめてもの恩返しをしたいという思いで僭越ながら用意したCocoonの様々なカスタマイズ方法を紹介します。

どれもコピペで簡単にカスタマイズできるので、あなたのCocoonブログにも導入してみてくださいね。

5ステップで簡単・オシャレなCocoonカスタマイズをしてみよう!

はじめに【Cocoonカスタマイズの注意点】

カスタマイズしてみたけど導入されない!というお問い合わせを非常に多くいただきます。

Cocoonカスタマイズに関するよくある質問「【初心者向け】CocoonにCSSカスタマイズを追加する方法と適用されない場合の注意点。」の記事にまとめましたので、こちらを参考にしてみてください。

【初心者向け】CocoonにCSSカスタマイズを追加する方法と適用されない場合の注意点。
こんにちは、さいとう(@S41T0H)です。 最近、当サイトで掲載しているCocoonカスタマイズについての質問を非常に多く受けます。 その中で多いのが「カスタマイズが適用されない!!!!!!!!」というもの。 せっかく当サイトを見つ...

STEP1: トップメニューをオシャレにカスタマイズ!

すべてのページのトップに表示されるトップメニュー(グローバルメニュー)。

ブログで最も目立つ部分です。

まずはこのトップメニューをおしゃれにカスタマイズできる記事を紹介します。

【Cocoon】メニューデザインをマテリアル風にするCSSカスタマイズ
この記事では無料テーマ「Cocoon」のメニューバーをマテリアル風にデザインするカスタマイズをご紹介しています。

スマホでのトップメニューの見栄えをよくする方法は下の記事で紹介しています。

【Cocoon】モバイルメニューを横並びにしてスクロール可能にするCSSカスタマイズ(β版)
このサイトをスマホ表示すると、上部グローバルメニューが横にスクローラブルになっています。 というわけでこれの実装方法を書いておきます。 Cocoonのモバイルメニューを横並びスクロール可能に。 下記CSSを子テーマstyle.css(...

STEP2: インデックスリストをオシャレにカスタマイズ!

フロントページやアーカイブページに表示されるインデックスリスト(記事一覧ページ)をオシャレにカスタマイズできる記事を紹介します。

お好みの方を導入してみてください。

【Cocoon】で記事一覧をSWALLOW風にぼかしながらフェードインさせるCSSカスタマイズ
こんにちは、さいとう(@S41T0H)です。 最近リリースされたWordPressテーマ「スワロー」 をご存知でしょうか。 有名ブロガー八木仁平さんが監修した有料WordPressテーマで、STORK(ストーク) やハミングバード とい...
【Cocoon】記事一覧をふわっと浮き上がらせるマテリアルデザイン「SANGO」風カスタマイズ
こんにちは。さいとう(@S41T0H)です。 今回は無料WordPressテーマ「Cocoon」の記事一覧をSANGO風にマウスオーバーでふわっと浮き上がらせるマテリアルデザイン風カスタマイズをご紹介します。 Cocoonをマテリアルデ...

STEP3: SNSシェアボタンを便利にカスタマイズ!

SNSシェアボタンを浮き上げて、ページ内のどの部分からでも各種SNSへシェアできるようにカスタマイズできる記事を紹介します。

特に画面の小さいスマートフォン表示時に有効なカスタマイズです。

【Cocoon】スマホ固定フッターにSNSシェアボタンを表示する方法
WordPress用無料テーマCocoonでスマホ表示時にSNSシェアボタンをフッター固定する方法をご紹介します。 読んでる途中にいつでもシェアしやすくなるのでSNS流入の増加が見込めそうです。 Cocoonでスマホ表示時にSNSシェア...

STEP4: 回遊率を上げるブログカード&内部リンクカスタマイズ!

サイト内の回遊率を上げることでSEO効果が見込めます。

閲覧者が他の記事も読んでみたくなるようなブログカードや内部リンクのカスタマイズを紹介している記事はこちら。

▼サイト上部に新着記事・人気記事を表示するカスタマイズ

【Cocoon】新着記事・人気記事をページ上部に表示させてデザインするカスタマイズ
こんにちは、バーチャルブロガー大学生ことさいとう(@S41T0H)です。 今回はわいひらさん作成の最高な無料WordPressテーマ「Cocoon(コクーン)」で新着記事・人気記事を投稿上部に表示させてデザインするカスタマイズ方法を紹介し...

▼ブログカードをおしゃれにするカスタマイズ2選

【Cocoon】ブログカードに「続きを読む」を入れてクリック率上げよう大作戦!
2018/7/24更新 クールなカスタマイズはこちら↓ こんにちは。 最高の無料WordPressテーマ、Cocoon。最近はスキンも充実してきてついに本格リリースか!?と浮足立ってきている昨今である。 今回はそんなCocoonの...
【Cocoon】シンプルでクールな「ハミングバード風」ブログカードを実装してみよう!
WordPressテーマCocoonむけ、オシャレなブログカードカスタマイズ方法を公開中です。

STEP5: 神は細部に宿る。細かいデザインを変更するカスタマイズ!

その他、細部のデザインにもこだわって他のCocoonブログとは一線を画するようなデザインにしてみましょう!

【Cocoon】プロフィールボックスをオシャレにカスタマイズしてみたッ!!
CocoonでプロフィールボックスのデザインをTwitter風にオシャレにデザインするCSSカスタマイズです。コピペで使えます。
【保存版】クリック率を上げる!アフィリエイトリンクのボタン化デザイン6選。
この記事ではアフィリエイトリンクを「思わず押したくなるボタン風」にデザインするCSSを紹介しています。 こんにちは。さいとう(@S41T0H)です。 A8.net やafb、アクセストレード、バリューコマースといったASPによるアフ...
【Cocoon】ページネーション(ページ送り)をおしゃれにするCSSカスタマイズ
Cocoonのページネーション(ページ送り)って、こんなデザインなんですよね。 いささか地味ですね。 今回はこのCocoonのページネーションをデザインしていきます。 ページネーションのCSSカスタマイズ例 というわけで、こんな...
まるで魔法!記事内の画像を自動でちょうどいいサイズに調整してくれるCSSカスタマイズ!
この記事では、ブログ記事内の画像を自動でちょうどいい見やすいサイズに調整してくれるCSSカスタマイズを紹介しています。
WordPressのギャラリーをインスタグラム風にしてみようカスタマイズ。
今回は小ネタです。 WordPress標準機能の「ギャラリー」。 画像を多く投稿するブログではキレイにサムネイルを並べられるのでありがたい機能です。 しかし標準ではいかんせんダサい。 そこでWordPressギャラリーをインスタグラ...
【Cocoon】検索窓をオシャレにカスタマイズ!
このサイトのように角の丸い検索バーを実装するCSSカスタマイズを紹介します。 下記CSSをコピペしてください。 追加方法・適用されない場合は下記記事を参照してください。 .search-box{ margin: 1em; ...
【Cocoon】サイドバーウィジェットのタイトルにFontAwesomeアイコンをつけるCSSカスタマイズ
無料WordPressテーマ「Cocoon」のサイドバーウィジェットのタイトルにFontAwesomeアイコンをつけるCSSカスタマイズ方法をご紹介します。
ブログにおしゃれな水平線<hr>を入れるCSSデザインカスタマイズ
このサイトでは水平線のデザインをこんな感じにしています。 ↑いいでしょう?笑 じつはこの水平線、CSSで一瞬で実装できるんです。 アイキャッチ画像ではCocoonとしていますが、他のWordPressテーマでも使用できるはずです。...
【Cocoon】まるで有料テーマ!ページ全体がふわっとフェードインしてくれる簡単CSSカスタマイズ
この記事ではCocoonでページ全体がふわっとフェードインするアニメーションを実装する簡単CSSカスタマイズを紹介しています。 こんにちは、さいとうです。 特にJINなどで作られたブログを見ていると、ページを開いた瞬間に各要素がふわ...

カスタマイズアイデアは随時追加していくので、お楽しみに!

新着カスタマイズ記事はこちら↓

無料WordPressテーマ「Cocoon」のCSSカスタマイズ方法まとめ。

Cocoonカスタマイズ

【Cocoon】CTAボックスの画像にもリンクさせクリックできるようにする

Cocoonカスタマイズ

【Cocoon】デフォルトのボタン色を変更するCSSカスタマイズ

Cocoonカスタマイズ

【Cocoon】エントリーカードのカテゴリーラベルを非表示にするCSSカスタマイズ

Cocoonカスタマイズ

【Cocoon】スマホ時のロゴ画像ぼやけ対策・サイズの調整方法

Cocoonカスタマイズ

【Cocoon】コメント欄を見やすくカスタマイズしてみたよ【CSS公開】

Cocoonカスタマイズ

【Cocoon】コメントが来やすいコメントフォームにCSSカスタマイズしてみよう!

Cocoonカスタマイズ

【Cocoon】検索窓をオシャレにカスタマイズ!

Cocoonカスタマイズ

【初心者向け】CocoonにCSSカスタマイズを追加する方法と適用されない場合の注意点。

Cocoonカスタマイズ

決定版!WordPressテーマ「Cocoon」を導入したらはじめに読む記事。

Cocoonカスタマイズ

【Cocoon】フォント設定、どれがオススメ? Webフォントで表示速度はどうなる?

Cocoonカスタマイズ

【Cocoon】シンプルでクールな「ハミングバード風」ブログカードを実装してみよう!

Cocoonカスタマイズ

【Cocoon】プロフィールボックスをオシャレにカスタマイズしてみたッ!!

Cocoonカスタマイズ

【Cocoon】特定の固定ページのみ投稿日・更新日表示を消す方法