ちょっと難しい話になるので、分かる方だけお付き合いください。

h2、h3タグの外観もチョコで統一しようと思い、ボーダーや色をそのように調整。
ブロック要素のままだと画面一杯の幅になってしまうので、インライン要素に。

ところが。

ブロック要素のものを下手にインライン要素にすると、cssを非表示にされた時とかに支障が出てしまいます。
例えばこつぶのページをこのcssファイルで表示しようとすると、タイトルの後改行されずにそのまま下の文章が横に表示されていってしまいます。
これはマズい。

色々試行錯誤した結果、どうやらmargin-right:100%;とするとブロック要素のまま内容物に合わせて幅が調整されることが判明。
良かった良かった、と胸を撫で下ろしたのも束の間。

IE以外でほぼ全滅(_ _;)

そうですよね、右余白100%としたらそうなるのが正しいですよねＴへＴ
でもそうなるとどうすれば……。
具体的にはテーブルみたいな挙動をしてくれれば万々歳なのですが。。。

と。

display:table;

調べていると、普段見ているcss解説サイトにはなかった項目が。
テーブル！？　もしかしてこれって……。

ヽ(Ｔ▽Ｔ)ノ

できました！　IE以外のブラウザでも内容物に合わせたブロック要素ができました！
……うん？　でもこれ、「IEは8以降でないと対応してない」って書いてあるのですが…IE6でも問題なく表示されてます。

ああ！

margin-right:100%;があるおかげでIE6でもちゃんと動いてるのですね。
試しに消してみたらただのブロック要素に戻りました。

というわけで。

同じ悩みをお持ちの方は試してみられては如何でしょうか。
わざわざhタグの後に<br>を入れたり、別途<div>で囲んだりする必要がなくなる程度ですけど、改装の際にそれらを追記する手間がイヤ！とかの状況では役に立ちます。

ちなみにテーブルの中で使うとIE限定で崩れるので、別途以下の記述が必要になります。
td h2 {margin-right:0%;}

cssハックでline-heightが上書きできてませんね。。。
hrのプロパティとかは同じハックと記述順序でちゃんと上書きされてるのに。

まあいいや。


ホワイトチョコの色合いを修正して、それを元にストロベリーチョコを作成しました。こつぶだと黄色い行に当たる部分です。
あと強調と警告と削除と。

とりあえずこれで記事のソースの修正に入れます。
多分一括置換で大体はなんとかなると思うので、そんなに手間ではないはず。

続きを読む

cssのクラス名をこつぶと同じにして、ファイルさえ置き換えれば見た目を使いまわせるようにしたいと思っています。

こつぶのテーブルはtable(と必要ならtr)にそれぞれクラス指定しています。
具体的にはアイテムやモンスターのリストがそれです。

で、

できるならこんな感じにしたいのですが。
残念ながらtableとtrのみのクラス指定では、これは実現できないんですね。
↑はtdの中に更にdivを入れてます。

Tiny Talesはtd内に大抵の場合何かしらのタグが入っているので、クラスが指定されたtable内のそれらを↑になるように指定してあげれば大体は上手く行くのですが。
そうでない部分とか、それ以外でも例外がある可能性もあったりで、下手にすると身動きが取れなくなるかもしれなくてちょっと困りもの。

ちなみにdivを使わないとこんな感じになります。


凹凸を逆にするとこう。


うん、やっぱり納得行かない。

---

……それ以前に同じ行のセルの行数が異なると、一番上のやつダメでした(_ _;)

---

そんなわけで改善妥協案。
Safariだと左上の窪みも表現できるんですけど、とりあえずIE6とOpera10では不可。
逆ならいいですけどそのためにcssハック使うわけにもいきませんし、とりあえずこれで行きましょうか。

このページの話です。
リンク集とレイアウトを合わせてみました。
カテゴリの枠にリンクが入ってるのも紛らわしいですし、上部のバランスも悪かったですからね。

そういえばこつぶ用の88x31バナー作るとか言っててそのまんまですね。
とりあえずここでは必要なくなっちゃいましたけど、どうしましょうか。
特殊なサーチサイトに登録申請でもしない限りは必要にならないんですけど。

ノーバナーを変えてみました。
現時点で使ってるのはイラストと小説のページなのですが、この2つはどちらも明るい背景なのでかなり合いますね(o^-')b

元にしたミルクチョコ画像もいつか何かに使いたいなぁ。
それとこれも。

あと[リンクについて]のページを追加。
というかページ自体は元からあったんですけどね。URL削って見られた時用の何もないページが。
そのページにリンクについての注意とか、当サイトへのリンクの仕方とかそんなのをちょこちょこと。
Tiny Talesとこつぶにもそれらしい記述をしてあるので、こちらは近いうちに消しておきます。

というか「トップ以外にはリンクできないよ」記述がまだ残ってますね。。。
ええ、移転した時にこの制限は外れています。

> でもその前にリンクの整備。
> ……したいんですけど、時間かかりそうですしどうしましょうか。
> メリットがある一方でデメリットも大きい改装ですし…うーん……。

まだ途中ですけど。

とりあえずやりたかったことは、複数のカテゴリに渡るリンクはそれぞれのページに表示させること。
当初はまた例によってブログ(の検索機能)を利用しようかなとも思ってたんですけど、後の編集が面倒になるのと、放置広告、それとメンテが割と頻繁にあるなどのデメリットがあるので悩んでいました。

それで結局採った方法は、ローカルでそういうページを作ってしまうこと。
ただこの場合、それぞれのページを手作業で作っていると、リンクを追加した時に洩れが生じてしまう可能性が出てきます。
ので、大元となる(全リンクを貼った)1ページだけを作成しておいて、プログラムでそれを分離する手法にしてみました。

あとはそれに伴う修正(1ファイルから分離させるので、可能な限りCSSを共存させないといけない)ですとか、デッドリンクをばっさり削除ですとか。
被リンクもカテゴリごとに分類してみました。

後は未追加のリンクを作成したり、今いるページを分かりやすくしたり。
多分半日もあれば終われると思います。

・碧い林檎　様
・たった一人のファミコン少年　様
・【Might & Magic 真性どＭプレイ日記】　様

都度追加しておけば良かったんでしょうけど、つい横着して溜めてしまいました。
1つめはTiny Tales、残りはこつぶの被リンクなので、どちらの履歴に書いていいやら。。。

というわけでどっちにも書かずに済ませました。スミマセン。