詳しいプロフィールはこちら>>>

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

とち
とち

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

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

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

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

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

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

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

だが、怖れるに足りず!

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

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

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

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

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

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

とち
とち

僕は本記事を書いたあとHTML・CSSの勉強を重ねました。プログラミングが分かると、Cocoonのような育成型テーマは100倍楽しくなりますよ(^o^)

コロナの影響で学び方も変わりました。プログラミング学習もオンラインの時代ですね。TechAcademy [テックアカデミー]ならHTML・CSSはじめ、すべてオンラインで学習できます。

ちなみに僕はHTML&CSSを独学でやりましたが、1万回絶望しました(*_*)
このオンライン時代の波に乗る方が賢明かなと思います。

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

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

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

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

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

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

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

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

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

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

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

ウィジェット画面

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

ウィジェット画面

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

IDとは、ページのURLに含まれる数字です。

固定ページID
固定ページID

保存を押して完了です!

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

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

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

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

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

Cocoonサイドバーを装飾する

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

サイドバー

カスタマイズ手順は

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

ってな感じで進めます。

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

プロフィール下に載っている、この小さな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おすすめの有料テーマを考えてみてはどうでしょう?プログラミング知識がなくても、綺麗なサイト作りが容易になりますヨ。

とち
とち

冒頭でも言いましたが僕は本記事を書いたあとHTML・CSSの勉強を重ねました。プログラミングが分かると、Cocoonのような育成型テーマは100倍楽しくなります(^o^)

コロナの影響で学び方も変わりました。プログラミング学習もオンラインの時代ですね。TechAcademy [テックアカデミー]ならHTML・CSSはじめ、すべてオンラインで学習できます。

ちなみに僕はHTML&CSSを独学でやりましたが、1万回絶望しました(*_*)
このオンライン時代の波に乗る方が賢明かなと思います。

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

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

簡単だったでしょ!

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

今回はこの辺で👋

人気記事 DAZN(ダゾーン)の登録・契約方法を解説【プレーボール1分前で間に合う】

人気記事【2020年最新】アフィリエイトASPおすすめ7社【悩み無用】

コメント待ってます!

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