【随時更新】このブログで実施したCocoonカスタマイズのまとめ

ウェブ

この記事は随時更新していきます。
 
2020年の2月からブログのテーマをCocoonに変更しました。
 
無料でこのクオリティ…本当に素晴らしいテーマだと思います。
 
特に誰でもかゆいところまで手が届く独自のCocoon設定が最高に素晴らしい。
 
そんなテーマですからカスタマイズなんてせずともすぐに使えちゃうんですが…
 

りこぴんD🍅
りこっぴ🍅
🍅は三度の飯よりカスタマイズが好き!笑

 
記事を書くことよりもブログのデザインを弄ることが好き。
 
そしてそれが自分にとって至福の時であると感じる私ですから、ここ1ヶ月は仕事の合間を縫って記事を書くことよりもデザインカスタマイズに注力し続けました。
 
というわけで今回はこれまでにこのブログで実施してきたCocoonカスタマイズ情報をまとめる形でご紹介していきます。
 
自分でCSSとPHPを弄った箇所もあるんですが、大部分は既にいろんな方が書いてくださった有益なカスタマイズ記事。
 
そういった情報・アイデアがたくさんありましたので、それらを参考にさせて頂きました。
 
この記事では自分自身で施したカスタマイズ内容の紹介、そうではない箇所については、参考にさせて頂いた元ネタ(出典元)をひとまとめにして紹介したいと思います。
 
 

著者プロフィールのカスタマイズ

現在このブログで表示される著者プロフィールのボックスはこんな感じになってます。
 

 

 

 
1番上の画像がサイドバーで表示される著者プロフィール、2枚目の画像が記事下で表示される著者プロフィールです。
 
3枚目の画像はスマホで見た時の著者プロフィールで基本的にPCと同じように表示されます。
 
このカスタマイズは以下の記事を参考にさせて頂きました。

 
 

フッターのカスタマイズ

現在のフッター部分はこんな感じになってます。
 

 

 
このカスタマイズも先ほどのプロフィールボックスのカスタマイズ同様にこちらのサイト様の記事を参考にさせて頂きました。

 
 

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

現在のサイドバー部分はこんな感じです。
 

 

 
マウスオーバー時のホバーです。
 

 
スマホで見るとこんな感じです。
 

 
検索バー、サイドバー見出し、カテゴリー、タグクラウドをカスタマイズしてます。
 
これらのカスタマイズもまたまたこちらを参考にさせて頂きました。




 
 

ページ全体のフェードイン効果

このカスタマイズはスマホ表示、そしてアニメーションの方がわかりやすいかと思いますので、サンプルとしてGIF画像を貼ってみました。
 

 

 
ページ読み込み時にふわっと全体が浮かび上がってくるような効果を出しています。
 
このカスタマイズは以下の記事を参考にさせて頂きました。

 
 

記事一覧のアイキャッチをマウスオーバー時にぼかす

現在トップページの記事一覧でアイキャッチにマウスオーバーすると、このように画像をぼかすようにしています。(スマホでもタップ時に効果が出ます)
 

 
一部、元ネタとは違うカスタマイズを施してますが、こちらのカスタマイズは以下の記事を参考にさせて頂きました。

 
 

カルーセルのデザインカスタマイズ

Cocoonは標準の機能としてカルーセル(スライダー)が実装されているので、設定から簡単にヘッダー下のスライダーを表示することができます。
 
このカルーセルについてもCSSで少しデフォルトのデザインを変更しています。
 

 
以下の記事を参考にデザインを変更させて頂きました。

 
 

トップに戻るボタンを画像にする

PCで表示した際のトップに戻るボタンは現在こんな感じで自分のアイコンを使っています。
 

 
以下の記事を参考にしてトップに戻るボタンを変更させて頂きました。

 
 

アイキャッチ画像を幅いっぱいに表示する

このブログでは本文上に表示されるアイキャッチ画像の幅を通常より広げています。
 
スマホやタブレットで表示する際には画面いっぱいに表示されます。
 

 
 
 
この表示幅の変更については自分自身でCSSを弄ったので、以下の記事で誰でも簡単にコピペで使えるCSSを紹介しています。

 
 

まとめ

以上が現時点でまとめた『これまでにこのブログで実施したCocoonカスタマイズ』の情報です。
 
まだ出典元の整理ができていない情報もありますし、今後も随時カスタマイズはしていくと思いますので、この記事も随時更新していきます。
 
また、自分自身で弄ったCSSやPHPも細々とありますので、このブログを見てやり方が気になったカスタマイズ部分などあれば、お気軽にコメント頂ければと思います。
 

2+

この記事へのコメント

トップへ戻る