忍者ブログ
わたくしことkanakanaが、思ったことを書き散らす場です。

FOE

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

リストのタグの謎、判明

 引き続き、テンプレートの改修中。
 ゆうべからずっと、リストの部分がこれまでと異なる表示になっちゃうのはどうしてかな、と考えていました。

list_mitame

 この画像で分かりますかね。記事の枠線に箇条書きの記号が食い込んじゃってるんスよ。これまでは、リストにした部分には、上下左右にいくらかの余白ができていた。
 <p>タグで作る段落も同様です。普通に改行したいときは<br>タグ、一行空行を入れたいときは<p>タグ、と使い分けて文章を書いてきたんだけれど、この段落タグでも空行が入らなくなってしまっている。

p_mitame

 ↑の図、「元記事へ…」の行を<p>タグで終わらせているので、「そもそも…」の行の前に一行空行が入って見えていたのです。これまではね。
 余白入れたいならスタイルシートだよ、というご指摘はもっともですが、しかしそれにしてもどうしてこうなっちゃうんだろう? そういえば行間もなんだか普段より詰まっているように見える。
 先日まで使っていたテンプレートに、リストの表示をどうこうするような指示は特にされていない。といってもスタイルシート初心者向け解説サイトを横目に見つつ必死で調べているような調子なので、本当に見落としがないとは言い切れない。

 で、諦めてシャワーを浴びていたところ、分かった分かった、いきなしひらめいた。ここで「ピキューン」とか「ハッ…!」とか適切な擬音を入れたいが、まあいい、原因はもしかして小耳に挟んだことのある「ユニバーサルセレクタ」ってやつじゃないのか!と。
 今回使っているテンプレートのCSSには、冒頭に、余白を無くすための記述があったのです。なんだか分からないままにあとで調べようと思って、そのまま放置していたのですが、今回見た目が予想外で不思議なことになっていたのはこれが原因でした。

 「Emotional Web」のブラウザ間の差異をなくすCSSリセットなどに詳しいのですが、ブラウザにはそれぞれデフォルトのCSSがあるのだそうです。環境によって思わぬ見え方になるのを避けるために、まず初めにスタイルシートを全て取り去る記述をしておいて、続けて自分なりのレイアウトをしていく。はーなるほどなー。
 人が作ってくださったものをそのまま流用するのは楽だけれども、今回のように何かあったときに、最低限の知識も無いと対処できんのは困ったことだなあ。反省した。とは言え、この、「よろづ」のsimple-exitテンプレート自体は気に入ったので、細かいところはちょこちょこ直すとしても、ありがたく使わせていただきます。

 まとめの直したいところメモ。今週の目標は以下をなんとかすることです。

  • 上記の、リスト・段落・行間の調整。
  • リンクの文字色が見にくいので変える。
  • 一番下のページナビゲーションリンク、「Prev」でより新しいページ・「Next」でより古いページ、と移動するのは違和感があるので変える。
  • 追記部分のある記事でも、個別表示にするといきなりネタバレが見えちゃうので、直す。←070516、これは直せなさそうなことが分かった。追記部分がある場合の記事URLについて、ちょっと勘違いしてた。

拍手[0回]

PR