【Cocoon】カスタマイズ方法|おしゃれなブログに様変わり【CSS不要】

「ブログをカスタマイズしたい」

「おしゃれにカスタマイズする方法は?」

「CSSを使わずにカスタマイズできる?」

この記事では、そんな方に向けて、CocoonでCSS編集せずにカスタマイズする方法を解説します。

かめコンパス

こんにちは、かめコンパスです!

この記事を読めば、あなたも簡単に

  • CSS編集せずにカスタマイズ

できるようになります。

私もコードを入力しないとおしゃれにカスタマイズできないと思っていたのですが、

本記事の方法でCSS編集せず、おしゃれなブログを作ることができました。

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください!

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

目次

当ブログのカスタマイズ例【CSS不使用】

WordPressテーマ「Cocoon」は、独自のカスタマイズ機能が事前に備わっており、CSS編集なしでおしゃれなブログを作成できます。

Cocoonにはテーマ独自のカスタマイズ機能も充実しています。これにより、CSSやPHPなどを必要とせずに、オリジナリティーのあるサイトを作成することも可能です。

引用:Cocoon公式サイト-Cocoon独自のテーマ変更機能のまとめ

当ブログでもCocoonを利用しており、CSS編集せずにカスタマイズしています。

上部リンク先のページのように、CSS編集せずおしゃれにカスタマイズする方法をこれから紹介します。

かめコンパス

無料テーマでもカスタマイズ機能が盛りだくさん!

Cocoonでサイト全体のカスタマイズ【CSS不使用】

Cocoonでサイト全体をCSS編集なしでおしゃれにカスタマイズする方法です。下記10つの項目を紹介します。

かめコンパス

順番に解説するね

ページ全体の色をカスタマイズ

Cocoonでページ全体の色をカスタマイズしていきます。

WordPress管理画面を開き、Cocoon設定全体の順にクリックします。

「Cocoon設定」、「全体」がある場所
  • ページ内の背景色を変えたい場合…「サイト背景色」で変更します
「サイト背景色」がある場所
  • ページ外のテキスト・背景色を変えたい場合…「キーカラー」で変更します
「キーカラー」がある場所

カスタマイズする項目が変更できない場合は、スキン制御されているのが原因です。

スキン制御の対処法は、下の記事を参考にしてください。

変更をまとめて保存をクリックしましょう。

「変更をまとめて保存」がある場所

これでページ全体の色をカスタマイズできます。

かめコンパス

ブログのイメージカラーを決めるうえで重要だね

設定したい色が見つからない場合は、設定したい色のカラーコードを入力すると見つかります。

カラーコードを入力する場所

カラーコードで設定したい色を見つける方法は、下の記事を参考にしてください。

「サイト型トップページ」

サイト型トップページとは、目的や好みに合わせて記事やコンテンツを配置したり、おしゃれにデザインしたトップページのことです。

Cocoonでは、ブログ型トップページがデフォルトですが、サイト型トップページへかんたんにカスタマイズできます。

かめコンパス

記事数が多くなったら「サイト型」にしたいね

Cocoonでサイト型トップページの作り方については、下の記事を参考にしてください。

「スキン」

Cocoonでは、スキンを変更することでサイトのデザインをカスタマイズできます。

かめコンパス

スキンを変えれば雰囲気がガラッと変わるよ

スキンを変更する方法は、WordPress管理画面を開き、Cocoon設定スキンの順にクリックします。

「Cocoon設定」、「スキン」がある場所

スキン一覧の中から利用したいスキンを選びましょう。

スキン一覧がある場所

変更をまとめて保存をクリックします。

「変更をまとめて保存」がある場所

これでスキンの変更ができます。

かめコンパス

当ブログではイノセンスを利用しているよ

Cocoonで全スキンのデザインを見てみたいという人は、下の記事を参考にしてください。

「ヘッダー」

ヘッダーをカスタマイズすることで、サイト上部のデザインを変更したり、固定ページやカテゴリーページを設置することができます。

当ブログのヘッダー

あなたのサイトに来たユーザーが最初に見る画面にヘッダーもあるので、

「何が書いているサイトなのか?」が一目でわかるようカスタマイズしたいですね。

かめコンパス

ロゴやヘッダー背景画像を設定してオシャレ度UP

Cocoonでヘッダーをカスタマイズする方法は、下の記事を参考にしてください。

「フッター」

フッターはサイト下部のことで、主にプロフィールやお問い合わせフォーム、プライバシーポリシーなどを設置する場所です。

当ブログのフッター
かめコンパス

PC・スマホそれぞれで設定できるよ

Cocoonでフッターをカスタマイズする方法は、下の記事を参考にしてください。

「サイドバー」

もしサイドバーを表示する場合、

「トップページではこの項目を表示させよう」
「この記事にはこの項目だけ表示させよう」

など、ページごとでサイドバーに表示させる項目を選べます。

当ブログのサイドバー
かめコンパス

例えばAとBのジャンルがある場合、A記事のサイドバーにB記事を表示させないこともできるよ

Cocoonでサイドバーをカスタマイズする方法は、下の記事を参考にしてください。

また、ページ別でサイドバーを非表示にしたい場合は、下の記事を参考にしてください。

「カテゴリー」

ヘッダー・フッターに設置するカテゴリーを決めたり、

トップページに表示する記事一覧をカテゴリー別で表示させる設定などができます。

当ブログのカテゴリー

同じジャンルの記事を見たいというユーザーが迷子にならないように、カテゴリーリンクを設置しましょう。

かめコンパス

いろんな場所にカテゴリーを設置することをおすすめ

Cocoonでカテゴリーをカスタマイズする方法は、下の記事を参考にしてください。

「おすすめカード」

おすすめカードとは、好きな記事やその他コンテンツの画像リンクをヘッダー下に目立つよう表示できるカスタマイズ機能のことです。

当ブログのおすすめカード

おすすめカードを設置することで、読んで欲しい記事にユーザーを誘導でき、クリック率アップが期待できます。

かめコンパス

記事が大きめに表示されるのでかなり目立つね

Cocoonでおすすめカードを設定する方法は、下の記事を参考にしてください。

「アピールエリア」

アピールエリアとは、ユーザーにアピールしたい内容やコンテンツをヘッダー下に表示できるカスタマイズ機能のことです。

当ブログのアピールエリア

収益性の高い記事や読んでほしい記事がある人におすすめです。

かめコンパス

画像を用いておしゃれさUP

Cocoonでアピールエリアを設置する方法は、下の記事を参考にしてください。

「ボックスメニュー」

ボックスメニューとは、テキストだけのメニューとは異なり、アイコン画像も一緒に表示できるカスタマイズメニューになります。

当ブログのボックスメニュー

サイドバーやヘッダー下に設置することができ、視認性が高まります。

かめコンパス

おしゃれなアイコンも無料でダウンロードできるよ

Cocoonでボックスメニューを設置する方法は、下の記事を参考にしてください。

Cocoonで投稿ページのカスタマイズ【CSS不使用】

Cocoonで投稿ページをCSS編集なしでおしゃれにカスタマイズする方法です。下記9つの項目を紹介します。

かめコンパス

順番に解説するよ

「見出し」

Cocoonでは見出しの

  • レベル
  • フォント

などをカスタマイズできます。

カスタマイズした見出しの例

Cocoonで見出しをカスタマイズする方法は、下の記事を参考にしてください。

「リスト(箇条書き)」

Cocoonのリストは、

  1. 数字

で箇条書きできる機能がついています。

また、以下のようなアイコンリストを使うことで、

  • アイコンの設定
  • アイコンの色
  • ボーダー・背景・テキスト色

を細かくカスタマイズできます。

かめコンパス

アイコンリストはおしゃれで私もよく使ってるよ

Cocoonでリストをカスタマイズする方法は、下の記事を参考にしてください。

「ボックス」

Cocoonで利用できるボックスは全8種類あり、以下のように

ボックス
かめコンパス

ボックスの中にリストを入れることもできるよ

Cocoonでボックスをカスタマイズする方法は、下の記事を参考にしてください。

「アイキャッチ画像」

アイキャッチ画像とは、ユーザーの目をひきつけるための画像で、主にサムネイルに使われます。

アイキャッチ画像の表示例
かめコンパス

検索結果やサイト内の記事一覧で表示されるよ

アイキャッチ画像を設定することで、

  • ページの滞在時間が延びる
  • 回遊率が上がる
  • サイトがオシャレになる

などのメリットがありますよ。

Cocoonでアイキャッチ画像を設定する方法は、下の記事を参考にしてください。

「吹き出し」

吹き出しは、セリフを言うアイコンのことです。

かめコンパス

私が吹き出しだよ

吹き出しを使えば、

  • 自分の意見や感情を伝えられたり
  • オリジナルな記事に仕上がる
  • 記事がおしゃれに仕上がる

などのメリットがあります。

表示位置を変えたり、スタイルを変えたりなどのカスタマイズもできますよ。

Cocoonで吹き出しの設定方法は、下の記事を参考にしてください。

「目次」

目次は、訪れた記事に何が書いてあるかを把握するため重要です。

目次が表示されている様子

目次があれば、

  • 記事の内容が大まかに分かる
  • 読みたい場所にジャンプできる

と言うメリットがあります。

かめコンパス

目次がないと離脱率が上がってしまうよ

目次にどのレベルの見出しまで表示させるかのカスタマイズができます。

Cocoonで目次を表示させる方法は、下の記事を参考にしてください。

「ブログカード」

ブログカードとは、別記事へ飛ぶリンクを記事タイトルや画像などもあわせて表示させる埋め込み形式のことです。

ブログカードの表示例
かめコンパス

視認性がアップするね

ラベルや画像を表示させたり、リンクの開き方を選んだりなどのカスタマイズができます。

Cocoonでブログカードを設定する方法は、下の記事を参考にしてください。

「ボタン」

ボタンは、内部リンクや外部リンクをボタン化させるために使います。

\当ブログのトップページへ/

ボタンリンクはカスタマイズ性が高く、

  • サイズや形を変えたり
  • 色を変更できたり
  • ボタンを光らせたり

できます。

Cocoonでボタンをカスタマイズする方法は、下の記事を参考にしてください。

「X(Twitter)」

ブログ記事やサイドバーなどにTwitterを埋め込むことができます。

埋め込む要素は、

  • 特定のツイート
  • タイムライン
  • フォローボタン

があります。

CocoonでTwitterを埋め込む方法は、下の記事を参考にしてください。

まとめ:CSS編集なしでおしゃれにカスタマイズしよう!

今回は、CocoonでCSS編集せずにカスタマイズする方法を紹介しました。

当ブログでは、Cocoonに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。

かめコンパス

ためになったという人は“コメント”してくれると嬉しいです!

CocoonでCSSを使わずカスタマイズする方法の記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次