[Log]英人の運営日誌 ０８年１月分
ウェブサイト管理人、鼎英人の妄脱兎運営の記録。
【Firefoxに挑む！】ちょっと専門的な話。【HTMLのリスト】（08/01/26）
もはや僕の中で鬼門になりつつある「Firefox」。
前回の更新時も、
『ＴＯＰページのNEWSに
←これを追加しました。』
ていうのが、Firefoxだと表示されてない！そんなアホウな！！
どうやら、リストの先頭に画像を指定する機能がFirefoxにはないらしい･･････。IEだと苦も無く表示されるのになー。まあ、IEが異端児って言う見方もできますが。
どういうことかと言うと、妄脱兎のＴＯＰページにあるＮＥＷＳ欄は、ＨＴＭＬタグの「リスト」という機能を使って表示しています。例をタグで書くと、
----------------------------------------------
≪HTML例≫
<ul>
<li>(01/10)×××を追加しました。</li>
<li>(01/9)日記を更新しました。</li>
</ul>
-----------------------------------------------
こんな感じです。オレンジが実際表示される部分です。
そして、ブラウザ上では以下のように表示されます。
------------------------------------------------
- (01/10)×××を追加しました。
- (01/9)日記を更新しました。
------------------------------------------------
さて問題はここからです。このリスト項目の先頭に来る黒い●を画像に変えたいのです。例えばとか。普通に考えれば、ＣＳＳの外部スタイルシートで、リストの先頭を画像に変えるように指定をします。
-------------------------------------------------
≪CSS例≫
li{
color: black;
font-size: 12pt;
list-style-image: url('(../image/xxx.gif)');
}
--------------------------------------------------
緑が先頭につけたい画像のアドレスです。
IEだとこれでおｋなんですが、Firefoxは軽く無視。
そこで、なんとかこの賢い狐ちゃんにも納得してもらえるように、なんか方法はないかと探していたら、YEAR OF THE CATさんに参考になる方法が紹介されていました。
（YEAR OF THE CATさんではトップページへのリンクを推奨なさっていたので、ここではトップページから目的の場所までの行き方を記しておきます。
上記のURLにアクセス⇒
トップページ左メニュー「Style Sheet」をクリック⇒
次のページ左メニュー「■サンプル」内の「リストタグ」をクリック⇒
表示されたページの、真ん中あたり、『sample J 背景に画像を置く』
）
これを見た瞬間、
「なるほど、こういうやり方があったのか！」
と思わず被ってもいない帽子を脱帽しそうな勢いでした。確かに、リストの●を無しにしてマージンなども詰めて、付けたい画像を背景として指定して、文字を画像の幅の分だけ右にずらしてしまえば、表示は可能です。
流石です。頭の回転が速い人というのは、このような方のことを言うんだろうな～。
YEAR OF THE CATさんに紹介されていたのはメニューを作る方法でしたが、僕はそれを少し変えてNEWS欄に応用しました。
参考までに↓
--------------------------------------------------
≪実際に使用 妄脱兎のCSS≫
#list_left-img ul { margin: 0; padding : 0; list-style-type : none; }
#list_left-img li { background-image: url(../image/icon/arrow01blue2_2.gif); background-repeat: no-repeat; padding :0 0 0 11px; margin:0 0 0 2px;}
#list_left-img a { color: blue; text-decoration:none; margin:1px 0; height:1.2em; }
#list_left-img a:hover { color:#0bf; margin: 1px 0; height: 1.2em; }
#list_left-img a:active { color: #ff9300; text-decoration: underline overline; margin: 1px 0; height: 1.2em; }
≪実際に使用 妄脱兎TOPページHTML NEWS欄≫
<div id="list_left-img">
<ul>
<li class="news-text">(1/22)【新着日誌】<a href="log/index.html#080122">新年初日誌(08/01/22)</a>
</li>
<li class="news-text">(1/22)お正月限定ページを撤去。"<a href="about/index.html#history">サークルHOTの歴史</a>"の一項目になりました。
</li>
･･････（中略）･･････
<li class="news-text">(10/21)【事故】トップページのデータが一瞬飛んでしまったので、NEWS欄が半分くらいなくなりました。すいません；
</li>
</ul>
</div>
----------------------------------------------------
HTMLのほうは見やすくするために一部省略しています。
が、両方ともぐちゃぐちゃと付け足して少々判りにくいです。（￣＿￣；）
CSSだと水色部分が重要です。
HTMLはdivタグを使って、外部CSSの設定を<div>～</div>で囲った中のリストに一括指定しています。
ちなみに、<li>のclassに指定してあるnews-textというのは、テキストを緑色にする（+その他装飾）ための外部CSSを呼び出すためのものです。
えー、なんだか、解る人にしか解らない日誌になってしまいました。すみません；
でもまあ、この場所はもとは僕が運営日誌付けるところだから･･････（いて！ちょ、石はやめｔ！
ともかく、これで、Firefoxをお使いの皆さんもちゃんと表示されたページをご覧になる事ができます！あー、やったぜ俺！これでまた１つ壁をのりこえられたかなぁ？！（涙）
後は･･････、左の空間の途切れを何とかせねば。
今後とも妄脱兎の応援をよろしくお願いします。＜(＿ ＿)＞
(文・英人)
新年初日誌（08/1/22）
『お正月なので特設ページ～♪』
ということで作ったあのページですが、もうさすがに１月も下旬に入ったということで撤去しました。ＴＯＰページがいつもの空気です。
にしても、僕の知人の或る一人は、あのお正月のページを見るなり、
「一瞬、そば屋のホームページかと思ったよ」
とか言うので、
「えっ、ちょ、そば蕎麦屋？！そうかなーー？そんな事ないでしょーー。ちゃんと妄脱兎って書いてあるしー、一番上に･･････」
と、僕は嘯いてはみたものの、内心微妙な気持になった事は否定できない。
初日の出の写真より天ぷらそばの方が“やけに”目立ってたかな～(￣▽￣Ａ;)ｱﾊﾊ
６号もクロツキも何も言わなかったのは、あいつらの優しさだと思っておこう。orz
初日の出は、出た瞬間を撮るためにこのクソ寒い中、外で４０分以上待った（←日の出時刻の情報が間違ってたorz）。対して、そばは瞬撮。３分も掛かってない。ああ、まったく、報われねぇ。
新年になったから、というわけではないですが、ちょこちょこサイトのデザインを変更しました。
・サイトマップのデザインを変更しました。
・ＴＯＰページのNEWSに←これを追加しました。
・ＴＯＰページのカウンターの総カウントをクリックすると、カウントの記録が見れるようになりました。
いくぶんは見やすくなったかなー、と思います。
（文・英人）