どうも、Non です。
今回はわたしが実際に困った問題についての対処法をご紹介します。
簡単に言うと、リストに名前をつけて、グローバルメニューとは別の表示方法にさせようってことです。
コピペの限界
サルワカさんのサイトで素敵なリストデザインを見付けて、よーし、自分のブログも素敵にするぞ！ って気合い入れてコピペしたらグローバルメニューが悲しいことになった。↓
ちなみに、もとのデザインはこれ。↓
リストの CSS を記載した分まるごと保存せず、
わたしにはリストのデザインをいじるのはまだ早かったんや！
と諦めてしまう……。
そんな悲しいことが起こるのはもうわたしだけで十分です。
（なんやかんや3ヶ月以上は悩んでいたのではないだろうか……）
デザインが干渉しないようにするための対処法
この方法でデザインの干渉を防ぎます。
CSS
ul { background: #fcfcfc;/*背景色*/ padding: 0.5em 0.5em 0.5em 2em;/*ボックス内の余白*/ border: solid 3px gray;/*線の種類 太さ 色*/ } ul li { line-height: 1.5; /*文の行高*/ padding: 0.5em 0; /*前後の文との余白*/ }
上記がコピペするコードとして用意されたものです。
これを下記のように書き加えます。
ul.sample { background: #fcfcfc;/*背景色*/ padding: 0.5em 0.5em 0.5em 2em;/*ボックス内の余白*/ border: solid 3px gray;/*線の種類 太さ 色*/ } ul.sample li { line-height: 1.5; /*文の行高*/ padding: 0.5em 0; /*前後の文との余白*/ }
ul の後に .sample と追加しました。
. の後は何でもOKなので、好きに変えてくださいませ。
リストに名前をつけて、その名前を冠したリストにだけ、デザインの設定が反映するようにしますよ、ということです。
ちなみに、コードを貼り付ける場所は デザイン→カスタマイズ（レンチのマーク）→デザインCSS です。
HTML
<ul> <li>HTML</li> <li>CSS</li> <li>Photoshop</li> <li>Illustrator</li> </ul>
上記がコピペするコードとして用意されたものです。
これを下記のように書き加えます。
<ul class="sample"> <li>HTML</li> <li>CSS</li> <li>Photoshop</li> <li>Illustrator</li> </ul>
ul の後に class=”sample” を追加します。
css で決めた名前に適宜変えてください（CSS の ul. の後につけた名前）。
コードを貼り付ける場所は、表示させたい場所（ブログ本文中など）です。
簡単に解説
結局、何やったの？ という方もいらっしゃると思いますので、簡単にご説明をば。
最初の CSS のコードだと、リストのタグ（ul ですね）を使っている部分全体に設定が反映するようになっています。
グローバルメニューもリストのタグを使っているので、全体に設定反映するとグローバルメニューも反映されてリストの設定に変わってしまいます。
そこでリストのタグに名前をつけます。（CSS の .sample の部分です）
そして、実際にリストを表示させる HTML コードを書く際に、リストの名前を呼び出すんです。（HTML の ul class=”sample” の部分ですね）
すると、CSS で設定した sample と名前のついたリストを呼び出しているので、sample の設定が反映されるんです。
グローバルメニューは sample の名前がついたリストを呼び出していないので、変動しません。
つまり、タグへ個別に名前を付けていくと、何種類でもリストのデザイン（CSS）が使えるようになるってことですね。
まとめ
※CSS ul.sample { …… } ul.sample li { …… }
CSS は ul の後に .○○ と名前をつける。
※HTML <ul class="sample"> …… </ul>
HTML は ul の後に class=”○○” を追加する。
変更する箇所だけ抜き出しました。
参考になれば幸いです。
コメント