WS000000
おはようございますヽ(´ー`)ノ

前回、[ cssでlivedoorブログのタグクラウドをカスタマイズしてみる ]で、
タグクラウドパーツのデザインカスタマイズをしてみました。

私自信も結構気に入ってて、自分のブログをうっとり眺めていたのですが、
あれ?・・・
WS000002
ジーザス!!
記事内に表示されている記事タグリストがデフォルトのままではないですか!

せっかく、タグクラウドをいい感じのデザインに変更できたのに、
これではなんだか片手落ち。

システムエンジニア(といっても社内SEだけど)として飯を食ってる者として、見逃せません!

どうやってカスタマイズするの?

確かに前回はタグクラウドパーツをターゲットとしてcssを弄ってました。
でもそのcssが記事タグリストに反映されてないとなると、
どうもlivedoorブログではそれぞれ別の属性を持っている、というのはすぐに推測できます。

そこで、ブラウザから改めて自分のブログのソースを眺めてみます。
WS000004
これか!!

記事タグリストはarticle-tags というクラス名のdl、ddタグで定義されているようです。

なるほど。
じゃあ、管理画面のcssからこれを修正すれば・・・ない・・・だと・・・!

管理画面のカスタマイズ-個別記事ページを見てみると、
この記事タグリストは<$ArticleTagsList$>というlivedoor独自タグで定義されているようです。

やっぱりlivedoorブログではこのクラス名は、タグクラウドと同様に、
修正できないcssに分類されているようです。

じゃあどうするか、もうお分かりですね。
「パンが無ければケーキを食べればいいじゃない」って言葉を思い出します。

カスタマイズ例

このarticle-tagsのdl、ddタグを上書きしてやることにします。

結果、タグクラウドと同じデザインでこんな感じに仕上がりました。
WS000003

cssはこんな感じ。
/* 記事タグリスト 始まり*/
.article-tags dd a {
        position: relative;
        margin: 0 0 0 5px;
	font-size: 12px;
	display: inline-block;
	height: 20px;
	line-height: 20px;
	padding: 0 10px;
	background-color: #3498db;
	border-radius: 0 3px 3px 0;
	color: #fff;
	text-decoration: none;
	-webkit-transition: .2s;
	transition: .2s;

}
.article-tags dd a::before {
	position: absolute;
	top: 0;
	left: -15px;
	content: '';
	width: 0;
	height: 0;
	border-color: transparent #3498db transparent transparent;
	border-style: solid;
	border-width: 10px 15px 10px 0;
	-webkit-transition: .2s;
	transition: .2s;
}
.article-tags dd a::after {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 2;
	display: block;
	content: '';
	width: 6px;
	height: 6px;
	margin-top: -3px;
	background-color: #fff;
	border-radius: 100%;
}

.article-tags dd a:hover {
	background-color: #555;
	color: #fff;
}
.article-tags dd a:hover::before {
         border-right-color: #555;
}

/* 記事タグリスト  終わり*/

これをタグクラウドの時と同様に、
livedoorブログ管理画面のデザイン設定-カスタマイズ-css に追記してやればOKです。

やっぱりcssて便利ですねヽ(´ー`)ノ