PR

【Cocoon】デザインを整える簡単おすすめカスタマイズまとめ

Cocoon デザイン カスタマイズ Cocoon
  • Cocoonのデザインを変更したいけどやり方がよくわからない
  • Cocoon設定でデザインをカスタマイズしたい

本記事はWordPressテーマCocoonを使用している人へ向けて、上記のような悩みを解消するためにあります。

5分もかからずに終わることから、一生懸命やらないとできないことまでいろんなことを紹介していきます。

  • トップページ
  • 見出し
  • サイドバー
  • ヘッダーフッター
  • モバイル(スマホ)表示
  • ブログカード

などなど、かなり多様なまとめになります。詳細説明が必要な部分に関しては各ページへリンクを貼りました。気になるところを見に行くようにしてください。

目次から好きなところへ飛べます

スポンサーリンク

吹き出し

オリジナルの吹き出しを作れると独自性があるブログになります

設定はCocoon設定吹き出しからやりますが、タブではなく別項目であるので注意しましょう。設定方法は次の記事を確認ください。

吹き出しの位置
Cocoon設定の吹き出し

フォント・文字サイズ

Cocoon設定全体よりサイトフォントとモバイルサイトフォントを変更できます。多くのウェブページがサイズ16px~18pxです。

私はフォントサイズを16px,モバイルサイトフォントの文字太さを若干細い300に設定しています。

WEBフォントを選択するとめっちゃ微妙にサイトスピードが落ちるので注意です。

サイドバー

サイドバーに設置する内容は外観ウィジェットで設定します。

サイドバーを右側にするか、左側にするか、サイドバーを表示しないページはあるかなどの設定はCocoon設定全体で設定できます。

サイドバーの基本的な設定方法は別記事にて詳細を説明しています。

ファビコン(サイトアイコン)

これは絶対やった方がいい設定です。ファビコンとはサイトアイコンのこと。タブ開いたときに出るアイコンです。

ファビコン
ファビコン

やりかたは外観カスタマイズサイト基本情報サイトアイコンを選択よりアイコンとする画像をアップロードしましょう。

画像が反映されるまでいくらか時間がかかると思います。設定する画像はPNG形式の512px×512pxが推奨されています。

ヘッダー

あなたのブログの印象にとても影響するのでとても重要です。Cocoon設定ヘッダーより設定します。

独自性を出すならロゴはオリジナルの画像を準備しましょう。ヘッダーの背景画像も必要であれば準備しましょう。

参考リンクを下に張っておきます。

グローバルナビメニュー(ヘッダーメニュー)

ヘッダー部分のメインメニュー設定です。ホーム・カテゴリー・お問い合わせなどを設置しましょう。

外観メニューよりヘッダー用メニューを作成したあと、Cocoon設定ヘッダーよりヘッダーレイアウトでメニューの位置関係の設定。

グローバルナビメニュー色グローバルナビメニュー幅でメニュー色と幅を設定しましょう。

メニューの作り方は下の記事で解説しています。

※あなたの設定しているスキンによっては変更できない項目もあります。

Twitterシェア時に表示する画像の設定

ここを設定していないとツイッターでシェアした時にコクーンテーマの画像が出てきます。自分らしさを出すには大切な設定です。

Cocoon設定OGPから、下の方にホームイメージがあります。ホームイメージ画像を準備してアップロードしましょう。

ホームイメージを設定するとこんな感じになります

本文の幅・サイドバーの幅

メインコンテンツの部分とサイドバー部分の幅を調整します。デフォルトだとちょっと広いと思います。

Cocoon設定カラムから設定します。参考として私の設定値は以下にしています。色が違うところがデフォルトから変更した部分

コンテンツ幅690
コンテンツ余白幅45
コンテンツ枠線幅0
コンテンツ枠線色未入力
サイドバー幅320
サイドバー余白幅19
サイトバー枠線幅0
サイドバー枠線色未入力
カラム間の幅25

微調整してみてください

トップページの表示形式

デフォルトのトップページはいかにもブログって感じの見た目をしています。もっとおしゃれにしたい人もいるはずです。

記事一覧の表示形式を変えるだけでもいい感じになりますので、設定していきましょう。Cocoon設定インデックスです。

詳細は以下の記事から確認ください。

パンくずリスト

今見ている記事がサイトのどの位置にあるのかわかりやすくするためのナビゲーションです。人にもグーグルのロボットにもアピールするために設置が必要です。

Cocoon設定投稿で設定します。詳細は以下の記事で確認ください。

行間と段落の間隔

Webで読みやすい文章は行間と段落の間隔が広めにとられています。デフォルトだとちょっと狭い。

Cocoon設定本文で設定します。詳細は下の記事で確認ください。

表(テーブル)

表(テーブル)はブロックエディタの表ブロックでだいたいのデザインが決まります。

その他、サイトのキーカラーで表の色、Cocoon設定本文でスクロール設定ができます。詳細は下の記事より確認ください。

目次

目次は記事の全体像を把握するのにあった方がいいです。しかも結構タップされるので設置してないと損ですね。

Cocoon設定目次から設定します。詳細は下の記事たちから確認ください。

SNSシェアボタン・フォローボタン

Cocoon設定SNSシェアまたはSNSフォローで設定します。

不要なボタンを消したり、必要なボタンを足したり、トップのボタンは必要なければ表示させなくしたりできます。

ボタンの印象が強ければボタンカラーを白抜きにしましょう。

スキンによっては丸い形になってたりもします。私の場合は下の記事を参考にCSSを使ってカスタマイズしました。

Twitterの設置・連携

記事中やサイドバーなどにツイートを埋め込む方法があります。下の記事からご確認ください。

ツイッターとブログを連携する方法は下の記事を確認ください。

アイキャッチ画像

記事の印象を決めるアイキャッチ画像は超重要ですね。Cocoon設定画像で設定します。

見ておいて欲しいのは全体画像設定サムネイル画像の比率NO IMAGE設定画像アップロードです。SNSシェアの時と同様にサイトのイメージ画像を設定しておきましょう。

ブログカード

Cocoon設定ブログカードより、ブログカードの設定ができます。基本的な使い方は下の記事より確認ください。

「続きを読む」を付けるなどのカスタマイズは下の記事を確認ください。

ヘッダー周りのアピール設定

ヘッダー周辺の記事上部には目立たせたい記事を4つの方法で表示することができます。

  1. メッセージ通知
  2. アピールエリア
  3. おすすめカード
  4. カルーセル

設置するとぐっとそれっぽいサイトになります。それぞれCocoon設定通知アピールエリアおすすめカードカルーセルで設定します。

説明記事、関連記事リンクを張っておきますので、そちらを確認ください。

フッター

サイト下部のメニューやプロフィールなどの設定です。フッターに設置するメニューは外観メニューよりフッター用のメニューを作成してください。

そしたらCocoon設定フッターでフッター詳細の設定をしましょう。

また、外観ウィジェットでフッターにウィジェットを設置できます。これで私はカテゴリーやプロフィールを設置しています。

ウィジェットはモバイル用、PC用で分かれていますので両方に設置する必要があります。

モバイル(スマホ)表示メニュー

スマホ用のメニューはスマホ用で作成しないと表示できません。表示できるメニューはいくつかあります。

ヘッダーモバイルメニューヘッダーモバイルメニュー
ヘッダーモバイルボタンヘッダーモバイルボタン
フッターモバイルボタンフッターモバイルボタン
モバイルスライドインメニューモバイルスライドインメニュー

それぞれ外観メニューで作成、設置をしましょう。また、Cocoon設定モバイルでメニューのレイアウトをある程度変更できます。

私はフッターモバイルボタンは設置せず、ヘッダーモバイルボタンに検索・ロゴ・メニューを並べています。

詳細は下の記事で解説しています。

ボックスメニュー

アイコンを並べてメニューにした目立ちやすいメニューです。ウィジェット制御で記事上や記事下、サイドバーに設置ができます。

詳細は下記記事を確認ください。

見出し

見出しはスキンの影響を大きく受けます。見出しを変更したい場合はスキンの変更をまず検討しましょう。

スキンをそのままに見出しのデザインだけを変更したい場合はCSSでカスタマイズが必要です。詳細は下の参考記事を確認ください。

オリジナル画像の準備

あなたらしさを出すのに手っ取り早いのは画像です。前の項目と重複するところもありますが、設定しておいた方がいい画像をリストアップしておきます。

画像の名前設定するところ
ファビコン外観→カスタマイズ→サイト基本情報→サイトアイコン
ホームイメージ画像Cocoon設定→OGP
NO IMAGE画像Cocoon設定→画像
ヘッダーロゴCocoon設定→ヘッダー
ヘッダー背景Cocoon設定→ヘッダー
吹き出し画像Cocoon設定 吹き出し
※タブではなく別項目テンプレートや高速化と同じ並び
プロフィールアイコンユーザー→プロフィール

むやみにネット上の画像を使用すると、著作権の侵害になります。どこから画像をもってくるかは下の記事で確認ください。

Cocoonで外観・デザインを整える

本記事では、Cocoon使用者に向けて外観・デザインを整えるための設定方法を紹介してきました。

あなたが知らなかったことで、やってよかったこともあったのではないでしょうか?

Cocoonは本当にいろいろなことができます。そのため、できることが多すぎて何をやっていいのかよくわからないということにもなります。

そんなあなたの手助けになれたのなら私は嬉しく思います。

Cocoonの「困った」を解決する記事

Cocoonの使い方

当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。

  • WordPressの初期設定
  • Cocoonのダウンロードとインストール
  • Cocoonの初期設定
  • 記事の書き方
  • カテゴリー・タグ・固定ページの作成
  • 外観・デザインの整え方
  • 収益化

コメント