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

想定読者

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

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

本記事の内容

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

エコおじい

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

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

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

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

エコおじい

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

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

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

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

エコおじい

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

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

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

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

エコおじい

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

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

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

検索窓を設置する

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

プロフィールを設置する

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

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

エコおじい

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

あわせて読みたい

【超簡単】Cocoonプロフィールのカスタマイズ｜サイドバーに設置にしよう Cocoonプロフィールをカスタマイズしたい方「設置する前の準備物や設置する方法、カスタマイズ方法を詳しく知りたい」 本記事は、上記の方に向けて執筆しています。 本...

カテゴリーを設置する

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

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

タグを設置する

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

エコおじい

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

人気記事を設置する

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

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

あわせて読みたい

【超役立つ】Cocoon人気記事を設置・カスタマイズ｜CSSコピペOK Cocoon人気記事をカスタマイズしたい方「CSSを使ってカスタマイズする方法を知りたい」 本記事は、上記の方に向けて執筆しています。 本記事の内容 Cocoon人気記事をサ...

Twitterを設置する

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

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

あわせて読みたい

【初心者向け】Cocoonのカスタマイズと使い方【WordPress設定】 Cocoonのカスタマイズに興味がある方「Cocoonのカスタマイズ全てを知り尽くしたい。」 本記事は、上記の方に向けて執筆しています。 本記事の内容 Cocoonの初期設定Coco...

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

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

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

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

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

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

エコおじい

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

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

.sidebar {
width: px;
}

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

エコおじい

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

WordPressカスタマイズ外注したい方

カスタマイズを外注したい方は「ココナラ」がおすすめです。

このように、ココナラでは3000円〜5000円でWordPressのカスタマイズ対応をしてくれます。

先ほどの画像の方のように、ココナラには沢山の案件をこなしている方が在籍しているので、カスタマイズ外注したい方はココナラを活用してみてください。

1分以内に完了！無料会員登録はこちら

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

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

エコおじい

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

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

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

エコおじい

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

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

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

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

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

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

エコおじい

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