- Cocoonのデザインを変更したいけどやり方がよくわからない
- Cocoon設定でデザインをカスタマイズしたい
本記事はWordPressテーマCocoonを使用している人へ向けて、上記のような悩みを解消するためにあります。
5分もかからずに終わることから、一生懸命やらないとできないことまでいろんなことを紹介していきます。
- トップページ
- 見出し
- サイドバー
- 表
- ヘッダーフッター
- モバイル(スマホ)表示
- ブログカード
などなど、かなり多様なまとめになります。詳細説明が必要な部分に関しては各ページへリンクを貼りました。気になるところを見に行くようにしてください。
目次から好きなところへ飛べます
吹き出し
オリジナルの吹き出しを作れると独自性があるブログになります
設定はCocoon設定→吹き出しからやりますが、タブではなく別項目であるので注意しましょう。設定方法は次の記事を確認ください。
フォント・文字サイズ
Cocoon設定→全体よりサイトフォントとモバイルサイトフォントを変更できます。多くのウェブページがサイズ16px~18pxです。
私はフォントサイズを16px,モバイルサイトフォントの文字太さを若干細い300に設定しています。
WEBフォントを選択するとめっちゃ微妙にサイトスピードが落ちるので注意です。
サイドバー
サイドバーに設置する内容は外観→ウィジェットで設定します。
サイドバーを右側にするか、左側にするか、サイドバーを表示しないページはあるかなどの設定はCocoon設定→全体で設定できます。
サイドバーの基本的な設定方法は別記事にて詳細を説明しています。
ファビコン(サイトアイコン)
これは絶対やった方がいい設定です。ファビコンとはサイトアイコンのこと。タブ開いたときに出るアイコンです。
やりかたは外観→カスタマイズ→サイト基本情報→サイトアイコンを選択よりアイコンとする画像をアップロードしましょう。
画像が反映されるまでいくらか時間がかかると思います。設定する画像はPNG形式の512px×512pxが推奨されています。
ヘッダー
あなたのブログの印象にとても影響するのでとても重要です。Cocoon設定→ヘッダーより設定します。
独自性を出すならロゴはオリジナルの画像を準備しましょう。ヘッダーの背景画像も必要であれば準備しましょう。
参考リンクを下に張っておきます。
グローバルナビメニュー(ヘッダーメニュー)
ヘッダー部分のメインメニュー設定です。ホーム・カテゴリー・お問い合わせなどを設置しましょう。
外観→メニューよりヘッダー用メニューを作成したあと、Cocoon設定→ヘッダーよりヘッダーレイアウトでメニューの位置関係の設定。
グローバルナビメニュー色、グローバルナビメニュー幅でメニュー色と幅を設定しましょう。
メニューの作り方は下の記事で解説しています。
※あなたの設定しているスキンによっては変更できない項目もあります。
Twitterシェア時に表示する画像の設定
ここを設定していないとツイッターでシェアした時にコクーンテーマの画像が出てきます。自分らしさを出すには大切な設定です。
Cocoon設定→OGPから、下の方にホームイメージがあります。ホームイメージ画像を準備してアップロードしましょう。
★注目ブログの紹介
— けい📌ガチSEO×エコSNS (@himarin_mi) February 27, 2020
とうげさん@kenjineer0224の
「峠の雑記ブログ」
興味をそそるアイキャッチ◎
デザインの統一感◎
吹き出しのセンス◎
画像や表が多く読みやすい記事◎
とにかく個性とセンスの良さが光るブログです☺️https://t.co/AZyFQEFBYb
本文の幅・サイドバーの幅
メインコンテンツの部分とサイドバー部分の幅を調整します。デフォルトだとちょっと広いと思います。
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つの方法で表示することができます。
設置するとぐっとそれっぽいサイトになります。それぞれCocoon設定→通知、アピールエリア、おすすめカード、カルーセルで設定します。
説明記事、関連記事リンクを張っておきますので、そちらを確認ください。
フッター
サイト下部のメニューやプロフィールなどの設定です。フッターに設置するメニューは外観→メニューよりフッター用のメニューを作成してください。
そしたらCocoon設定→フッターでフッター詳細の設定をしましょう。
また、外観→ウィジェットでフッターにウィジェットを設置できます。これで私はカテゴリーやプロフィールを設置しています。
ウィジェットはモバイル用、PC用で分かれていますので両方に設置する必要があります。
モバイル(スマホ)表示メニュー
スマホ用のメニューはスマホ用で作成しないと表示できません。表示できるメニューはいくつかあります。
ヘッダーモバイルメニュー | |
ヘッダーモバイルボタン | |
フッターモバイルボタン | |
モバイルスライドインメニュー |
それぞれ外観→メニューで作成、設置をしましょう。また、Cocoon設定→モバイルでメニューのレイアウトをある程度変更できます。
私はフッターモバイルボタンは設置せず、ヘッダーモバイルボタンに検索・ロゴ・メニューを並べています。
詳細は下の記事で解説しています。
ボックスメニュー
アイコンを並べてメニューにした目立ちやすいメニューです。ウィジェット制御で記事上や記事下、サイドバーに設置ができます。
詳細は下記記事を確認ください。
見出し
見出しはスキンの影響を大きく受けます。見出しを変更したい場合はスキンの変更をまず検討しましょう。
スキンをそのままに見出しのデザインだけを変更したい場合はCSSでカスタマイズが必要です。詳細は下の参考記事を確認ください。
オリジナル画像の準備
あなたらしさを出すのに手っ取り早いのは画像です。前の項目と重複するところもありますが、設定しておいた方がいい画像をリストアップしておきます。
画像の名前 | 設定するところ |
ファビコン | 外観→カスタマイズ→サイト基本情報→サイトアイコン |
ホームイメージ画像 | Cocoon設定→OGP |
NO IMAGE画像 | Cocoon設定→画像 |
ヘッダーロゴ | Cocoon設定→ヘッダー |
ヘッダー背景 | Cocoon設定→ヘッダー |
吹き出し画像 | Cocoon設定 吹き出し ※タブではなく別項目テンプレートや高速化と同じ並び |
プロフィールアイコン | ユーザー→プロフィール |
むやみにネット上の画像を使用すると、著作権の侵害になります。どこから画像をもってくるかは下の記事で確認ください。
Cocoonで外観・デザインを整える
本記事では、Cocoon使用者に向けて外観・デザインを整えるための設定方法を紹介してきました。
あなたが知らなかったことで、やってよかったこともあったのではないでしょうか?
Cocoonは本当にいろいろなことができます。そのため、できることが多すぎて何をやっていいのかよくわからないということにもなります。
そんなあなたの手助けになれたのなら私は嬉しく思います。
Cocoonの「困った」を解決する記事
Cocoonの使い方
当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。
コメント