Cocoonのサイドバーをカスタマイズする【簡単です！】

とち

産経新聞社サンスポ記者として

• Jリーグ
• プロ野球
• オリンピック
  などを担当してきた『とち』（@tochi1203）です。

真面目に、かるくが執筆信条。
現在は独立して、いろいろ書きながら生きてます。

Cocoonで運営している当ブログですが、トップページをサイト型にカスタマイズしたことで、ちょっとした不具合が起こりました。

トップページとサイドバーの内容が、ほぼカブってるんじゃね？と…

なので、今回はサイドバーのカスタマイズです。

だが、怖れるに足りず！

WordPress最強の無料テーマ「Cocoon」なら、サイドバーのカスタマイズも超絶かんたんです。

←神！
Cocoon生みの親のわいひらさん

上記2点を解説していきます。

HTML＆CSSやプログラミングの知識は必要ありません。

ブログ歴２カ月ちょっと、HTML＆CSSの知識がほとんどない僕でもサイドバーをカッコよくカスタマイズできました！

＼プログラミングでCocoonは10倍楽しい／

▶テックアカデミー〈7日間無料体験〉

※今すぐできるオンライン体験学習です。

Cocoonサイドバーのカスタマイズ：表示＆非表示

Cocoonサイドバーとトップページの内容がカブる

Cocoonを使用している当ブログはトップページをサイト型に変えてから、こうなっていました…。

サイドバーには「アクセスランキング」を挿入していたんですが、トップぺージにいれた「人気記事」と内容がダブる状態になっていました。

新着記事については、まったく同じものが表示されています。

ダサい…というより不必要。

記事画面では「人気記事」と「新着記事」のランキングは残しておきたいため、トップページのサイドバーのみの表示を変えることにしました。

Cocoonのサイドバーをページごとに変える

ダッシュボードから①外観→②ウィジェット→③サイドバーから「人気記事」を開きます（▼を」クリック）。

次に①ウィジェットの表示で「チェック・入力したページを非表示」にします（たぶんデフォルトでこの表示）→②固定ページを開きます。

固定ページのIDを入力します。

IDとは、ページのURLに含まれる数字です。
記事編集画面の上部、検索バーに表示されます。

保存を押して完了です！

これでトップページのサイドバーから「人気記事」が消えました。

同じ手順で「新着記事」もトップページのサイドバーから消しちゃいましょう。

簡単でしょ！やっぱcocoon神！

以上で構成の問題は、なくなりました！

Cocoonサイドバーのカスタマイズ：装飾する

Cocoonサイドバーを装飾する

当ブログのサイドバーは今（※20年1月現在）こんな感じ。

カスタマイズは、下記の手順で進めます。

Cocoonサイドバー①：プロフ下のフォローボタンを消す

プロフィール下に載っている、この小さなSNSフォローボタンを消します。

以下のコードを外観→テーマエディターから入ったスタイルシート（style.css）に貼りつけて下さい。

/*プロフィール下のSNSボタン非表示*/
 /*===Twitter===*/
 .author-follows .sns-follow .sns-follow-buttons .twitter-button{display: none; }
/*===Facebook===*/ 
.author-follows .sns-follow .sns-follow-buttons .facebook-button{display: none; }
 /*===Instagram===*/
 .author-follows .sns-follow .sns-follow-buttons .instagram-button{display: none; } 
/*===feedly===*/ 
.author-follows .sns-follow .sns-follow-buttons .feedly-button{display: none; }
/*===RSS===*/ 
 .author-follows .sns-follow .sns-follow-buttons .rss-button{display: none; }

ツイッターなど以外でも、他のSNSボタンを消したい場合は「〇〇-button」の〇〇にSNS名を入れれば消えます。

Cocoonサイドバー②：SNSボタンのカテゴリーを設置

外観→ウィジェット→SNSフォローボタンをプロフィール下に挿入します。

表示させたいSNSアイコンは、ユーザー→あなたのプロフィール→SNSのアカウントURLを入力すれば出現します。

Cocoonサイドバー③：SNSボタンをカスタマイズ

次にSNSボタンをブランドカラーにカスタマイズします。

デフォルトはこんな感じで、ちと重い…。
かつインスタがブランドカラーになっていない。

下記のようにちょっと軽めな感じに変更します。

これも、「このまんまでいいよ」という人は以下のコードを、スタイルシート（style.css）に貼っちゃってください。

/*SNSボタンカスタマイズ*/
 .sidebar .sns-follow-buttons {
   justify-content: center; /*ボタンを中央寄せにする*/
 }
 .sidebar .sns-follow {
   margin: 0 0 24px 0;
 }
 .sidebar .sns-follow-buttons a {
   border-radius: 50%;
   width: 40px; /*ボタンの横の大きさ*/
   height: 40px; /*ボタンの縦の大きさ*/
   font-size: 20px; /*アイコンのサイズ*/
   margin: 0 6px; /*ボタン同士の間隔*/
 }
 .sidebar .instagram-button {
   background-color: #c522b8 !important;
 }

アイコンのサイズや、ボタンの丸み（border-radius）などを変更したい場合は、数値を変えてください。

Cocoonサイドバー④：タイトルをカスタマイズ

デフォルトは、こんな感じでちょっと重い、、、

これを今回は

こんな感じにしようかな、と。

同じように、以下のコードをスタイルシート（style.css）に貼り付けちゃってください。

/*サイドバー見出しカスタマイズ*/
 .sidebar h3 {
     color:black;
     background: none; /*背景色を解除*/
     padding: 0; /*余白をなしに*/
     font-size: 16px; /*文字サイズを小さく*/
     letter-spacing: 2px; /*文字の間隔を少し広く*/
 }
 .sidebar h3:first-letter {
     font-size: 1.5em; /*最初の文字を1.5文字分に大きく*/
 }
 .sidebar h3:after { /*グラデーションのラインを引く*/
     content:"";
     display:block;
     height:2.5px;
     width:100%;
     background: -webkit-linear-gradient(left, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
     background: linear-gradient(to right, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
 }

グラデーションの色合いを変更したければ、＃のあとのカラーコードを変更してください。
カラーコードは原色大辞典さんが便利です。

WEB色見本 原色大辞典 - HTMLカラーコード

色の名前とカラーコードが一目でわかるWEB色見本

www.colordic.org

以上で完成です。

お疲れさまでした！

＼プログラミングでCocoonは10倍楽しい／

▶テックアカデミー〈7日間無料体験〉

※今すぐできるオンライン体験学習です。

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

簡単だったでしょ！

『わからない…』という人は遠慮なく、お問い合わせください。
» わからんから問い合わせる

今回は、この辺で！

＼プログラミングでCocoonは10倍楽しい／

▶テックアカデミー〈7日間無料体験〉

※今すぐできるオンライン体験学習です。

【目的別】Cocoonカスタマイズ15選【初心者でも簡単！】

WordPressテーマ・Cocoonでブログ運営すること1年…都度行ってきたカスタマイズ記事がたまってきたので、Cocoon初心者ユーザーの方へ向けて目的別にまとめました。トップページをサイト型にしたい、サイドバーの表示を変えたいなど、要望別に詳細ページへと飛べます。Cocoonユーザーの方、是非、ご活用ください。

to-chi.org

＼TwitterでNFT情報発信中！／

Follow @tochi1203