ブログ運営

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

スポンサーリンク

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

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

この記事はこんな人におすすめ
  • cocoonブログをカスタマイズしたい人
  • これからブログを始めたい人
  • ブログのテーマ選びで迷っている人

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

この記事を書いている人

  • メガバンク勤務の30代女性
  • 現在第一子の育児休業中
  • ブログ運営、ファッション誌のモニターや記事執筆などの副業で月5万円の収入を得ている
スポンサーリンク

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

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

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

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

サイトメインカラーのイメージ

当サイトでは、黄色、水色、グレーをサイトのメインカラーと決めています。

ヘッダー、アイキャッチ画像、メニューボタンなどは全てサイトのメインカラーに統一するようにしています。

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

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

サイトメインカラーの設定方法

「サイトキーカラー」などを設定する場合

ダッシュボード→cocoon設定→全体』を選択

「ヘッダー全体背景色」、「グローバルナビメニュー色」などを設定する場合

ダッシュボード→cocoon設定→ヘッダー』を選択

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

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

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

アイキャッチ画像のイメージ

当サイトでは、アイキャッチ画像は全てシンプルなイラストを使用しています。

イラストに使用する色味は、サイトのメインカラーである水色と黄色を選択しています。

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

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

アイキャッチ画像の設定方法

アイキャッチ画像の表示方法の設定

ダッシュボード→cocoon設定→画像』を選択

アイキャッチ画像に枠をつける場合

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

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

cocoonの初期設定のトップページ
cocoonのサイト型トップページ

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

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

サイト型トップページの作成方法

サイトトップとなる固定ページを作成する

ショートコードを使い固定ページに記事を表示する

トップページへのブログ記事の表示レイアウトの設定

新着記事の一覧を表示する固定ページを作成する

固定ページをサイトトップへ設定する

サイト型トップページの完成

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

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

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

cocoonの初期設定のトップページ

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

ブログ記事を横並びに表示したイメージ

当サイトでは、トップページに表示するブログ記事は、1行に4記事を横並びに表示しています。

横に記事が並ぶため、上下には適度に余白を持たせて、窮屈な印象を与えないように工夫しています。

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

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

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

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

アピールエリア活用のイメージ

サイトトップの赤く囲っている部分がアピールエリアになります。

このエリアにサイトの顔となる好きな画像や文字を設定することができます。

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

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

アピールエリアの設定方法

アピールエリアの表示方法の設定

ダッシュボード→cocoon設定→アピールエリア』を選択

アピールエリアの表示方法、高さ、エリア画像などを設定

この設定では、アピールエリアの表示を「全ページで表示」に設定していますが、「トップページのみ」や「投稿ページのみ」といった指定も可能です。

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

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

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

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

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

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

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

ヘッダーメニュー、サイドバー活用のイメージ

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

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

ヘッダーメニューの設定方法

ヘッダーに表示するコンテンツを選ぶ

ダッシュボード→外観→メニュー』を選択
この画面で、ヘッダーメニューに表示させたい固定ページや投稿を選択する

ヘッダーの詳細設定を行う

ダッシュボード→cocoon設定→ヘッダー』を選択
先ほど選択したヘッダーメニューの表示方法の詳細設定を行う

サイドバーの設定方法

サイドバーに表示するコンテンツを選択する

ダッシュボード→外観→メニュー』を選択
この画面で、ヘッダーメニューに表示させたい固定ページや投稿を選択する

上記のヘッダーメニューの作成手順画像を参照

サイドバーにボックスメニューを表示する

ダッシュボード→外観→ウィジット』を選択

ボックスメニューの▼を選択し、「サイドバー」を選択し「ウィジットを追加」を押下

ページ右側のサイドバーのウィジットに「ボックスメニュー」が追加されたことを確認

上記図のボックスメニューの▼を選択し、「タイトル」と「メニュー名」を入力

設定を「保存」するとサイドバーのメニューが完成

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

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

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

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

カラムの活用のイメージ

当サイトでは、サイトトップにカラムを使用して、「プロフィール」と「タグ」2つの項目を横並びに表示しています。

カラムを使用することで、スペースを有効に活用することができます。

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

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

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

カラムの使用方法

サイトトップとなる固定ページに「カラム」のブロックを追加する
(投稿ページを編集する際と同じ手順です)

「カラム」を選択すると、割合が表示されるため、「希望の割合」を選択

上記で「50/50」を選択した場合、ページを2つに区切ってコンテンツの配置が可能となる

カラムで区切ったボックスに文字、画像、ボタンなどを配置して、サイトのデザインを整える

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

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

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

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

ボタンを活用したメニューのイメージ

当サイトでは、サイトトップページに「ボタン」を使用して、カテゴリーへのリンクメニューを作成しています。

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

ボタンメニューの作成方法

サイトトップとなる固定ページに「カラム」のブロックを追加する
詳細は一つ前の「カラム」のカスタマイズを参照

用意したいメニューボタンの数に合わせてカラムでページを区切る

ボタン」のブロックを追加する

追加された「ボタン」に表示するメニュー名を入力する

ブロックの詳細設定で、リンク先のURLやボタンの色を設定する

ボタンメニューの完成

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

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

FontAwesomeの活用イメージ

ヘッダーやサイドバーのメニューに使用した例

固定ページや投稿ページに使用した例

:オムタンケ

:https://omtanke11.com/

:投資情報や副業情報などお金にまつわる情報について発信

:omko_toushi

文章、URLなどの先頭に使用しているのが、FontAwesomeのアイコンです。

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

FontAwesomeのアイコンの活用方法について紹介します。

ヘッダーメニュー
Before

使用イメージ①
メニューボタンを全てアイコンに変更して視覚に訴えるデザインに

使用イメージ②
メニュー一覧をのアイコン(いわゆるハンバーガーメニュー)にまとめてシンプルなデザインに

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

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

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

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

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

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

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

不要な項目を非表示にした固定ページ

当サイトのトップページは、固定ページのタイトル、日付、広告などを全て非表示に設定しています。

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

広告の非表示設定

広告を非表示にしたい「固定ページ」または「投稿」を開く

ページ右側の固定ページ(または投稿)の広告設定を「広告を除外する」に変更

✔︎を入れた固定ページまたは投稿では広告が表示されない

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

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

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

おしゃれなブログを作るための注意点
  • 余白をもたせたデザインにする
  • コンテンツを詰め込みすぎない
  • メインカラー、画像の統一

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

いかがでしたか。

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

おしゃれなブログを作るためのコツ
  • 余白をもたせたデザインにする
  • コンテンツを詰め込みすぎない
  • メインカラー、画像の統一

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

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

タイトルとURLをコピーしました