【筆者体験ベース】おすすめ副業10選>>>

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

とち
とち

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

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

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

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

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

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

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

だが、怖れるに足りず!

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

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

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

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

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

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

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

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

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

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

トップページ画像

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

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

新着記事画像

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

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

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

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

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

ウィジェット画面1

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

ウィジェット画面2

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

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

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

保存を押して完了です!

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

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

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

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

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

※おすすめASP記事のリンクです

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はユーザーによるカスタマイズを求めるテーマでもありますので、多少のプログラミング知識が必要になります。

落ち込む人画像
やっぱりコードとかよくわからんし、
もうカスタマイズで萎える…。

って方はWordPress有料テーマも検討してはどうでしょうか?
(※正直、無料テーマでCocoon以上のもの、ないです!)

プログラミングやコードの知識がなくても、サイト作りが容易になりますヨ。
>>>WordPressおすすめの有料テーマ
↓打ち消し線の理由↓

僕は別サイトでWordPress有料テーマを使ってますが、SWELLが最高です。
コード知識なしで、キレイなサイト作りができます。

とち
とち

下のリンクは僕がSWELLで運用するサイトです。
参考までにどうぞ!

Cocoonがどうも扱いづらくて有料テーマを考えてる方は正直、SWELL一択でいいかなと思います。
それぐらい僕は惚れました。。。(*´ω`*)
>>SWELL公式サイト

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

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

簡単だったでしょ!

『わからん…』という人は当ブログの問い合わせか、ツイッターから遠慮なくご質問ください。

それでは、今回はこの辺で!

↓この勢いで↓

↓記事も増えたしマネタイズ↓

※アフィリエイトおすすめASPの記事へのリンクです

コメント待ってます!

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