助太刀忍者(質問掲示板)

助太刀忍者

No.53056    リストスタイルの設定について
現在、とくに自分ではリストスタイルを設定していないのですが、
今の状態では、リストを作成しても、
先頭にくる ・ や 1 などが表示されません。

他のテンプレートを使用している別ブログではなにも指定しないままリストを作成できているので、
その部分の以下をCSSに貼りつけてみたのですが、反映されない為、
どのように、どこに設定すれば、表示されますでしょうか?

ul {
list-style-type: square;
}

ol {
list-style-type: decimal;
}


リスト作成は忍者ブログさんに用意されているHTMLエディターを使用してボタンを押す形の自動で作成しています。


CSSやHTMLを多少いじった際になにかしてしまったことも考えられますが、
CSSはほぼ以下のテンプレートのままのはずです。

自ブログ http://trip.or-hell.com/
使用テンプレート:wolke4_008


また、以下はなにを指定しているのでしょうか?resetという部分に表記されています。
li {
list-style: none outside none;
}

よろしくお願いいたします。
使用環境
  • OS:Microsoft Windows NT
  • ブラウザ:Google Chrome
  • モニター:1366×768
  • JavaScript:ON
  • Cookie:ON
  • 回線種別:
  • ソフトウェア:
投稿者:No Name Ninja 投稿時間:2012-11-27 00:19:25

この質問は解決済みです

投稿者 : No Name Ninja
投稿時間:2012-11-29 01:16:41
とっても詳しく、そして判りやすいご回答ありがとうございました!
おかげで無事、リストが作成できるようになりました!
投稿者 : No Name Ninja
投稿時間:2012-11-28 07:51:45
No.42914 文字のフォント変更が反映されません
つまりは、上記の過去ログと同じことです。
そのテンプレでは、そういうデザインになっている、ということですね。
これを変えたい場合は、そういうデザインに指定しているCSS部分を変更、もしくは新しい記述を加えます。

テンプレートのCSSコードを見ると、以下の記述があります。

li {
list-style: none outside none;
}

li要素は、ul要素とol要素の子要素です。
よって、ul、olにスタイルを指定しても、このliのスタイルを変えないと、リスト項目を記述した際に、ul、olに指定したデザインが反映されません。

ですので、このliの指定を、今のものから変えるか、liの指定を削除して、ulとolの指定を新たに加えるか、どちらかになります。

ちなみに、list-styleは、リストマーカーの様々な設定を一括で指定したい時のプロパティです。

例)list-style: 種類 位置 画像;

今のテンプレの指定は、
種類:none:マーカーを表示しない、
位置:outside:マーカーをリストボックスの外側に表示、
画像:none:画像無し、
・・・という意味です。

参考:http://www.tagindex.com/stylesheet/list/list_style.html

また、リスト要素には、左側に、マーカー分の空白が必要です。
このテンプレでは、多くの要素のmarginとpaddingを0に指定しています(CSSコードボックス内7~11行目部分)。この状態では、いくら指定してもマーカーは表示されません。

参考:http://www.tagindex.com/stylesheet/list/margin_padding.html

ということで、上記2つを指定し直しましょう。
尚、この変更で他のデザインに影響が出ると面倒なので、記事ボックス内だけの変更とします。

1)ブログの管理画面にログイン。
2)「テンプレートの設定」クリック。
3)現在使用中(wolke4_008)の「修正」をクリック。
4)画面左下のCSSコードボックス内のどこでも良い(悩んだら、一番最後の行を改行して付け加えて下さい)ので以下を記述する。

.entrytext1 ul li {
list-style: square outside none;
margin: 0 0 0 2em;
}

.entrytext1 ol li {
list-style: decimal outside none;
margin: 0 0 0 2em;
}

※「2em」の部分はお好きな数値に適宜変えて下さい。

5)「データ保存」をクリック。
6)実際にテンプレを適用させた自ブログへアクセスして表示を確認してみる。

※変わっていない場合は、ブラウザのキャッシュを削除して強制読み込みを試してみて下さい。

※蛇足ですが、CSSコード内の「reset」内の指定は、各要素のデフォルトデザインを消す(0、none、normalなどの値にする)ための指定です。デフォルトのデザインに邪魔されずに、テンプレ製作者の意図した通りにデザインを作りやすくするために一旦、スタイルをリセットしています。また、デフォルトの値はブラウザによって異なるので、ブラウザによって表示が違うといったズレを回避するためでもあります。
質問者からのコメント 2012-11-29 01:17:37
とっても詳しく、そして判りやすいご回答ありがとうございました!
おかげで無事、リストが作成できるようになりました!