【Cocoon】カスタマイズのまとめ

Cocoon カスタマイズのまとめ Cocoon

こんにちは、ikuzo(いくぞう)です。

ついに当ブログも100記事目を迎えることができました。

100記事を祝う花火のGIFアニメ

ありがとうございます。

これもひとえに、お越しいただいている皆様がいたからこそ、

それをモチベーションにここまで継続することができました(^_^)

 

今回は100記事目を記念して、今やikuzoblogの顔となった

Cocoonのカスタマイズ記事を一度まとめてみようと思います。

プー太郎
プー太郎

ありがちなパターンだね!笑

一応まとめますが、これでCocoonのカスタマイズ記事は終わり、というわけではありませんので笑

またカスタマイズの記事を書いたら、この「まとめ」に追加していきます。

 

ではいきます!8時だョ!…ではなくて

Cocoonのカスタマイズのまとめ、だョ!全員集合!

スポンサーリンク

ヘッダー部分のカスタマイズ

ロゴとファビコン

ロゴとファビコン

ヘッダーロゴとファビコンの作り方、およびCocoonの設定方法を解説してます。

 ブログのロゴを作ってみよう!作成からCocoonの設定方法までを解説

 ファビコン(サイトアイコン)の作り方とCocoonの設定方法

グローバルナビメニュー

Cocoonのグローバルナビメニュー

 【Cocoon】グローバルナビメニューの設定方法とカスタマイズ

 【Cocoon】グローバルナビメニューやサイトの幅を調整・変更する

 【Cocoon】グローバルメニューにマウスオーバーでアンダーライン登場

メニューにマウスオーバーでアンダーラインが出てくる

プー太郎
プー太郎

3番目はメニューにマウスオーバーで

アンダーラインが出てくる設定方法です。

トップページと目次のカスタマイズ

トップページ

カスタマイズしたトップページのタイトル

トップページにある「新着記事」や「カテゴリー」のタイトル部分などをカスタマイズしました。

 【Cocoon】新しいトップページの設定方法とカスタマイズ

目次

通常の目次とカスタマイズした目次

通常の目次にわずかな変更を加える方法を書いてます。

 【Cocoon】初心者向け 目次の設定方法とかんたんなカスタマイズ

カテゴリーラベルのカスタマイズ

アイキャッチの左上に表示されているカテゴリーラベル

アイキャッチなどで表示されるカテゴリーラベルの色を変えたり、消す方法です。

 【Cocoon】初心者向け カテゴリーとカテゴリーラベルの設定方法

本文のカスタマイズ

見出し(h2~h6)

サルワカさんのデザイン例を使って見出しをカスタマイズしてます。

背景色が消えた見出し2

プー太郎
プー太郎

デザイン例から見出しを選べるので、

初心者の方にも簡単なやり方です。

 【Cocoon】初心者でも簡単!見出しデザインのカスタマイズ

行間と段落の間隔

文章と文章の間の余白 48px

文と文の間の余白を調整する方法です。

 【Cocoon】初心者向け 文と文の間(行間)と段落の間隔を調整する

ボックス(囲み枠)

ボックスと文字の余白

Cocoonのボックスの大きさを変える方法を紹介してます。

 【Cocoon】ボックスの大きさを変える(囲み枠の余白を調整)

 【Cocoon】ボックスの中にあるリストの上下余白を調整する

リストにアイコンをつける方法とアイコン付リストをボックスで囲む方法です。

 【Cocoon】初心者向け リストの先頭にアイコンをつける方法

▼オリジナルのボックスを作る方法もあります。

【WordPress】初心者向け ボックス(囲み枠)のカスタマイズ

ブログカード

【Cocoon】ブログカードを自分流にカスタマイズしよう

 【Cocoon】ブログカードを自分流にカスタマイズしよう

 【Cocoon】内部ブログカードの抜粋文(説明文)を消す2つの方法

表(テーブル)

セルの余白を大きくした表

表の作り方と、セルの余白を広げる方法です。

 【Cocoon】表(テーブル)の作り方と幅を変えるカスタマイズ

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

サイドバーのカテゴリー一覧 変更前と変更後

サイドバーで使っている各ウィジェットの設定方法を書いてます。

 【Cocoon】初心者向け サイドバーの設定方法とカスタマイズ

ヘッダーモバイルボタンのカスタマイズ

メニューの色を変えてアイコンの位置などを調整

横幅が狭いデバイスで表示されるヘッダーモバイルボタンをカスタマイズしました。

 【Cocoon】ヘッダーモバイルボタン(スマホメニュー)をカスタマイズ

ヘッダーモバイルボタンにPCとは別のロゴを設置する方法です。

 【Cocoon】ヘッダーロゴをPCとモバイルで使いわける方法

最後に

当ブログはいつの間にか成り行きで、CocoonやWordPressの設定やカスタマイズがメインのブログになりました。

プー太郎
プー太郎

最初はトラックのネタをメイン

にするつもりだったんだって。

カスタマイズの記事は、CSSをただ「コピペしてね」ではなく、

「お越しいただいた皆様が自由にカスタマイズできるように解説すること」

をモットーとして書かせていただいており、

これからもそのスタイルを継続していきたいと思ってます。

皆様の何かヒントになるような記事を書いていきたいと思っておりますので、

今後もikuzoblogを宜しくお願いいたします(^_^)

プー太郎
プー太郎

宜しくお願いします。

コメント