moblogテンプレート修正

久しぶりに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であることを明記するということは、常に意識していなければいけない、戒めみたいな物かもしれません。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/343

revive -moon.zombie- - 携帯投稿時のレイアウト変更してみる (2005年6月13日 23:44)

先日まで2ヶ月ほど、携帯のみでの更新。 これが結構便利で、moblog.uva.... 続きを読む

Comments