【Cocoon編】サイドバーのカスタマイズ|CSSコピペ可

想定読者

Cocoonサイドバーのカスタマイズしたい方「サイドバーの設定とカスタマイズを詳しく教えて欲しい」

本記事は、上記の方に向けて執筆しています。

本記事の内容

  • Cocoonサイドバーの表示位置と表示ページを指定する方法
  • Cocoonサイドバーのカスタマイズ方法
  • CocoonサイドバーのCSSカスタマイズ方法

この記事はCocoonを長年活用していたブロガーが執筆しています。
今は「SWELL」というテーマに変更していますが、サブブログではCocoonを活用しています。

おにちゃん

5分で読める内容になっていますので、ぜひ最後までご覧ください。

記事の内容

サイト運営者

ブログアイコン例:おにちゃん
おにちゃん(22歳)
@onityanzyuku01

大学4年|経済学部(現在休学中)

おにちゃん塾を3年ほど運営しております。副業、フリーランス、独立までの情報を網羅していく予定です。

Cocoonサイドバーの表示位置と表示ページの指定

まずはCocoonサイドバーの表示位置と表示ページの指定を行なっていきましょう。

WordPress管理画面<Cocoon設定<全体へ移動しましょう。

Cocoonサイドバーの表示位置と表示ページの指定
Cocoonサイドバーの表示位置と表示ページの指定
おにちゃん

まずはサイドバーの位置を決めましょう。

  • サイドバー右
    →最近のブロガーは皆右側
  • サイドバー左
    →法人はこちらが多い

おにちゃん塾では、サイドバー右を選択しています。
なぜなら、デザイン的にも主流が右側だから。

↑あまり大事なポイントではないので、自分がどっちにしたいかで表示位置は変えましょう。

続いては、サイドバーの表示状態を設定していきましょう。

  • 全てのページで表示
  • フロントページで非表示
おにちゃん

多くのブロガーが上記のどちらかでサイドバーを表示しています。
僕はブログメディアでは「全てのページ」、コーポートサイトでは「フロントページで非表示」にしています。


Cocoonサイドバーの表示設定をカスタマイズする

表示位置と表示状態の解説の次は、実際にCocoonサイドバーをカスタマイズしていきましょう。

Cocoonサイドバーの完成イメージ
  1. 検索窓
  2. プロフィール
  3. カテゴリー
  4. タグ
  5. 人気記事
  6. Twitter

↑ゴールはこんな感じです。
Cocoonサイドバーにこれだけの機能を実装すれば問題なしです。

おにちゃん

全然難しくないので、安心してください。

サイドバーを設置するにはWordPress管理画面<外観<ウィジェットへ行く必要があります。

サイドバーの初期設定
サイドバーの初期設定

この項目をカスタマイズすることで、サイドバーを完成させていきます。


検索窓を設置する

検索窓を設置する
検索窓を設置する

まずは、Cocoonサイドバーに検索窓を設置しましょう。
とはいえ、Cocoonサイドバーでは最初から検索窓が設置されているので、自分で何かする必要はありません。


プロフィールを設置する

プロフィールを設置する
プロフィールを設置する

Cocoonサイドバーにプロフィールを設置するのは簡単です。

利用できるウィジェットからプロフィールを選び、【ウィジェットを追加】の項目をクリックするだけです。

おにちゃん

プロフィールをカスタマイズする方法は下記の記事で紹介しています。


カテゴリーを設置する

カテゴリーを設置する
カテゴリーを設置する

Cocoonサイドバーにカテゴリーを設置する方法はこれまでに解説した通りです。

初期設定で、カテゴリーが実装されていますが、デザインが良くないのでこちらに変更しましょう。


タグを設置する

タグを設置する
タグを設置する

Cocoonでタグを設置する方法もこれまでに紹介した通りです。

おにちゃん

タグを正しく設定するとSEO対策にも繋がりますので、ぜひ取り入れてみてください。


人気記事を設置する

人気記事を設置する
人気記事を設置する

Cocoon以外のテーマで人気記事を実装するにはプラグインを導入する必要がありますが、Cocoonでは初期機能として実装することができます。

人気記事の設定は細かくカスタマイズできます。
本記事では、長くなってしまうので省略していますが、大事な部分なのでお時間がある方は下記の記事で詳しく学んでみてください。


Twitterを設置する

CocoonサイドバーにTwitterを埋め込む方法は非常に簡単です。

下記の記事で、埋め込む方法とカスタマイズを紹介していますので、ぜひ下記の記事をご覧ください。


【CSS編】Cocoonサイドバーのカスタマイズ

CSSをいじりますので、必ずバックアップは取っておきましょう。
CSSカスタマイズはあくまで自己責任でお願いします

ここからは、CSSでできるCocoonサイドバーのカスタマイズを紹介させていただきます。

CSS編|サイドバーのカスタマイズ
  1. 見出しのカスタマイズ
  2. サイドバーの幅をカスタマイズ


Cocoonサイドバーの見出しをカスタマイズ

.sidebar h3 {
background: カラーコード;
}

上記のコードに好きな色を指定することで、Cocoonサイドバーの見出しをカスタマイズすることができます。

サイドバーの見出し色を変更
サイドバーの見出し色を変更
デフォルト設定
デフォルト設定
おにちゃん

サイドバーの見出しカラーは、運営サイトのメインカラーに依存しています。メインカラーが嫌な場合は上記のコードでカスタマイズしてみてください。


Cocoonサイドバーの幅をカスタマイズ

.sidebar {
width: px;
}

Cocoonサイドバーの幅指定は上記のソースコードで可能です。

おにちゃん

どんな目的で幅を変えるのか僕は想像できませんが、変えたい方は上記のコードを活用してみてください。


まとめ:Cocoonサイドバーのカスタマイズ

ここまでで「【Cocoon編】サイドバーのカスタマイズ|CSSコピペ可」の解説は以上です。

Cocoonサイドバーのカスタマイズ
  • Cocoonサイドバーの初期設定
  • Cocoonサイドバーのカスタマイズ
おにちゃん

本記事は以上です。
最後までご覧いただきありがとうございました。


Cocoonユーザー向けTwitterアカウント

おにちゃん塾の運営者(@onityanzyuku01)ではブログ関連の情報を随時発信しています。

  1. ブログ運営
  2. アフィリエイト収益化
  3. SEO対策含むWebマーケティング
おにちゃん

上記を知りたい方はぜひフォローしてください。


Cocoonではないテーマでブログ運営したい方

Cocoon以外のテーマ、具体的には有料テーマでブログ運営してみたい方は「SWELL」をおすすめします。

おにちゃん

今、稼いでいるブロガー達はこぞってSWELLを活用しています。

デザイン性+機能面を考えると当然な気がします。
Cocoonを運営している凄腕のテーマ開発者とも提携しているので、間違い無いです。

有料テーマに挑戦したい方はSWELLがおすすめです。


Cocoonを本格的にカスタマイズしたい方

→プログラミングを学びましょう。

Cocoon含む、WordPressを扱うためには下記の言語が必要です。

  1. HTML
  2. CSS
  3. JavaScript(React)
  4. PHP(WordPress)
おにちゃん

おにちゃん塾で、すべての言語を学べます。
カスタマイズを本格的に始めたい方はぜひご覧ください。

URLをコピーする
URLをコピーしました!
記事の内容
閉じる