高機能なWordPressテーマ「Cocoon」
なんだったら、カスタマイズなんて必要はないですが、やはり多少はカスタマイズしないと個性があまり出ないような気もします。
そのため、当ブログで細かいカスタマイズ記事を少しずつ書いています。
そのカスタマイズ記事を極力分かりやすくまとめてみましたので、よろしければご参考ください！
- 無料で高機能なテーマを使いたい方
- HTMLやCSSの知識がないけどブログを始めたい方
- カスタマイズしなくてもすぐに使えるテーマを探している方
- 国内シェアNo.1の高速サーバーなのでストレスフリー！
- 自動バックアップ機能に標準対応で安心運用可能！
| 気になるポイント！ | キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！ |
|---|
なにはともあれ子テーマは必須です！
カスタマイズをする場合は、必ず子テーマを使用しましょう。
なお、子テーマってなに？という方は、こちらの記事を参考にしてください！
入門編
【初心者向け】Cocoonの導入方法と子テーマの使い方だよ！
こちらでは、Cocoonの導入方法と、子テーマの使用方法についてご紹介しています！
使い方がわからないーという方はこちらを参考にしてください。
全体的
【WordPress】無料テーマCocoonで好きなフォントを設定するカスタマイズ！
フォントの設定方法について説明しています。
Cocoonの管理画面から簡単に設定することができますが、決まった組み合わせからしか選ぶことが出来ません。
自由な組み合わせ・フォントの設定方法をご紹介しています。
Webフォントの設定方法についても書いています！
ヘッダー
①【WordPress】Cocoonのサイトロゴを左寄せにする方法
単純にロゴを左端に寄せるカスタマイズです。
シンプルですが、管理画面からは変更できないと思うので、必要な人向けです。
②【WordPress】Cocoonのメニュー簡単カスタマイズ集
ブログを印象付けるグローバルメニューのカスタマイズをしています。
細かく分けて説明していますので、お好みのものをお試しあれ！
③【WordPress】Cocoonのヘッダーロゴ表示に動きを付けるカスタマイズ
ページが表示された際にアニメーションで動きを付けるカスタマイズを紹介しています。
サイトの印象ががらりと変わるので、お試しください！
記事エリア
①【WordPress】Cocoonのh2,h3の見出しデザインをカスタマイズ！
h2、h3見出しのデザインをカスタマイズしています。
見出しのデザインを変えると、一気にブログの雰囲気が変わりますよ！
②Cocoonでコンテンツエリアをフェードイン表示させるカスタマイズ
ページが表示された際に、記事エリア等が下からフェードインで表示されるようにカスタマイズしています。
サイト全体のおしゃれ感がアップします！
③Cocoonの新着一覧をオシャレな感じにカスタマイズ【WordPress】
トップページの新着一覧のデザインを変更しています。
マウスのカーソルをホバーさせるだけでも楽しくなります！
④Cocoonのブログカードラベルの色をそれぞれ変えるカスタマイズ！
最近のCocoonのアップデートで追加された機能である「ブログカードのラベル」の色を自由に変更するカスタマイズです。
個別に変えられるので、自分好みにカスタマイズできます。
⑤Cocoonの目次をおしゃれっぽくカスタマイズする【WordPress】
最初のh2前に表示される目次をカスタマイズしています！
デフォルトの状態もシンプルでいいのですが、物足りないという方はこちらをどうぞ！
サイドバー
①【自分的】Cocoonでやりたい最低限カスタマイズ【サイドバー編】
サイトを印象付ける要素のひとつであるサイドバーについてカスタマイズしています。
②【WordPress】Cocoonで検索ボックスをカスタマイズする
ウィジェットで使用できる検索ボックスをカスタマイズしています。
検索ボックスをシャープにしたり、クリック時に色を変えたりしています。
③Cocoonのプロフィールボックスを有料テーマＪＩＮ風にカスタマイズ
サイドバーに設置するプロフィールボックスをカスタマイズしています。
デフォルトのままだと物足りないという方はお試しあれ！
④cocoonのサイドバーにあるカテゴリ・アーカイブをカスタマイズ！
①の別パターンカスタマイズです。
サイドバーの印象を変えたい方はお好みでどうぞ！
広告関係
①無料テーマCocoonのカスタマイズ注意点【広告・アドセンス編】
Cocoonの管理画面からできる最低限度のアドセンス設定についてご紹介しています。
つまずきやすい点や、うっかりとやってしまいがちな点について説明しています。
②Cocoonでアドセンスの関連コンテンツを表示させるカスタマイズ
選ばれし者が使えるとされるGoogle Adsenseの広告ユニットの一つ「関連コンテンツ」
Cocoonの管理画面からは設定できないので、ウィジェットを使用して簡単に設置することができる方法をご紹介しています。
③ Cocoonで『関連コンテンツ』をAMP化ページに対応させる方法
Cocoonの機能の一つＡＭＰ化した場合にも、関連コンテンツを表示させる方法をご紹介しています！
コピペも良いですが・・・
Cocoonは高機能で人によってはカスタマイズなんて必要ないかもしれませんが、HTMLやCSSの知識あるとないとでは、トラブルがあった時に大きく違ってきます。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ！
私が使用したおすすめの本はこちらです。
コメント