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

Cocoon

 

「Cocoonのサイドバーをカスタマイズしたい!」

「必要な項目といらない項目は?」

「機能的だけどおしゃれなサイドバーにしたいなぁ」

 

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

 

この記事を書く僕は、ブロガー兼WEBライターとして稼ぐ大学生。

Twitter(kan_blogger)も運営中。

 

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

 

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

 

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

 

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

 

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

画像に alt 属性が指定されていません。ファイル名: undraw_Share_re_9kfx-1024x721.png

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

【サイドバーに必要な項目】

  • プロフィール
  • SNSフォローボタン
  • 検索ボックス
  • 人気記事・新着記事

【サイドバーに不必要な項目】

  • 広告
  • メタ情報
  • アーカイブ(ドロップダウンでOK)

 

1つずつ必要・不必要な理由と追加・削除方法を解説します!

 

 

プロフィール【必要】

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

 

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

 

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

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

画像に alt 属性が指定されていません。ファイル名: 1eede198b993dc3bf9cb9e3fdc03bc51-1-1024x576.png

 

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

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

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

 

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

 

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

プロフィールに入れる場合

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

画像に alt 属性が指定されていません。ファイル名: 59762205682c09426b8bf1916162f582-1024x576.png

 

新しくSNSフォローボタンを設置する場合

「外観」→「ウイジェット」→「SNSフォローボタン」を「サイドバー」に入れる

画像に alt 属性が指定されていません。ファイル名: 281c6fd152f14572ac063a8ee981b4ea-1024x576.png

 

検索ボックス【必要】

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

 

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

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

画像に alt 属性が指定されていません。ファイル名: 738ac8dad4957aecab69b50928eefd22-1024x576.png

 

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

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

 

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

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

 

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

画像に alt 属性が指定されていません。ファイル名: 29b1a2669c3a24571e320cf38ef0cd8b-1024x576.png

画像に alt 属性が指定されていません。ファイル名: b4d20e2fa9989c995d343d3aaf115e74-1024x576.png

 

人気記事は「サイドバースクロール追従」でも良いですね!

 

 

広告【不必要】

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

 

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

 

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

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

画像に alt 属性が指定されていません。ファイル名: 915052b1f4361cc8006f829dba0f8b13-1024x576.png

 

メタ情報【不必要】

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

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

 

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

 

【メタ情報の削除方法】

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

画像に alt 属性が指定されていません。ファイル名: 295e65a7b9478ffbb9397aef62c4dbbc-1024x576.png

 

アーカイブ【不必要】

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

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

 

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

 

ドロップダウンとは

画像に alt 属性が指定されていません。ファイル名: e685fc0bc0bca1377b13de1cd16ab204.png

 

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

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

画像に alt 属性が指定されていません。ファイル名: 567bcfbefafeae8c77441f8e6e9f9bc8-1024x576.png

 

前半まとめ

【サイドバーに必要な項目】

  • プロフィール
  • SNSフォローボタン
  • 検索ボックス
  • 人気記事・新着記事

【サイドバーに不必要な項目】

  • 広告
  • メタ情報
  • アーカイブ(ドロップダウンでOK)

 

追加する項目が決まれば、次は色や見た目を整えましょう!

 

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

画像に alt 属性が指定されていません。ファイル名: undraw_Confirm_re_69me.png

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

サイドバーの色

サイドバーの文字色

サイドバーの角

サイドバーの縦幅

見出しの文字色

見出しの背景色

見出しの線

 

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

画像に alt 属性が指定されていません。ファイル名: 2020-08-30-1.png

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

 

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

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

 

 

簡単なので理解できるようにチャレンジしてみましょう!

後から自分で簡単に変更できるようになるので楽しくなりますよ!

 

 

カスタマイズ方法

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

画像に alt 属性が指定されていません。ファイル名: 2020-08-31-10-356x1024.png

 

追加CSSへ移動する方法

「外観」→「カスタマイズ」→「追加CSS」

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

 

サイドバーの色

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

画像に alt 属性が指定されていません。ファイル名: 2020-08-30-2.png

 

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

aside{

background-color:#7fffd4;

}

 

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

 

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

 

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

aside{

background-color:transparent;

}

 

サイドバーの文字色

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

画像に alt 属性が指定されていません。ファイル名: 2020-08-30-4.png

 

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

.author-box p{

              color:red;

}

 

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

 

サイドバーの角

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

画像に alt 属性が指定されていません。ファイル名: 2020-08-30-5.png

 

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

aside{

              background-color:#7fffd4;

              border-radius:30px;

}

 

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

 

サイドバーの縦幅

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

画像に alt 属性が指定されていません。ファイル名: 2020-08-30-6-524x1024.png

 

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

aside{

              background-color:#7fffd4;

              border-radius:30px;

              padding:70px;

}

 

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

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

 

とは言え、Cocoonのレスポンシブスタイルは優秀なので、「高さ」はあまりいじらない事をおすすめします!

 

 

見出しの文字色

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

画像に alt 属性が指定されていません。ファイル名: 2020-08-30-8.png

 

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

.sidebar h3{

              color:#00bfff;

}

 

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

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

 

見出しの背景色

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

画像に alt 属性が指定されていません。ファイル名: 2020-08-30-10.png

 

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

.sidebar h3{

              color:#00bfff;

              background-color:purple;

}

 

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

WEB色辞典」からどうぞ。

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

 

見出しの縦幅と角

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

画像に alt 属性が指定されていません。ファイル名: 2020-08-30-9.png

 

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

.sidebar h3{

              color:#00bfff;

              background-color:purple;

              padding:20px;

              border-radius:10px;

}

 

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

 

見出しの線

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

画像に alt 属性が指定されていません。ファイル名: 2020-08-31-11.png

 

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

.sidebar h3{

                 border-bottom:5px solid #8BC34A;

}

 

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

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

 

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

画像に alt 属性が指定されていません。ファイル名: 2020-08-30-11.png

 

 

初めてコードを見た。という方は難しく感じる方もいると思いますが、継続する事で理解が深まるはずです!

 

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

画像に alt 属性が指定されていません。ファイル名: screenshot-10.jpg

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

 

まとめると

【サイドバーに必要な項目】

  • プロフィール
  • SNSフォローボタン
  • 検索ボックス
  • 人気記事・最新記事

【サイドバーに不必要な項目】

  • 広告
  • メタ情報
  • アーカイブ(ドロップダウンでOK)

好きなデザインコードを追加CSSにコピペして、おしゃれなサイドバーを作り読者の目を惹こう。

 

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

 

シンプルにおしゃれなサイトを目指しましょう!

Cocoon
スポンサーリンク
シェアする
カンをフォローする
KanBlog

コメント

タイトルとURLをコピーしました