ソースコードと画像の表示方法を変更した。
こないだまでは以下の例の様にソースコードと画像の部分だけ
要素を終了させてその下にブロック要素を配置するという方法を使っていた。
<p>
----ここらか上はスキン ----
本文</p>
<div><img src="XXX"...></div>
<p>本文</p>
<pre><code>
...
...
...</code></pre>
<p>本文
----ここから下はスキン ----
</p>
このやり方だと
<code>や<img>はインライン要素で<p>タグに含めることができるのにわざわざ分離している。- いきなり
</p>が出てきて気持ち悪い。 <pre>の影響でブログスクリプトの改行⇒<br>自動変換機能を切らなくてはならない。
という問題がある。
これはもともと<img>と<code>をセンタリングしたいが為であった。
しかし、最近気が付いた。cssではdisplayなるものがあるが、これは表示方法をブロック要素、またはインライン要素と同じ形式にすることができるというもの。
勘違いしていて、要素そのものの性質を変えてしまうものだと思っていた。
他のサイトを参考にしているうちに、<p>～</p>の間にdisplay:block;の指定がされた<img>などが普通に放り込まれているのをよく見かけ、その考えは間違いであることに気が付いた。
なのでまず<p>タグの中で<img>をセンタリングする方法としてcssに以下を定義した。
（実際とは若干異なるが）
p img {
display: block;
margin-left: auto;
margin-right: auto;
...
...
}
ブロック要素形式の表示に設定し、左右のマージンを自動にする。
これで<img>は<p>の幅目いっぱい取られて左右中央表示になるわけだ。
同様に<pre><code>～</code></pre>で表現していた部分に関してはインライン要素である<code>のみを採用することとし、以下のようにした。
p code {
display: block;
margin-left: auto;
margin-right: auto;
...
...
}
変更点は<img>と同じだが、こちらはソースコードの表示というわけでインデントなどの空白を正確に表示しなければならない。
<pre>を使うとそれは問題ないが、今回は<pre>を使わないことにした。
その副作用として自前で空白コードを埋め込めなければならなくなる。
これらを定義したことで最初にあげた本文ソースは以下のように変更される。
<p>
----ここらか上はスキン ----</code>
本文<br />
<img src="XXX"...><br />
本文<br />
<code>...<br />
...<br />
...<br />
...</code><br />
本文
----ここから下はスキン ----
</p>
（<br />タグはブログスクリプトによって自動で付加されるので自分では記入しなくて良い）
これでスキンと妙に融合した気持ち悪い書き方はしなくて済むようになった。
ソースコードの記述は自前で空白コードを埋め込まなくてはならなくなるが、エディタで簡単にできるので問題ではない。
デザインに凝りつつW3Cのお墨付きをもらえる日も近い。
間違っていたり、もっと良い方法があればどなたでもコメント歓迎です。
コメント