サイト&ブログの作り方

AFFINGER6:サイドバーのカテゴリ名をCSSで付箋風にする

2021年8月28日

  1. HOME >
  2. コラム >
  3. サイト&ブログの作り方 >

AFFINGER6:サイドバーのカテゴリ名をCSSで付箋風にする

2021年8月28日

WordPressの有料テーマ『AFFINGER6』で、サイドバーのカテゴリ名一覧(カテゴリーリンク)をスタイルシート(CSS)で装飾する方法です。
コピペでOKのCSSコードをご紹介します。

『AFFINGER管理』に初めからチェックが入っている、
【全体設定】>>【カテゴリーリンク】>>【カテゴリーリンクに簡易デザイン適応】
だと、ウィジェット『カテゴリー』で作成できる『カテゴリーリンク』はこの状態です↓↓↓

AFFINGER6のサイドバー、カテゴリ名一覧(デフォルトのレイアウト)
AFFINGER6のサイドバー、カテゴリ名一覧(デフォルトのレイアウト)。
シンプル便利系です。

↑↑↑これを、こうします↓↓↓

AFFINGER6のサイドバーカテゴリ名一覧を付箋風にしたイメージ
AFFINGER6のサイドバーのカテゴリ名一覧を付箋風にしたイメージ。

以下のコードをコピーして、【外観】>>【カスタマイズ】の【追加CSS】部分にペーストしてください。
このままだと、当サイト『あとりえ極星堂』のサイトカラーと同じ色合わせになります。
『あとりえ極星堂』とおそろいでもOKですが(笑)、せっかくなので、ご自身のお好きな色を使って装飾してくださ~い^^

/*サイドバーのカテゴリ名でフォントオーサム(>)を消す*/
#side li.cat-item a::after {
content: "";
font-family: FontAwesome;
position: absolute;
right: 10px;
}

/*サイドバーのカテゴリ名を付箋風にする*/
.cat-item-label{
font-size:16px;/*カテゴリ名のフォントサイズ*/
color:#0b409c;/*カテゴリ名の文字色*/
display: inline-block;
width:85%;/*付箋の長さ(100%まで伸ばせます)*/
padding: 5px 0px 5px 15px;
background-color: #f2f7ff;/*付箋の背景色*/
border-left: solid 16px #dadde5;/*付箋の左側の色*/
border-bottom: solid 1px #dadde5;/*付箋下のボーダーの色*/
}

/*サイドバーのカテゴリ名で、名称間のボーダーと余白を調整する*/
#side li.cat-item a {
padding: 5px;
border-bottom: 0px solid #e1e1e1;
}

いま紹介したコードでは消えてしまっていますが、デフォルトの簡易デザインではそれぞれのカテゴリ名の間に薄いグレーのボーダーが表示されています。

AFFINGER6のサイドバー、カテゴリーリンクのデフォルトの簡易デザイン
AFFINGER6のサイドバー、カテゴリーリンクの『デフォルトの簡易デザイン』。
グレーのボーダーうっすら存在しています。


そのカスタマイズについて、以下で解説します。
ボーダーを表示させてデザインしたい方は、この続きもご覧ください^^

それぞれのカテゴリ名の間にあるボーダーは表示させたいんだけど……

ボーダーを表示させたい

『 /*サイドバーのカテゴリ名で、名称間のボーダーと余白を調整する*/ 』の箇所のCSSを消すと、デフォルトの簡易デザインのときに表示されている薄いグレーのボーダーを表示させることができます。

表示させたボーダーの色を変えたい

ボーダーの色だけを変えたいときは、『 /*サイドバーのカテゴリ名で、名称間のボーダーと余白を調整する*/ 』の箇所のCSSをこんな感じにしてください↓↓↓

このサンプルでは、黒いボーダー(#000000)が出てくるはずです。
以下のコードで『#000000』となっているところにお好きな色を入れると、その色のボーダーが表示されるという仕組みです。

/*サイドバーのカテゴリ名で、名称間のボーダーと余白を調整する*/
#side li.cat-item a {
padding: 5px;
border-bottom: 1px solid #000000;
}

表示させたボーダーの太さを変えたい

ボーダーの太さを変えることもできます。
『border-bottom』の行の意味は以下のとおりなので、px数を上げると太いボーダーにできます。

border-bottom: 【ボーダーの太さ】px 【ボーダーのデザイン】 【ボーダーの色】;

表示させたボーダーのデザインを変えたい

デフォルトの『solid』は直線のこと。

CSSではいろんなボーダーデザインがあるので、直線以外も表示させることができます。

やり方はとっても簡単!
紹介しているコードで『solid』となっている箇所を以下のデザインのものに変更します。
すると、そのデザインが反映されてます。
※デザインによっては、ボーダーの太さをちょっと太くしないとわかりづらいかもしれません……。

  • solid:直線
  • dashed:破線
  • dotted:点線
  • double:二重線
  • groove:くぼんだ線
  • ridge:隆起した線

このコードを書いた理由

サイドバーに置く「カテゴリ名の一覧リンク」のデフォルト簡易デザインが、あまりにシンプルだったからです……。

メニューのウィジェットを使って「カテゴリ名の一覧リンク」を作れば、そこそこカッコイイデザインにはなるようです。
が、メニューのウィジェットを使って「カテゴリ名の一覧リンク」を作ると、カテゴリを増やしたり減らしたときにそれが自動では反映されないんですね~。
わざわざ自分で、メニューの作成画面から変更を加えないといけない。

対してウィジェット『カテゴリー』だと、カテゴリに変更を加えたときに自動で反映されます。

わたしは更新作業でとことんラクをして自動化したいからこそ、WordPressでサイトを制作しています。
カテゴリの変更をするたびに手動でメニューをいちいち書き換えるくらいなら、最初にCSSを書いてしまうぞ~って思ってしまったので書いちゃいました。

といいつつ、デフォルトの簡易デザインもいいな~と思い始めてしまいました。
2021年8月現在はデフォルトデザインで「カテゴリ名の一覧リンク」を作っているので、このコードは使っていません……。
せっかく書いたのにな~。

イラストレーター 鍋弓わた が表紙を描いた本

イラストレーター 鍋弓わた が描いた漫画(同人誌)

  • あとりえ極星堂 運営者
  • 新しいページ

鍋弓わた

こんにちは。近代史に強いイラストレーターの鍋弓わたです。
イラストや漫画を描くのが好きなので、一児の母になったいまも仕事に趣味にぼちぼち描いています。
サークル名『極星堂きょくせいどう』で同人活動もしています。
大阪生まれの奈良在住。

よりよい作品づくり、より楽しく生きるために自己肯定感を高める方法を模索中。
趣味は2003年からおこなっているウェブ制作。
気がつけば今年で18年目。

⇒もっと自己紹介

pixiv 小説家になろう

⇒お問い合わせ

-サイト&ブログの作り方
-,