cocoonのデザイン変更しました！カスタマイズのいろいろ

現在当ブログでは『cocoon』というテーマを使用させていただいております。

最近設定の変更ができないというバグが生じてしまい
ずっとデザインを変更したいのにできない状態でした。

しかし『cocoon』制作者のわいひらさんに不具合報告として相談したところ
わいひらさんの神対応により問題が解決したので
これを機にブログのデザインをがら～っ！と変更しちゃいました！

今回はcocoonのカスタマイズ方法が記載されている
おすすめのページをまとめたいと思います。

エントリーカードに影を入れたり浮かせたり

トップのロゴアイコンであったり、色合いなどを変更したのはもちろんのこと
今回は細やかな部分も変更したんですね～。

まずはじめにこれは絶対やりたい！と思っていたことは

エントリーカードに影をつけること！！

エントリーカードにマウスポインターが当たったときに何かしらのアニメーションをつけること！

エントリーカードとは、トップから見た記事一覧のことです。

やりたかったこと、やってやりました！

記事にマウスポインターを合わせると・・・

記事が浮くぅ～↑↑
影がつくぅ～→←

記事にマウスポインターを合わせるとシュンッとナチュラルにかっこよく記事のエントリーカードが浮いてくれるんですよね。

曽幅りょう

さりげないオシャレだ～。

↓このカスタマイズ方法はこちらのページを参考にさせていただきました！↓

【Cocoon】記事一覧をふわっと浮き上がらせるマテリアルデザイン「SANGO」風カスタマイズ

こんにちは。さいとう（@S41T0H）です。今回は無料WordPressテーマ「Cocoon」の記事一覧をSANGO風にマウスオーバーでふわっと浮き上がらせるマテリアルデザイン風カスタマイズをご紹介します。Cocoonをマテリアルデザイン風

s41t0h.jp

上記のページに記載されているコードを
cocoon子テーマのスタイルシートに書き込むだけ！

手が込んでる風なのに、上記で紹介したページのおかげさまさまで初心者の私でも簡単にカスタマイズできちゃいました。

ページ送りをオシャレにする

↓ページ送りも同じくリスブロさんを参考にさせていただきました！↓

【Cocoon】ページネーション(ページ送り)をおしゃれにするCSSカスタマイズ

Cocoonのページネーション（ページ送り）って、こんなデザインなんですよね。いささか地味ですね。今回はこのCocoonのページネーションをデザインしていきます。ページネーションのCSSカスタマイズ例というわけで、こんなかんじにしてみました

s41t0h.jp

こちらもスタイルシートにコードを貼り付けるだけで
ページ送りがシャレオツになっちゃいます！

その他カスタマイズ

その他も細々とデザインを変更したのですが
説明しきれない！
でもだいだいのことは、リスブロさんと以下の記事を参考にさせていただきました。

WordPressテーマ「Cocoon」カスタマイズまとめ！初心者でもCSSコピペでおしゃれに

こんにちは！無料WordPressテーマ「Cocoon」を超おすすめしているはまちゃん（@wakuwakuke…

wakuwaku-keigo.com

Cocoonスキンでカスタマイズすると映えるポイントまとめ

Cocoonのスキン機能でカスタマイズするなら、ココを変更すると効果的という部分をまとめてみました。これらをカスタマイズすることにより、Cocoonっぽさをかなり減らすことができるかと思います。

wp-cocoon.com

とっても分かりやすかったのでおすすめです！

cocoonのカスタマイズをする際には
参考にしてみてはいかがでしょうか！

読んでいただき、ありがとうございました。

もし今回の記事を気に入っていただければ、ランキングのクリックや記事の購読・下の方にあるはてブ追加やSNSのフォローをお願いいたします。

励みになりますので、どうぞ宜しくお願いします。