久しぶりにValidationチェックしてみたら、not Validateでした。確認してみると、moblogの画像にaltが無いのでエラーが出た模様。すでに投稿してしまったものは、エントリーから修正し、今後の事を考えて、moblog.uva.ne.jpのテンプレートを修正する事にした。また、CSSで写真に枠を作り、floatで回り込みの指定を行いました。
まずtemplateの修正から行う。(MTのテンプレではなく、moblog.uva.ne.jpのテンプレ)
<div class=\"caption\">%(caption)s</div>\n<div class=\"photo\">%(imagecontent)s</div>
となっていたのを、キャプションが写真の下に来るよう様に修正し、キャプションを段落に設定。
<div class=\"photo\">%(imagecontent)s</div>\n<p class=\"caption\">%(caption)s</p>
次にimage templateを修正
<img src=\"%(imageurl)s\ />
となっていたのを、画像の高さと幅は固定なので下記の様に指定し、altを入れる。
<img src=\"%(imageurl)s\" width=\"120\" height=\"160\" alt=\"Moblog Photo\" />
次に、回り込みと写真に枠を付けるCSSは下記の通り。立体的に見せるために、ボーダーにoutsetを使うのがポイント。
.photo {
text-align: left;
margin-bottom: 20px;
margin-right: 10px;
float: left;
border: 1px outset #999999;
padding: 5px 5px 15px 5px;
background-color: #F7FFF3;
}
回り込みの解除は、エントリー投稿情報(投稿者や時間)のclass「.content p.posted 」に「clear: left;」を追加して終了。
今後もnot validにならないよう、エントリー投稿時に気を付けないといけないですね。他のサイトさんでも、validの表記をされていても、確認してみるとたまにvalidでなかったりします。自分も含めてそうですが、validであることを認めてもらって安心してしまうんですね。validであることを明記するということは、常に意識していなければいけない、戒めみたいな物かもしれません。
Comments