Blog

Cocoonのデザインについて悩んでいるあなたへおススメの手法

こんにちは、ほえるん(@Whalenlen)です。

 

この記事を見ているあなたは、デザインにお困りですね。

 

ほえるん
ほえるん

本記事は、以下の方におススメです。

  • ブログ始めたけど、デザインの設定方法がわからない。
  • Cocoonを使用している。
  • 色々調べたけど、要約された物が見たい。

当ブログサイトを閲覧された読者の方より、デザインについてお褒めの言葉を頂いたり、質問を頂く事が多い為、以下の手順で紹介していきます。

 

  1. スキンの設定方法
  2. ヘッダー画像(ロゴ)の設定方法
  3. グローバルメニューの設定方法
  4. ピックアップコンテンツの設定方法

 

以降では、Cocoonユーザー必見の設定方法について、実際にほえるんブログで設定している「スキン」や「ヘッダー」を含めてお伝えしていきます。

 

スキンの設定方法

 

ダッシュボード内にて、①「Cocoon設定」を押し、②「スキン」をクリックします。

 

 

下にスクロールしていくと、「スキン一覧」が並んでおります。

 

 

写真内の矢印のところに、マウスのカーソルを合わせるとイメージ画像が出てきますので、気に入ったものを設定しましょう。

 

ちなみに、「ほえるんブログ」で設定しているのは、【「いつもの深海」/作者:がんちゃん】です。

 

 

選択後は必ず、赤枠の「変更をまとめて保存」を押しましょう。

 

ほえるん
ほえるん
スキンが設定出来たら、必ず自分のホームページを確認しましょう。

 

スキンは自分のブログテーマやヘッダーなどに合わせると、あなたのブログの世界観に引き込まれますよ。

 

ヘッダー画像(ロゴ)の設定方法

 

ヘッダーは、ブログの顔となる部分なのでデフォルト状態よりも何かしら設定した方が良いでしょう。

 

以降は、写真挿入とロゴ挿入の2つの方法について解説します。

 

写真の設定方法

 

スキン設定と同じく、①「Cocoon設定」を押します。

 

その後、②「ヘッダー」をクリック。

 

 

自分で選んだ写真を矢印で示した「選択」を押して挿入していきます。

 

 

上写真の様になるので、写真をドロップして取り込みましょう。

 

 

無事に取り込めたら、上写真の様になります。

 

変更後は、下へスクロールして「変更をまとめて保存」を押すことを忘れずにして下さい。

 

ロゴの設定方法

 

ロゴというのは、上写真の様に「Whale Blog」と書かれている物です。

 

ほえるんブログのロゴは、「Canva(キャンバ)」という無料グラフィックデザインツールを使用して作成しました。

 

ほえるん
ほえるん

アイキャッチ画像を作るのに便利なので無料登録していて損はないです。

 

出典:Canva

 

Canvaの申し込みページはこちら

 

※今回登録手順については本質から外れる為、省略します。今度記事にしますので、しばらくお待ちください。

 

 

「デザインを作成」をクリックし、②「カスタムサイズ」を押します。

 

 

カスタムサイズを縦「650」横「150」と設定しましょう。

 

※カスタムサイズは、ご自身のサイトによって適宜調整しましょう。

 

数値を入れたら、下の「新しいデザインを作成」ボタンを押します。

 

 

すると、上写真のような画面になるかと思います。

 

赤矢印で示した様に、自分のブログサイトとイメージが合えば、テンプレートを使用することでオシャレなロゴが作成できますよ♪

 

ほえるんブログは、テンプレートは使用せず1から作成です。

 

1からといってもそんなに難しくないのでご安心ください。

 

 

「テキスト」をクリック後、②「見出しを追加」を押します。すると、③の様に見出しが追加されます。

 

 

①見出し内の名前を「Whale Blog」と入力し、右端に移動させました。

 

「素材」をクリック、③「Square」を選択すると、④の様に四角が現れます。

 

四角を縦、横に拡張します。

 

 

次は、図形の「すべて表示」をクリック。

 

 

「Square Border」をクリックします。

 

 

先ほど作成した「Square」の中に、縦と横を合わせた「Square Border」を入れます。

 

 

外に出していた文字を中に入れるのですが、①で色を「白色」へ変更、②で「フォントサイズ」を拡大し、③で「フォント」を変更します。

 

ほえるん
ほえるん
「Whale Blog」と同じ、フォントはかなり下にあります。

 

これで、ロゴの作成が完了しました。

 

 

右上にある、ダウンロードをクリック。

 

 

ファイルの種類は、PNGのままで大丈夫です。

 

後は「ダンロード」をクリックすることで保存場所を選択できます。

 

ほえるん
ほえるん
これで「ロゴ作成」は完了ですね。

 

 

 

 

ヘッダー画像追加時と同様に、「Cocoon設定」 ➤ 「ヘッダー」をクリックします。

 

下にスクロールすると、

 

 

ヘッダーロゴを挿入する場所があります。

 

 

「選択」をクリックして、先ほど作成したロゴを挿入しましょう。

 

ほえるん
ほえるん
以上で、写真とロゴの設定方法は完了です。

 

きちんと設定されているか確認して下さいね。

 

グローバルメニューの設定方法

 

グローバルメニューって何?と思われた方いませんか?

 

上写真内に示してありますが、①「ヘッダー画像」、②「ロゴ」、③「グローバルメニュー」、④「ピックアップコンテンツ」と区別されています。

 

今回は、③「グローバルメニュー」の設定方法について解説します。

 

 

ダッシュボード内の、①「外観」から、②「メニュー」を選択します。

 

「メニュー名」は何でも大丈夫です。例えば、「ヘッダーメニュー」「グローバルメニュー」と記入して下さい。

 

記入後は、④「メニューの作成」をクリック。

 

 

すると上写真の様になりますので、①「固定ページ」内の「ホーム」「プライバシーポリシー」「お問い合わせ」にチェックし、②「メニューに追加」をクリックします。

 

すると③の様に追加されますので、④「ヘッダーメニュー」「ヘッダーモバイルメニュー」にチェックし、⑤メニューを保存をクリックします。

 

ほえるん
ほえるん
①の固定ページ内にある「ホーム」の作成方法について解説します。

 

 

「プライバシーポリシー」「お問い合わせ」については、以前の記事を参考に作成されて下さい。

 

 

 

「カスタムリンク」をクリック、「URL」には自分のブログURLを、「リンク文字列」にはホームと入力し、「メニューに追加」を押すと完了です。

 

 

ちなみに、赤枠内にある①「ホーム」、②「プライバシーポリシー」、③「お問い合わせ」は一番上が左に表示されるようになっています。

 

つまり左から、① ➤ ② ➤ ③の順番で表示されます。

ほえるん
ほえるん
これで「グローバルメニュー」の設定は完了です。

 

 

ピックアップメニューの設定方法

 

続いて、上写真で示した⑤「ピックアップメニュー」の設定方法について解説します。

 

 

グローバルメニュー作成時と同様に、①「外観」、②「メニュー」、③「新しいメニューを作成しましょう」をクリック。

 

 

①メニュー名に「ピックアップ」と入力し、②「メニューを作成」をクリック。

 

 

「カテゴリー」内にある②「Blog」、「Business」、「Life」、「Twitter」を選択し③「メニューに追加」をクリックする。

 

④の様に表示されるので、⑤「ヘッダーメニュー」「ヘッダーモバイルメニュー」を選択し、⑥メニューを保存しましょう。

 

※ピックアップメニューは、4つがおススメです。3つだと余計な空白ができてしまうからです。

 

ほえるん
ほえるん
ここまでは「グローバルメニュー」設定時と同じですね。

 

 

 

続いて、①「Cocoon設定」内の②「おすすめカード」をクリックします。

 

 

「全ページで表示」、②「ピックアップ」を選択してください。

 

③は表示スタイルが変更できます。赤枠内で更に囲っている所にカーソルを合わせると、イメージ画像が出てきますので是非参考にされて下さい。

 

④、⑤はイメージ画像を確認し、気に入ればチェックを入れて下さい。

 

設定が完了したら、⑥「変更をまとめて保存」をクリックします。

 

ほえるん
ほえるん
これで、設置完了です。

 

 

ただし、上記設定のみだとアイキャッチ画像が入っていません。

 

画像を挿入していく方法は、

 

 

ダッシュボード内の①「投稿」から、②「カテゴリー」を選択し、各カテゴリーにカーソルを合わせ、③「編集」をクリックします。

 

 

下にスクロールしていくと、アイキャッチ画像を挿入する場所がありますので、そこで取り込んでください。

 

ちなみに自分のアイキャッチ画像は、「O-DAN」でダンロードしています。

 

 

残りのカテゴリーにも、同手順を実施することで4つ全てに写真を挿入することができます。

 

さぁここから先は行動です。

 

最後までご覧頂いた方や、読みながら設定された方大変ご苦労様でした。

 

ブログのデザインはお家で例えると、外観のようなものです。

 

一度訪問して、見た目や居心地や良ければ再訪問したくなります。

 

逆に上記が悪ければ立ち去ってしまいます。

 

ほえるん
ほえるん
デフォルトのままよりも、ある程度設定した方が良いですよね。

 

 

まとめです。

  1. スキンの設定方法
  2. ヘッダー画像(ロゴ)の設定方法
  3. グローバルメニューの設定方法
  4. ピックアップコンテンツの設定方法

 

上記4点を設定するだけでも、十分オリジナリティが出ますので是非参考にしてみてはいかがでしょうか?

 

以上で、デザインの設定方法に関する記事でした。

 

また次の記事でお会いしましょう。