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

とち
とち

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

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

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

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

ブログ型:トップページに新着記事だけが表示されるもの
サイト型:トップページに人気記事やカテゴリー別の記事が表示されるもの

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

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

だが、怖れるに足りず!

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

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

本記事の内容
  • Cocoonでトップページと投稿画面のサイドバーの表示を変える方法
  • Cocoonのサイドバーをお洒落にカスタマイズする方法

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

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

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

\プログラミングでCocoonは10倍楽しい/
テックアカデミー〈7日間無料体験〉
※今すぐできるオンライン体験学習です。

Cocoonサイドバーのカスタマイズ:表示&非表示

Cocoonサイドバーのカスタマイズ:表示&非表示

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

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

トップページ画像

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

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

新着記事画像

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

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

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

「人気記事」も「新着記事」も手順は全く一緒のため、ここでは「人気記事」で説明します。

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

ウィジェット画面1

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

ウィジェット画面2

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

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

固定ページID入力
固定ページID

保存を押して完了です!

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

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

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

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

ここからは【目的別】でどうぞ!

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

Cocoonサイドバーのカスタマイズ:装飾

Cocoonサイドバーを装飾する

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

サイドバー

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

  1. プロフィール下にこっそり載っていたSNSフォローボタンを消す
  2. 新たにSNSだけのカテゴリーを設置
  3. SNSボタンの装飾
  4. タイトルの体裁変更

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

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

SNSボタンを消す

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

コード変更は必ず子テーマ(Cocoon Child)で行いましょう。

/*プロフィール下の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を入力すれば出現します。

feedlyとRSSはデフォルトで入っていますので、「要らん!」という人は「cocoon設定」→「SNSフォロー」からfeedlyとRSSのチェックを外せば消えます。

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

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

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

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)に貼り付けちゃってください。

「New post」とアルファベットなのはイキっているだけw。
表記は「外観→ウィジェット→サイドバーに入れたウィジェット」を開いて、タイトル部分に表示させたい文言を入力します。

/*サイドバー見出しカスタマイズ*/
 .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%);
 }

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

以上で完成です。

お疲れさまでした!

\プログラミングでCocoonは10倍楽しい/
テックアカデミー〈7日間無料体験〉
※今すぐできるオンライン体験学習です。

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

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

簡単だったでしょ!

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

今回は、この辺で!

↓ 収益化しにいく ↓
アフィリエイトおすすめASPの記事に飛びます。
\プログラミングでCocoonは10倍楽しい/
テックアカデミー〈7日間無料体験〉
※今すぐできるオンライン体験学習です。

  1. やりたかったことができました!
    ありがとうございました!

    • お役に立てたようで良かったです!