ＳＴＩＮＧＥＲ７の記事下のカテゴリーとタグの表示をＣＳＳだけで見栄え良くした方法
2016/09/13
ＳＴＩＮＧＥＲ７の個別記事の下に、その記事のカテゴリーとタグのリストが表示されますが。
カンマ区切りでずらずらっと並べられてるだけで、何となく見栄えがアレだなとか思いまして。
それをＣＳＳだけで見栄え良くしてみようと、やってみたので記事にしておきます。
ちなみに、私の場合は「Ｓｉｍｐｌｅ Ｃｕｓｔｏｍ ＣＳＳ」というプラグインを入れてますので、これにＣＳＳの設定を書き込んだんですが。
子テーマを使ってカスタマイズとかされてる方は、スタイルシートのファイル(ｓｔｙｌｅ．ｃｓｓ)の一番下にでも、直接追加してやれば上手くいくかと。
余計なカンマとかを消す
まず、行頭のタグマークとかカテゴリーやタグの間にあるカンマは、この際いらないので以下のようにして消しました。
.tagst {
font-size: 0;
}
“ｔａｇｓｔ”っていうクラスが今回修正の対象となるので、ここの表示をいったんフォントサイズを０にすることで表示されないようにするわけですね。
タイトルを付ける
次に以下の設定で、「Ｃａｔｅｇｏｒｙ ＆ Ｔａｇｓ」というタイトルを付けてやりました。
.tagst:before {
display: block;
font-size: 16px;
font-weight: bold;
content: "Ｃａｔｅｇｏｒｙ ＆ Ｔａｇｓ";
position: relative;
}
“ｂｅｆｏｒｅ”擬似要素を使って“ｔａｇｓｔ”っていうクラスの前を指定して、“ｃｏｎｔｅｎｔ”プロパティーでタイトルを付けました。
“ｄｉｓｐｌａｙ： ｂｌｏｃｋ”を使って、行末で改行するようにしています。
カテゴリーやタグの表示を角丸のボタン状にする
そして以下の設定で、カテゴリーやタグの表示を角丸のボタン状にしました。
.tagst a {
font-size: 16px;
display: inline-block;
background-color: #ddeeff;
border: 1px solid #ccc;
margin: 5px;
padding: 5px 10px;
border-radius: 5px;
text-decoration: none;
}
ボタンの背景の色は“ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ”、それから枠線の色は“ｂｏｒｄｅｒ”の末尾の“＃ｃｃｃ”を変更することで、気に入った色に調整できます。
デフォルト状態だとリンクには下線がつきますが、ボタンには不要なので“ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ： ｎｏｎｅ”を指定することによって、下線が付かない設定に変えています。
カテゴリーのボタンだけ背景色を変える
カテゴリーとタグを区別しやすいように、以下の設定でカテゴリーのボタンだけ、背景色を変えてやりました。
.tagst a[rel="category"] {
background-color: #ffff99;
}
属性セレクターで“［ｒｅｌ＝“ｃａｔｅｇｏｒｙ”］”を指定してやることによって、カテゴリーのボタンだけを特定しています。
タグのボタンの先頭にアイコンを付ける
タグを表示するボタンには、以下の設定で先頭にタグを表すアイコンマークを付けました。
.tagst a[rel="tag"]:before {
content: "\f02b";
font-family: FontAwesome;
margin: 0 3px 0 0;
}
前項でカテゴリーを特定したのと同様に、属性セレクターで“［ｒｅｌ＝“ｔａｇ”］”を指定してやることによって、タグのボタンを特定しています。
アイコンマークには、おなじみのＷＥＢフォント“ＦｏｎｔＡｗｅｓｏｍｅ”を使用。
“ｍａｒｇｉｎ： ０ ３ｐｘ ０ ０”の指定で、アイコンマークと文字の間を３ｐｘほど空けました。
まとめ
というわけで、まとめると以下の記述をＣＳＳに追加することで、カテゴリーとタグの表示を見栄え良くしてやりました。
.tagst {
font-size: 0;
}
.tagst:before {
display: block;
font-size: 16px;
font-weight: bold;
content: "Ｃａｔｅｇｏｒｙ ＆ Ｔａｇｓ";
position: relative;
}
.tagst a {
font-size: 16px;
display: inline-block;
background-color: #ddeeff;
border: 1px solid #ccc;
margin: 5px;
padding: 5px 10px;
border-radius: 5px;
text-decoration: none;
}
.tagst a[rel="category"] {
background-color: #ffff99;
}
.tagst a[rel="tag"]:before {
content: "\f02b";
font-family: FontAwesome;
margin: 0 3px 0 0;
}
結果は、下のようになりますが、元の表示よりはけっこうマシになったと思うのですが、いかがでしょうか。
カンマを消したりタイトルを付けたりするのは、ＰＨＰファイルを編集したほうが簡単かとも思いますが、今回はＣＳＳだけでやることにこだわってみましたよ。
何かの参考にでもして頂ければれば、幸いです。
それでは、良いＳＴＩＮＧＥＲライフを！
