本記事には広告が含まれます。
【Cocoon】ブログカスタマイズ参考CSSサイト一覧【WordPress】
今回は、当ブログで使用しているテーマ「Cocoon」のCSSカスタマイズ参考サイトをご紹介したいと思います。
備忘録的な記事となっていますが、興味のある方は参考にして下さい。
ちなみに全体のカスタマイズの根本は、Cocoonの生みの親わいひらさんのブログを参考にしています。
カスタマイズ前にはマニュアルを一通り読んでおくと、理解も早いと思います。
当ブログは、有料テーマ風を目指してちょこちょこカスタマイズ中ですが、
かなり時間がかかる＋ミスると大変なことになる
ので、CSSやHTMLに詳しくない方は、本を1冊だけでもいいので勉強すると全然見え方が変わってくると思います。
目次
カスタマイズをする前に…
カスタマイズ中は、CSSを修正して自分のブログを確認するという作業を繰り返し行います。
繰り返し確認する＝繰り返し自分の部ドグにアクセスすることにより、自分のアクセス数でGoogleアナリティクスのPV数が跳ね上がってしまい、正確なPV数を取得することができなくなります。
対策をしていない方は、下記の記事を参考に自分のアクセス数を除外してからカスタマイズを始めることをオススメします。
ブログ全体デザイン関連
ブログ全体のデザインに関するカスタマイズです。
記事を参考にさせて頂きました
ありがとうございました！
トップページ
トップページは固定ページ＋ショートコードで作成しています◎
そのままだと、投稿記事内と同じ見出しデザイン（<h1></h1>）になってしまいます…
なのでトップページの見出しデザインのみ変更しました。
ヘッダー固定
当ブログのように、下にスクロールしてもヘッダーを固定するカスタマイズは下記の2記事を参考にさせて頂きました。
ちなみに、当ブログのように文字だけで良いわ〜って方が、ヘッダー画像を作るには無料で使えるCanvaで作成するのがおすすめです！
デザイナーさんにオシャレなヘッダーデザインを依頼するなら、ココナラがおすすめです♡
ボックスメニュー
サイドバーのボックスメニューはぽんひろさんの記事を参考にさせて頂きました。
とても可愛く仕上がり、大満足です！
プロフィール欄
プロフィール欄もカスタマイズしています。
Twitterのようにヘッダー画像が付けられてオシャレです＊
また、応用するとSNSフォローボタンの背景色も変更できます。
このカスタマイズは下記の記事を参考にしました。
記事一覧
トップページの記事一覧のカスタマイズです。
当ブログのように、記事をマテリアル風にするために、Y&K Studioさんの記事とぽんひろさんの記事を参考にさせて頂きました。
ブログカテゴリラベル
Cocoon標準の四角いカテゴリラベルの角を丸くするカスタマイズの参考にさせて頂きました。
ついでに背景色も変えています。
プロパティが何か分からない所があり少し悩んだので、下記の記事も参考にさせて頂きました。
新着記事・人気記事で投稿日を表示
新着記事や人気記事のショートコードを使うと、標準では記事一覧に投稿日が表示されません。
そこで投稿日を表示させるために下記の記事を参考にカスタマイズしました！
投稿記事関連
投稿記事に関するカスタマイズです＊
見やすいように細かい部分や文字サイズなどもこだわっています。
記事を参考にさせて頂きました
ありがとうございました！
目次
目次はSANGO風に憧れて、Y&K Studioさんの以下の記事を参考にさせて頂きました。
とっても可愛いですよね…♡
ブログカード
この記事でも使っている「参考リンク」等が表示されるブログカードのカスタマイズです。
リスブロさんの記事を参考にカスタマイズしています◎
ブログカードの左上に表示されるラベルの色変更は、当ブログの別記事で紹介しています◎
引用
↓のように引用欄を可愛くするカスタマイズです。
これが引用！
引用元も入力できます。
こちらは婿養子の島根移住ブログ様の記事を参考にさせていただきました。
婿養子の島根移住ブログ
WordPressテーマ「Cocoon」カスタマイズまとめ！初心者でもCSSコピペでおしゃれに
こんにちは！無料WordPressテーマ「Cocoon」を超おすすめしているはまちゃん（@wakuwakukeigo）です。この記事は、 この記事を読むべき人 Cocoonのカスタマイズ方法が知り...
シェアボタン・フォローボタン
アイキャッチ下と、記事最下部にあるシェアボタンとフォローボタンを当ブログのように丸くカスタマイズする方法です。
『Iの喜劇』の記事を参考にさせていただきました。
好きなようにカスタマイズできるのもCocoonの魅力！
ブログカスタマイズをしていて困った時は、すぐに検索して紹介させていただいたブロガーさん達の知恵と技術力に助けて頂きました…！勝手に紹介させていただきましたが、本当にありがとうございました。
WordPressのブログは素敵なデザインのサイトが多く、WordPressでブログを始めれば、簡単に素敵なサイトが出来上がると勘違いしていました。
素敵なブログの陰には、運営者のカスタマイズの努力があるのだな、と身にしみて思いました。
素敵なブログを作るには、
- CSSとHTMLの基礎知識は絶対的に必要
だと改めて思いました。
私の場合は、本業がシステムエンジニアなので基礎知識はあり、あまり困ることはありませんが、初心者の方からするとどうすればいいか本当に分からないと思います。
CSSとHTMLは基礎知識があるか無いかだけで、カスタマイズ記事への理解度が全然変わってくると思います。
Cocoonの魅力はなんと言っても無料であることと、カスタマイズ次第で素敵なブログにも変身させることが出来る点だと思います。
ただ、Cocoonを好きなようにカスタマイズするには、基礎知識と労力が必要だとも実感しました。（あと、カスタマイズ記事に辿り着く検索能力も必要です…）
気に入ったテーマがあるのならば、最初から下記のような有料テーマを導入するのも良いですね＊
私自身、まだまだ勉強している途中なので、これからも少しずつカスタマイズして、自分の好きな環境に育てていきたいと思います。
コメント