【コピペでOK】Cocoonのサイドバーカスタマイズまとめ

 

 

こんな悩みを解決します。

 

この記事を書く僕は、ブロガー兼WEBライターとして稼ぐ大学生。 Twitter（kan_blogger）も運営中。

 

WordPressの無料テーマとして非常に優秀なCocoonですが、デフォルトのままだとシンプルすぎると感じる人もいるはず。

 

そこで今回は、Cocoonのサイドバーに必要な項目といらない項目に合わせて見た目も整える方法を紹介します。

 

記事の内容
Cocoonのサイドバーに必要な項目と不必要な項目 Cocoonのサイドバーの色・形を変える方法

 

この記事を読み終わると、プログラミングコードが分からないブログ初心者でも簡単にCocoonのサイドバーをカスタマイズできるようになります。

 

【カスタマイズ】Cocoonのサイドバーに必要な項目と不必要な項目

Cocoonのサイドバーに必要な項目と不必要な項目はこちら

【サイドバーに必要な項目】 プロフィール SNSフォローボタン 検索ボックス 人気記事・新着記事 【サイドバーに不必要な項目】 広告 メタ情報 アーカイブ（ドロップダウンでOK）

 

 

 

プロフィール【必要】

サイドバーにプロフィールがないサイトを使用していたら、今すぐに追加しましょう。

 

なぜなら、サイドバーはトップページにあるため、あなたのサイトの第一印象を与えるものとして「あなたが何者なのか」という信頼性に繋がるからです。

 

【プロフィールの追加方法】

「外観」→「ウイジェット」→「プロフィール」を「サイドバー」に入れる

 

SNSフォローボタン【必要】

ブログの主な流入がSNSの人は有名ブロガーでも少なくありません。

SNS流入を目指しているのに、SNSフォローボタンを設置しないのは致命的ですよね。

 

なぜなら読者はSNSフォローボタンが無ければ有益な記事でも「この人はSNSをやっていない」と思ったらブログを離れてしまうからです。

 

【SNSフォローボタンの追加方法】

プロフィールに入れる場合 「ユーザー」→「プロフィール」→「TwitterやInstagram」にURLを入れる

 

新しくSNSフォローボタンを設置する場合 「外観」→「ウイジェット」→「SNSフォローボタン」を「サイドバー」に入れる

 

検索ボックス【必要】

検索ボックスが必要な理由は、読者が「この前読んだ記事どこにあるかな？キーワードは覚えているのに．．．」こんな時に検索ボックスがあれば嬉しいですよね。

 

【検索ボックスの追加方法】

「外観」→「ウイジェット」→「検索」を「サイドバー」に入れる

 

人気記事・新着記事【必要】

人気記事・最新記事を追加する理由として、カテゴリーの中から探すだけでなく、何度も見るような記事がサイドバーにあれば読者は助かりますよね。

 

さらに、サイトの運営者としてもPVが増えて「WIN-WIN」です。

最新記事も任意で追加しておきましょう。

 

【人気記事・新着記事の追加方法】

 

 

 

広告【不必要】

よくサイドバーやヘッダーに、大きいアドセンス広告を設置しているサイトがありますが、トップページに広告があると読者的には邪魔です。

 

有名ブロガーでアドセンスを外したらPVや収益が増えたという話もある通り、ブログはとにかく読者ファーストです。

 

【広告の削除方法】＊アドセンス広告

「Cocoon設定」→「広告」→「サイドバーの表示位置」からチェックを外す

 

メタ情報【不必要】

メタ情報とは、サイトデータの説明。

メタ情報をCocoonの初期設定のまま放置していませんか？

 

読者からすると「何これ？」と邪魔になるだけなので、特にCocoonをインストールしたばかりの人は確認しておきましょう。

 

【メタ情報の削除方法】

「外観」→「ウィジェット」→「サイドバー」の「メタ情報」から削除

 

アーカイブ【不必要】

アーカイブとは、過去の記事を月ごとに残してくれるもの

読者から見ると便利な機能と同時に、ブログ歴が長い人のアーカイブが延々と下まで伸びている人もいます。

 

とは言え、アーカイブは邪魔に感じる人もいますが便利なので「ドロップダウン」で表示しましょう。

 

ドロップダウンとは

 

【アーカイブをドロップダウンに変更する方法】

「外観」→「ウィジェット」→「ドロップダウンで表示」にチェックを付ける「saved」

 

前半まとめ

【サイドバーに必要な項目】 プロフィール SNSフォローボタン 検索ボックス 人気記事・新着記事 【サイドバーに不必要な項目】 広告 メタ情報 アーカイブ（ドロップダウンでOK）

 

 

【カスタマイズ】Coconのサイドバーの色・形を変える方法【コピペでOK】

Cocoonサイドバーのカスタマイズ一覧はこちら

サイドバーの色 サイドバーの文字色 サイドバーの角 サイドバーの縦幅 見出しの文字色 見出しの背景色 見出しの線

 

今回変更するサイドバーはこちら

本記事では、白のサイドバーを使用していますが、他のスキンでも問題ありません。

 

また、理解しやすくするために極端な色を使用しています。

色の変え方も紹介しているので最終的には自分の好きなデザインで仕上げましょう。

 

 

 

 

カスタマイズ方法

今回紹介するカスタマイズ方法をコピーした後に張り付ける場所は「カスタマイズ」の「追加CSS」に張り付けましょう。

 

追加CSSへ移動する方法

「外観」→「カスタマイズ」→「追加CSS」 「管理バー」→「カスタマイズ」→「追加CSS」

 

サイドバーの色

まずは、サイドバー本体の色を変更する方法です。

 

こちらのコードを張り付けて完了

aside{ background-color:#7fffd4; }

 

好みの色に変更するには、「background-color:」の後ろにある「#7fffd4」というカラーコードを変更すればOKです。

 

カラーコードはWEB色辞典がおすすめです。

 

また、すでにある色を透明にする場合

aside{ background-color:transparent; }

 

サイドバーの文字色

サイドバー本体の文字色を変更します。

 

こちらのコードを張り付けて完了

.author-box p{               color:red; }

 

今回はカラーコードを「red」にしていますが、「yellow」や「skyblue」、もちろん先ほどの「WEB色辞典」のカラーコードでも問題ありません。

 

サイドバーの角

サイドバーの角を丸くする方法です。

 

こちらのコードを張り付けて完了

aside{               background-color:#7fffd4;               border-radius:30px; }

 

また、「border-radius:」の後ろにある「30px」を変える事で角丸の強さが変わります。

 

サイドバーの縦幅

サイドバー本体の高さを変える方法です。

 

こちらのコードを張り付けて完了

aside{               background-color:#7fffd4;               border-radius:30px;               padding:70px; }

 

極端に伸ばしているので「70px」の部分を変えてみましょう。

また、「 background-color:#7fffd4;」や「border-radius:30px;」は好みで変更必須です。

 

 

 

見出しの文字色

続いては、サイドバー上部にある「見出し」部分の「文字色」を変える方法です。

 

こちらのコードを張り付けて完了

.sidebar h3{               color:#00bfff; }

 

こちらも「#00bfff」というカラーコードを好きな色に変えて完了です。

「WEB色辞典」がおすすめです。

 

見出しの背景色

サイドバー上部「見出し」部分の「背景色」を変える方法です。

 

こちらのコードを張り付けて完了

.sidebar h3{               color:#00bfff;               background-color:purple; }

 

こちらも「#00bfff」を好きなカラーコードに変えて完了です。

「WEB色辞典」からどうぞ。

豆知識としてカラーコードを「transparent」に変えると透明になります。

 

見出しの縦幅と角

サイドバー上部「見出し」部分の「縦幅」と「角」を変更する方法です。

 

こちらのコードを張り付けて完了

.sidebar h3{               color:#00bfff;               background-color:purple;               padding:20px;               border-radius:10px; }

 

「サイドバー本体」の時と同様です。「～px」部分は好きな大きさに変えましょう。

 

見出しの線

最後に「見出し」に「線」を入れる方法です。

 

こちらのコードを張り付けて完了

.sidebar h3{                  border-bottom:5px solid #8BC34A; }

 

こちらの「5px」「solid」「#8BC34A」は

左から「太さ」「種類」「色」となります。

 

例えば、これらを「10px」「dotted」「red」とすると。

 

 

 

まとめ：Cocoonのサイドバーをカスタマイズして読者の目を惹こう！

今回はCoconnのサイドバーをカスタマイズする方法について紹介しました。

 

まとめると

【サイドバーに必要な項目】 プロフィール SNSフォローボタン 検索ボックス 人気記事・最新記事 【サイドバーに不必要な項目】 広告 メタ情報 アーカイブ（ドロップダウンでOK） 好きなデザインコードを追加CSSにコピペして、おしゃれなサイドバーを作り読者の目を惹こう。

 

サイドバーは、サイトのトップページにある事から読者の目に付きやすいので、デザインにこだわりつつ収益アップを目指せます。