WordPress Cocoon

Cocoonのカスタマイズまとめ

当サイトはアフィリエイト広告を利用しています。

当ブログでは2018年4月からWordpressテーマ「Cocoon」を使用させてもらってます。無料なのが信じられないぐらい良いテーマですよね。

マイペースにポチポチとカスタマイズしているのですが、記事が溜まってきたので分かりやすいようにまとめてみました。どなたかの参考になれば幸いです。

設定関連

【Wordpress】Cocoonの高速化設定が神すぎる!10秒でブログが爆速に!

サイドバーのカスタマイズ

【Cocoon】サイドバーの見出しデザインをカスタマイズ

【Cocoon】サイドバーのカテゴリーのデザインをカスタマイズ

【Cocoon】タグクラウドのデザインをカスタマイズ

【Cocoon】プロフィールボックスをSANGO風にカスタマイズ

【Cocoon】プロフィールボックスをJIN風にカスタマイズ

【Cocoon】検索窓をカッコよくカスタマイズしてみた

【Cocoon】サイドバーのSNSフォローボタンをカスタマイズ

【Cocoon】サイドバーのアーカイブでドロップダウンをカスタマイズ

【Cocoon】サイドバーにおすすめ記事一覧を表示する方法

ヘッダーのカスタマイズ

【Cocoon】ヘッダーのシンプルなカスタマイズ

フッターのカスタマイズ

【Cocoon】フッターのシンプルなカスタマイズ

記事関連のカスタマイズ

【Cocoon】記事の見出しデザインをカスタマイズする方法(h2〜h6)

【Cocoon】記事のタイトル周りをカスタマイズ

【Cocoon】目次のデザインをカスタマイズしてアニメーションも追加してみた

【Cocoon】文字の行間と段落の間隔を調整するカスタマイズ

【Cocoon】吹き出しのカスタマイズ&設定方法

【Cocoon】ブロックエディタに好きな色を登録する方法

【Cocoon】アフィリエイトリンクをオリジナルボタン化する方法

インデックスのカスタマイズ

【Cocoon】記事一覧をオシャレにカスタマイズする方法

コメント欄のカスタマイズ

【Cocoon】コメント欄をおしゃれにカスタマイズ

ページネーションのカスタマイズ

【Cocoon】ページネーション(ページ送り)をカスタマイズ

商品リンクのカスタマイズ

【Cocoon】Amazon、楽天の商品リンクをカスタマイズする方法

その他のカスタマイズ

【Cocoon】ヘッダー下にピックアップコンテンツを表示する方法

WordPress
\記事が役に立ったらシェアしてね/
うぇぶあしび

comment

  1. キヨスケ より:

    Cocoonのカスタマイズでこちらのサイトにたどり着きました。
    役立つ記事ありがとうござます。
    もしご存知でしたらアドバイスをお願いできますでしょうか。
    ヘッダーの設定を「センターロゴ(スリムメニュー)」にしていますが、もう少し高さをうぇぶあしびさんのように狭くさせたいのですが、画像をいくら小さくしても高さが変わりません。
    CSSでカスタマイズしないといけないものだとしたら、どんな方法があるのでしょうか?
    教えて頂ける助かります。
    宜しくお願いします。

    PS)モバイルのヘッダーのロゴサイズは、カスタマイズで小さくできましたが、こちらもヘッダー自体の高さは、デフォルト設定から変わりません(泣)

    • DICEDICE より:

      コメントありがとうございます!
      サイトを見てみないと分かりませんが、ブラウザの開発者ツールでCSSを確認されてみてはいかがでしょうか?
      開発者ツールが使えるようになるとカスタマイズもしやすくなるのでぜひ挑戦してみてください。

  2. キヨスケ より:

    DICEさん、アドバイスありがとうございました。
    そうように勉強してみようとは思ってもみなかったです。大変助かりました。

  3. れんとん より:

    Webデザインの勉強と合わせてWordPressブログを始めたのですが、立ち上げにあたってこちらのまとめを大変参考にさせていただきました。
    読みやすくまとめていただき、励みになりました。ありがとうございます。

    ちなみに同じくうちなんちゅです笑 東京で頑張っています。
    あしびーの響き懐かしく感じました。

タイトルとURLをコピーしました