Amazon Fire TV stickが40%OFF!(7/11まで)≫

【Cocoon】ブログカスタマイズ参考CSSサイト一覧【WordPress】

ブログ

今回は、当ブログで使用しているテーマ「Cocoon」のCSSカスタマイズ参考サイトをご紹介したいと思います。

備忘録的な記事となっていますが、興味のある方は参考にして下さい。

ちなみに全体のカスタマイズの根本は、Cocoonの生みの親わいひらさんのブログを参考にしています。

有料テーマ風を目指してちょこちょこカスタマイズ中ですが、

かなり時間がかかる

+ミスると大変なことになる…

ので、CSS等に詳しくない方は有料テーマを買う方がコスパ良いかもしれません…!

\抜群に上位表示されやすいWPテーマ/

カスタマイズをする前に…

カスタマイズ中は、CSSを修正して自分のブログを確認するという作業を行うかと思います。

これを繰り返していると自分のアクセス数でGoogleアナリティクスのPV数が跳ね上がってしまいます。(←経験者)

そのため、下記の記事を参考に自分のアクセス数を除外してからカスタマイズを始めることをオススメします!

ブログ全体デザイン関連

ブログ全体のデザインに関するカスタマイズです。

記事を参考にさせて頂きました

ありがとうございました!

トップページ

トップページは固定ページ+ショートコードで作成しています◎

そのままだと、投稿記事内と同じ見出しデザイン(<h1></h1>)になってしまいます…

なのでトップページの見出しデザインのみ変更しました。

ヘッダー固定

当ブログのように、下にスクロールしてもヘッダーを固定するカスタマイズは下記の2記事を参考にさせて頂きました。

ちなみに、当ブログのように文字だけで良いわ〜って方が、ヘッダー画像を作るには無料で使えるCanvaで作成するのがおすすめです!

デザイナーさんにオシャレなヘッダーデザインを依頼するなら、ココナラがおすすめです♡

ボックスメニュー

サイドバーのボックスメニューはぽんひろさんの記事を参考にさせて頂きました。

とても可愛く仕上がり、大満足です!

プロフィール欄

プロフィール欄もカスタマイズしています。

Twitterのようにヘッダー画像が付けられてオシャレです*

また、応用するとSNSフォローボタンの背景色も変更できます。

このカスタマイズは下記の記事を参考にしました。

記事一覧

トップページの記事一覧のカスタマイズです。

当ブログのように、記事をマテリアル風にするために、Y&K Studioさんの記事とぽんひろさんの記事を参考にさせて頂きました。

マテリアルデザインは、Googleが提唱したデザインシステムのガイドラインのことです。
この記事一覧のカスタマイズの中では、マウスオンでふわっと浮き上がらせるカスタマイズやPCで見てもスマホで見てもデザインが崩れないカスタマイズ等を総称して”マテリアル風”と呼んでいます。

ブログカテゴリラベル

Cocoon標準の四角いカテゴリラベルの角を丸くするカスタマイズの参考にさせて頂きました。

ついでに背景色も変えています。

プロパティが何か分からない所があり少し悩んだので、下記の記事も参考にさせて頂きました。

新着記事・人気記事で投稿日を表示

新着記事や人気記事のショートコードを使うと、標準では記事一覧に投稿日が表示されません。

そこで投稿日を表示させるために下記の記事を参考にカスタマイズしました!

投稿記事関連

投稿記事に関するカスタマイズです*

見やすいように細かい部分や文字サイズなどもこだわっています。

記事を参考にさせて頂きました

ありがとうございました!

目次

目次はSANGO風に憧れて、Y&K Studioさんの以下の記事を参考にさせて頂きました。

とっても可愛いですよね…♡

ブログカード

この記事でも使っている「参考リンク」等が表示されるブログカードのカスタマイズです。

リスブロさんの記事を参考にカスタマイズしています◎

ブログカードの左上に表示されるラベルの色変更は、当ブログの別記事で紹介しています◎

好きなようにカスタマイズできるのもCocoonの魅力!

ブログカスタマイズをしていて困った時は、すぐに検索して先人の知恵に助けて頂きました…!

紹介させていただいた方たちの記事がなければ好きなようにカスタマイズは出来ませんでした。

勝手に紹介させていただきましたが、本当にありがとうございました。

今回は書ききれなかったのですが、まだまだ参考にしたブログさんがあるので第2段として紹介させて頂きます。

これからも少しずつカスタマイズして、自分の好きな環境に育てていきたいと思います♪

コメント

  1. はじめまして。とってもわかりやすくて、デザインも見やすくて参考になりました。
    ・・・と思ったら!!ton2net.com、参考にして頂いて、リンクまで張って頂いている!!
    びっくりしました。笑

    blog、楽しいですよね。コツコツやっていきたいと思っているので、今後とも、よろしくお願いします~

    • usagi usagi より:

      はじめまして。
      まさか、管理人様からコメント頂けるとは!ありがとうございます^^

      カテゴリラベルの角を取りたくて検索したところ、
      ton2netさんにたどり着き、解決しました。
      ありがとうございました!

      ブログ楽しいですね。
      私もコツコツやっていきたいと思っていますので、今後とも宜しくお願いいたします♪

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