cocoonブログをおしゃれにカスタマイズするには？
この記事では、WordPressのテーマcocoonを使用してブログ運営をしている方向けにおすすめのカスタマイズ10選を紹介しています。
cocoonは無料テーマですが、かなり万能で、有料テーマに引けを取らないおしゃれなデザインにカスタマイズすることができます。
実際、当ブログもcocoonテーマを利用しており、様々な機能を使いブログをカスタマイズしています。
この記事を読んで、cocoonブログをおしゃれにカスタマイズしてください。
この記事を書いている人
- メガバンク勤務の30代女性
- 夫と共同でブログを運営中
- ブログ開設から半年で月間1万PV &収益5万円到達
- ブログ運営、ファッション誌のモニターや記事執筆などの副業で収入を得ている
【cocoon】おすすめカスタマイズ10選／初心者向け
cocoonには、ブログをカスタマイズすることができる様々な機能が存在します。
設定を少し変えるだけでもサイトの雰囲気を大きく変えることができます。
簡単にできる内容ばかりですので、これから紹介するカスタマイズ方法を試していただければと思います。
サイトキーカラー、サイト背景色を設定する
サイトの印象を大きく変えるのが『サイトキーカラー』と『サイト背景色』です。
一つずつ設定方法を紹介します。
サイトキーカラーの設定方法
サイトキーカラーとは、投稿ページの見出しやサイドバーのタイトルなど様々な場所の装飾に使われる色を指します。
サイトキーカラーは、訪問者の目につきやすい部分に使われる色ですので、どのようなイメージのサイトを作りたいかを踏まえて決定するようにしましょう。
サイトキーカラーのイメージ
投稿ページの見出し
サイドバーのタイトルやMENU
サイトキーカラーの設定方法
WordPressのダッシュボードから『cocoon設定』を選択する
cocoon設定から『全体』を選択する
『サイトキーカラー』に設定したい色を追加する
サイト背景色の設定方法
サイト背景色は、その名の通り、サイトの背景に設定する色です。
cocoonでは、サイト背景に画像を設定することも可能です。
統一感のあるサイトを目指すのであれば、サイトキーカラーと相性の良い色をサイト背景色に選ぶようにしましょう。
サイト背景色のイメージ
トップページ
投稿ページ
サイト背景色の設定方法
WordPressのダッシュボードから『cocoon設定』を選択する
cocoon設定から『全体』を選択する
『サイト背景色』に設定したい色を追加する
さらに詳しく知りたい方はこちらの記事を参考にしてください。
サイトフォント、文字サイズを選択する
オリジナリティのあるブログに仕上げたい場合は、サイトのイメージに合わせて『サイトフォント』や『文字サイズ』を変更します。
初期設定でも十分ですが、フォントが変わるとサイトのイメージが大きく変わるので、一度設定を変更してみるのもおすすめです。
サイトフォント、文字サイズの設定方法
サイトフォント・文字サイズの設定方法
WordPressのダッシュボードから『cocoon設定』を選択する
cocoon設定から『全体』を選択する
『サイトフォント』に設定したいフォントや文字サイズを追加する
文字色や文字の太さを変えることも可能です。
フォントプレビューを確認しながら、好みのフォントや文字サイズを選び出しましょう。
メインカラムの余白を設定する
cocoonでは、メインカラムとサイドバーの幅や余白を自由に設定することができます。
余白を設けることで、すっきりとした読みやすいサイトに仕上がります。
下の図は当ブログのレイアウトですが、グレーの背景色の部分が余白となります。
メインカラムの余白の設定方法
メインカラムの余白の設定方法
WordPressのダッシュボードから『cocoon設定』を選択する
cocoon設定から『カラム』を選択する
『メインカラム』のコンテンツ幅や余白を設定する
『サイドバー』の幅や余白を設定する
『カラム間余白設定』でカラムの間の幅を設定する
コンテンツ幅や余白を設定した後は、メインメニューや記事の画面を開いて、レイアウトを確認しましょう。
コンテンツ幅を絞りすぎると、サイドバーの表示内容が崩れてしまったり、窮屈な印象を与えます。
微調整を行い、最適なバランスを見つけ出しましょう。
カラーパレットに好きな色を追加する
cocoonでは、カラーパレットに好きな色を6色追加することができます。
サイトキーカラーやサイト背景色に設定している色をカラーパレットに追加して、記事内に使用することで統一感のあるサイトに仕上げることができます。
カラーパレットに好きな色を6色追加することができます。
カラーパレットに好きな色を設定する方法
カラーパレットに好きな色を設定する方法
WordPressの編集画面のダッシュボードから『cocoon設定』を開く
cocoon設定のなかから『エディター』のタブを選択
エディターの設定項目の中段にある『拡張カラーバレット』を開く
拡張色A〜Fに自分の好きな色を追加する
カラーコードの入力、または色味を選択して、エディターの保存ボタンを押下
カラーパレットに好きな色を追加することで、フォントやボックスなどでオリジナルの色を使用することができます。
イメージ
白抜きボックス
フォント装飾
リスト表示の設定を行う
リスト表示を設定することで、サイトトップに表示する記事数やカテゴリーを設定することができます。
サイトトップに特定のカテゴリーの記事だけを一覧で表示したり、タブで切り替えてカテゴリーごとの新着記事を表示するようなこともできます。
例（タブ一覧）
例（カテゴリーごと3カラム）
また、サイトトップにどのように記事を表示するかも設定で変更することが可能です。
アイキャッチ画像を全面に表示するレイアウトや一ページに複数の記事を表示するレイアウトなどブログの用途に合わせた様々なレイアウトが用意されています。
例（エントリーカード）
例（タイルカード3列）
リスト表示の設定方法
リスト表示の設定方法
WordPressの編集画面のダッシュボードから『cocoon設定』を開く
cocoon設定のなかから『インデックス』のタブを選択
『フロントページタイプ』や『カードタイプ』を選択
『インデックス』の設定から、ブログカード
