リストタグのCSSを使い分ける方法

この記事の読了時間は約4分です。

リストタグをブログでよく使います。文字装飾をしていても文章だらけだとパッと視認して内容が入ってこないので、要点の整理などで使っています。

リストタグはwordpressの標準レイアウトで入力してきたんですが、「もうちょっと見やすいリストデザインにしたいな」と思って、コピペで完結するCSSをサルワカさんからお借りして適用させてみました。

 

そこで問題となったのがulタグです。

ulタグにCSSを適用させてしまうと、メニューバーや人気ランキング記事などulタグを使って組み立てているコンテンツが全てそのCSSが適用されてしまい、とんでもないことになってしまいます。

既存のコンテンツulタグはそのままで、記事内のulタグのみCSSを適用させることができるような方法を調べました。（HTMLやCSSの基礎がないって大変ですね)

 

.articleをCSSに追加する方法

.articleをCSSに追加して

「このリストタグのCSSを適用するのは記事内のみ」にすればいけると思いました。

 

しかし！

Table of Contents Plusというプラグインで生成された目次のリストにCSSが反映されてしまいました。

 

Table of Contents Plusの使用をやめることは考えられないし、

プラグインをいじって.articleで適用させないようにするには@49hackJpではリスクが高すぎます。

 

AddQuicktagを利用する方法

「AddQuicktagで特別なリストタグのHTMLを呼び出して、CSSはそのHTML限定で適用させればいい」と閃きました。

AddQuicktagに入力する内容

HTMLコードは以下

開始タグ欄

ulにclass＝”✳︎✳︎✳︎”をつけます。

“sp”のところは自由に変更してOKです。

特別なCSSを適用させるリストタグということでspにしました。

 

終了タグ欄

開始タグは✳︎✳︎✳︎を表記しましたが、終了タグはいつものリストタグと同じです。

 

CSS

サルワカさんが紹介してくれているCSSは最もシンプルなul表記なので、先ほどHTMLコードでつけた✳︎✳︎✳︎をCSSにつけて「このCSSは✳︎✳︎✳︎限定だかんなっ！」ということを明記します。

ul.✳︎✳︎✳︎とすればOKです。

1. ul  {         →　ul.sp {
2. ul li {       →　ul.sp li {

spは半角で、spの後ろに半角スペース、liの後ろに半角スペースを忘れずに

テキストエディタでやるのが一番確実ですが、めんどくさいので手入力でしました。

コードがうまく適用されない場合は全角になっていないか確認しましょう。

参考 コピペで使えるリストデザイン例34選：CSSでおしゃれな箇条書きを作ろう

 

CSS例

使いたい時にだけ呼び出すリストができました。

 

• こんな
• リストが
• 使えるぜよ

通常のulタグには適用されないので、目次のレイアウトは崩れませんし、

通常のulタグも普通に使えます。

• こんな
• リストが
• 使えるぜよ

classは無数に増殖できるので使い分けは無限にできます。

 

ブログのカラースキームがバラバラなのでかっちょいい感じにしたい・・・

CSSの勉強は役に立つ？

作業のイメージがつかめても、CSSをどう変更して、HTMLをどのように書けば想像してたことができるかがわからずめちゃくちゃ手こずりました。

自分でCSSやHTMLのコードを1からを生み出す必要性は感じませんが、コードのルールを知っておけばやりたいことを探し出す時間の節約になると思いました。

---

この記事をブログ等で紹介する際は下のHTMLコードをコピペしてお使い下さい。
泣いて喜びます。

<a href="http://49hack.jp/list-css-tsukaiwake/">リストタグのCSSを使い分ける方法</a>