『JIN』や『SANGO』に負けたくない!無料WordPressテーマ『Cocoon』をカスタマイズしてみた!

スポンサーリンク
平泉悠李
平泉悠李

こんばんは。最近WordPressテーマで悩んでいた平泉です。

 

僕が今使っているテーマは『Cocoon』なのですが、どうしてもぱっと見のデザインが『JIN』や『SANGO』に劣っているように見えてしまいます。

 

それで「そろそろ有料テーマに変えないとダメかなぁ」と思っていたわけですが、待てよと。

『Cocoon』を最大限カスタマイズすればどこまで行けるんだ!?と。

 

というわけで今回は、『Cocoon』をカスタマイズしてみたので、そのことについて書いていきたいと思います。

よろしくお願いします!

 

こんな部分をカスタマイズしました

どこをどうカスタマイズしたのか、変更したのか、順番に紹介します。

 

サイトのメインカラーを変更しました。

まず、サイトのメインカラーを変更しました。

『140字を飛び越えて』では、最初はダーク系カラー、次は緑系、その次は水色をメインカラーにしていたのですが、どれもしっくりきていないししっかり選んでいないカラーだったので、今回は真面目に選んでみました。

 

そもそも僕はこのブログを「自分の分身」くらいに思っているわけですが、だとすると明るい緑も水色も自分のカラーではないんですねw

そして僕は爽やかなキャラでは無いと思うので、濃いめの色、そして暗めの色、でも重くなくてきれいな色ということで『#6088C6』にしてみました。

 

クールで冷静沈着って感じがして良くないですか!?(クールでも冷静沈着でもない)

 

記事一覧ページのカードに立体感を出しました

Cocoon 記事一覧 影 立体感

わかりますかね…?よーくみると一つ一つのカードに影がついているんです!

マウスカーソルを乗っけると沈むので、PCで見た際は「浮いている感」が分かると思います!

 

超細かいことではありますが、初期状態に近い『Cocoon』は立体感や陰影がまったくなくてのぺーっとしているので、こういう小さな変更が大切な気がします。

 

『JIN』の動きとは少し違いますが、すこし寄った気がしますねw

 

記事一覧ページのカードにマウスカーソルを乗っけると、アイキャッチ画像がふわっと白くなるようにしました

Cocoon マウスホバー 白 アイキャッチ

少し分かりにくいかと思いますが、「10代20代が聴いているアーティスト」の記事にマウスカーソルを乗っけた状態のスクショです。

少しカードが沈んでいて、アイキャッチ画像がふわっと白くなっています!

 

「今コレを選ぼうとしているよ!!!」感が強くていいです!とてもいい!

 

各要素がふわっとフェードインするようにしました

これはもう実際に見てくださいw

 

記事を開いたり、トップページに戻ったり時、そのページのコンテンツが上下からふわっとフェードインする動きを入れてみました。

実際いらない動きではあるのですが、ほぼ表示速度も変わらずに出来る動きなので入れてみました。

 

『Cocoon』は見た目も動きもシンプルかつ最低限なので、ここは自力でドッタンバッタン大騒ぎさせてみました。

 

ページネーションのスタイルを変更しました

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

この一番下の丸いボタンのことです。

 

もともとはただ四角いだけのページネーションでした。

それでは面白くないので、丸いデザインを採用し、カラーにもこだわってみました。

 

機能的には何も変わりませんが、少しやわらかくなっていいですね!

 

参考にしたのはこのサイト

『Cocoon』は無料テーマの中でも最高レベルのテーマなので、使用者が多くて情報も多いです。

その情報を活用して今回のカスタマイズを成功させることが出来たので、感謝の意を込めてお世話になったサイトを紹介させていただきます。

 

LISBLO.[リスブロ]
LISBLO.(リスブロ)は、初心者向けのブログ運営術を紹介するWebメディア。リスでもわかるブログの手引書です。

今回のカスタマイズの多くはこのサイトのCSSをベースにしました。

超絶感謝です!

 

配色パターン見本40選:ベストな色の組み合わせ確認ツール
コピペで使えるオシャレな色の組み合わせを紹介します。それぞれの配色の実際の使用例まで用意しました。

『SANGO』を作った方が運営しているメディア『サルワカ』から、良いカラーの組み合わせを頂いてきました。カラーから『SANGO』に寄せていく!!w

感謝感謝。

 

最後に

今回のカスタマイズは第一弾です。

他のブロガーさんのブログをたくさん見ていく中で「いいな」と思った動きやデザインや見せ方はバンバン採用していこうと思いますので、またどこかで僕の記事を見つけた時は確認してみてください!w

 

ちなみにCocoonについて書いた記事もあります。是非!

【共有】無料のWordPressテーマ『Cocoon』がやばいのでは!?という話
今回はWordPressテーマのお話です。『Simplicity』の後継テーマ『Cocoon』がヤバそうということで、「やばい」ポイントを紹介します。

 

それでは!

この記事を書いた人
平泉悠李

高卒半引きこもり20歳 | Alphale代表 | Ruby / Python 勉強中 | コミュ障 | 将来の夢は収入のあるニートです

平泉悠李をフォローする
スポンサーリンク
スポンサーリンク
カスタマイズ
スポンサーリンク
平泉悠李をフォローする
140字を飛び越えて

コメント