【cocoonカスタマイズ完全版】おしゃれなブログを作るために真似したい10のテクニック

この記事では、WordPressの無料テーマcocoonを使用して、ブログをおしゃれにカスタマイズするテクニックを紹介しています。

簡単なカスタマイズでも工夫次第で、一気におしゃれなブログにアップグレードすることができます！

初心者の方にもわかりやすい内容となっていますので、ぜひ最後まで読んでいただき、ブログ作りの参考にしてください。

cocoonカスタマイズの10のテクニック／おしゃれなブログ作り　

【cocoonカスタマイズ①】サイトカラーの統一

ブログのカスタマイズを行う上で、一番注意したいのが「サイトカラーの統一」です。

ブログのトップページや記事でメインに使用する色は3色程度に抑えることが、おしゃれなブログへの近道です。

「サイトキーカラー」や「ヘッダー全体背景色」、「グローバルナビメニュー色」などを統一感のある色味にすることで、洗練された印象のサイトに生まれ変わります。

サイトカラーの設定は『ダッシュボード→cocoon設定→全体（またはヘッダー）』を選択して行います。

【cocoonカスタマイズ②】アイキャッチ画像の統一

ブログ記事の看板となる「アイキャッチ画像」のデザインを統一することで、一気におしゃれなブログに生まれ変わります。

アイキャッチ画像の色味や雰囲気などに統一感を持たせることで、まとまりのある印象のサイトになります。

アイキャッチ画像の表示方法を変更する場合は、『ダッシュボード→cocoon設定→画像』から設定を行います。

アイキャッチ画像に枠をつけたり、表示サイズなどの設定を行うことができます。

【cocoonカスタマイズ③】トップページをサイト型に変更

通常、cocoonでは下記のようなブログ型のトップページとなりますが、固定ページを活用することで企業のサイトのようなレイアウトのトップぺージを作成することができます。

固定ページを活用してトップページを作成することで、デザインの幅が広がりますし、余白をとったデザインが可能なので、洗練されたイメージのサイトにカスタマイズすることが可能です。

サイト型のトップページを作成する手順は以下の通りです。

サイト型トップページへのカスタマイズについては別記事で詳しく紹介していますので、詳しくはそちらをご覧ください。

【cocoonカスタマイズ④】ブログ記事を横並びに表示

cocoonの初期設定のデザインは、ブログ記事が縦2列（または3列）に並んで複数表示されるようになっています。

もちろんこのデザインの良さもあるのですが、おしゃれなブログを目指すには、トップページに表示する記事数を減らして、余白を持たせたデザインにカスタマイズすることが必要です。

ブログ記事を横並びに表示する方法については、別記事で詳しく紹介しています。

トップページに自分で指定したブログ記事を表示する方法についても紹介していますので、合わせてご覧ください。

【cocoonカスタマイズ⑤】 アピールエリアを活用しヘッダーにトップ画像を設定

アピールエリアを活用することで、ヘッダー下にサイトのメインとなる画像や文字を表示することができます。

アピールエリアを活用して画像や文字を設定することで、一気に本格的なイメージのブログに仕上げることができます。

アピールエリアの設定は、『ダッシュボード→cocoon設定→アピールエリア』を開いて行います。

アピールエリアにリンクボタンを設定して、アフィリエイト記事やリンクに繋げることも可能です。

アピールエリアはサイトのイメージや収益に大きく寄与する項目になります。

ご自身が何を重視したいのか（サイトのデザイン、収益など）を考えて、最適なアピールエリアの活用方法を見つけ出してください。

アピールエリアの活用方法については、別記事にまとめておりますので、詳しくはそちらをご覧ください。

【cocoonカスタマイズ⑥】ヘッダーメニュー、サイドバーをおしゃれに変更

サイト訪問者の利便性を向上させるためにヘッダーメニューとサイドバーを活用しましょう。

ヘッダーメニューとサイドバーをおしゃれに仕上げるためには、サイトメインカラーを使用し、文字やアイコン画像を詰め込みすぎないことが重要です。

ヘッダーメニューとサイドバーには、おすすめ記事やカテゴリーなどを表示し、訪問者がサイト内を回遊してくれるような構成とします。

すっきりとした見た目にすることがおしゃれなサイトに見えるコツですので、ヘッダーメニューやサイドバーにコンテンツを詰め込みすぎるのは避けましょう。

ヘッダーメニューやサイドバーの詳しい設定方法については、別記事で詳しく紹介しておりますので、そちらを参考にしてください。

【cocoonカスタマイズ⑦】カラムを使用しておしゃれなレイアウトに変更

トップページの作成時にカラムを使用することで、自分の思うようなレイアウトを形にすることができます。

カラムを活用すると、ページを区切ってコンテンツを配置することができます。

おしゃれなブログにカスタマイズするためには、サイトに「適度な余白」を持たせることが大切です。

カラムを使用する際は、コンテンツを詰め込みすぎないように注意しましょう。

カラムでページを区切る場合は、適宜、プレビューでサイトの全体像を確認して、窮屈なデザインになっていないかを確認しましょう。

カラムは、記事の投稿ページでも使用することができます。

記事に「画像を2枚横並びで表示させたい」「リンクボタンを3つ横並びで表示させたい」といった場合、カラムを使用すると簡単に希望するレイアウトを完成させることができます。

【cocoonカスタマイズ⑧】ボタンを使用してオリジナルメニューを作成

「ボタン」を活用することで、トップページの自分の希望する位置に自作のメニューを表示することができます。

「ボタン」のリンク先は、固定ページ、投稿ページ、カテゴリーページなど自由に設定することができます。

【cocoonカスタマイズ⑨】アイコンを使用しておしゃれなデザインに変更

FontAwesomeを活用することで、下記のようなアイコンをサイトに表示することができます。

アイコンを使用してサイトに表示する文字を減らすことで、スッキリとしたおしゃれなブログにカスタマイズすることができます。

アイコンを使用することで、洗練された印象のトップページを作り出すことができます。

おしゃればブログにカスタマイズするために、FontAwesomeを使いこなしましょう。

FontAwesomeの詳しい使い方はは別記事で紹介しておりますので、詳しくはそちらをご覧ください。

【cocoonカスタマイズ⑩】タイトル、日付など不要な項目を非表示に設定

通常、固定ページや投稿ページには、タイトル、投稿日付、広告などが表示されます。

しかし、固定ページや投稿ページに表示されるタイトル、日付、広告などを非表示にすることで、スッキリとしたデザインのサイトを作ることができます。

固定ページをサイトトップへ設定したい場合は、タイトル、日付、広告などを非表示にすることをおすすめします。

固定ページや投稿ページの広告を非表示にする方法は以下の通りです。

固定ページや投稿のタイトルや投稿日を非表示にする方法は、別記事で紹介しておりますので、詳しくはそちらをご覧ください。

おしゃれなブログを作るために意識したいポイント

ここからは、おしゃれなサイトを目指すために注意していただきたいポイントを3つ紹介します。

cocoonは使いこなせば、さまざまなカスタマイズができますが、おしゃれなブログに仕上げるためには「盛り込みすぎないこと」が大切です。

コンテンツを所狭しに並べたり、あれこれ詰め込みすぎたり、複数の色や画像を盛り込んでしまうと、おしゃれなサイトからは程遠くなってしまいます。

今から説明する3つのポイントをおさえて、シンプルで洗練されたブログデザインを目指しましょう。

【おしゃれなブログカスタマイズ】余白をもたせたデザインにする

おしゃれなブログを作る上で大切なポイントが「余白」です。

おしゃれなサイトを訪れてみると、たいてい適度な余白が設けられていることに気づきます。

ちょっとしたことですが、各コンテンツ（画像、紹介文、記事など）の間に適度な余白があることで一気にトップページがスッキリとした印象に生まれ変わります。

余白の付け方は、おしゃれなブログを運営している先輩ブロガーのサイトから学ぶのがおすすめです。

【おしゃれなブログカスタマイズ】コンテンツを詰め込みすぎない

おしゃれなブログにカスタマイズするためには、ブログトップページに表示する「コンテンツは最低限」に抑えるようにしましょう。

サイト型のトップページの魅力は、自分が表示したいコンテンツを好きなだけ詰め込むことができる点です。

画像、紹介文、ブログ記事、アイコン、SNSボタン、最新のツイートなど、トップページに表示したいコンテンツはたくさんあると思います。

しかし、コンテンツを詰め込みすぎると、情報量が多すぎて、訪問者に大切なことが伝わりにくいサイトになってしまいます。

また、コンテンツが多いと、デザインを統一するのが難しくなり、まとまりのない印象のサイトになってしまいます。

おしゃれなブログを作成するためには、トップページに表示するコンテンツは、必要最低限に絞るようにしましょう。

【おしゃれなブログカスタマイズ】メインカラー、画像の統一

おしゃれなブログにカスタマイズするためには、サイトに使用する「メインカラーと画像の統一」が必須です。

サイトのメインカラーと画像の雰囲気に統一感があれば、凝ったデザインでなくても洗練された印象のサイトに仕上がります。

サイトに使用する色の組み合わせを難しく感じるようであれば、モノトーンの色味を使うのがおすすめです。

サイトのメインカラーをモノトーンにしておくと、どのような画像とも相性が良いですし、シンプルで洗練された印象に仕上げることができます。

先ほど紹介した、メインカラーやアイキャッチ画像の設定方法を参照いただき、統一感のあるデザインを目指してください。

cocoonカスタマイズのまとめ／おしゃれなブログ作りのコツ

いかがでしたか。

cocoonは無料テーマですが、機能が充実しているため、カスタマイズ次第では有料テーマに負けないおしゃれなブログを作ることが可能です。

この記事を参考にしていただき、工夫を凝らしたおしゃれなデザインのブログへカスタマイズしてみてください。

最後までご覧いただきありがとうございました。