個別記事

前後の記事

moblogテンプレート修正

この記事が属するカテゴリー
CSS Movable Type

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

2004-10-25T10:42:22+09:00 | コメント (0) | トラックバック (1) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/36

このリストは、次のエントリーを参照しています: moblogテンプレート修正:

revive -moon.zombie- さんからのトラックバック
携帯投稿時のレイアウト変更してみる
先日まで２ヶ月ほど、携帯のみでの更新。 これが結構便利で、moblog.uva.... [続きを読む]
2005年06月13日 23:44

コメント

"moblogテンプレート修正"へのコメントはまだありません。

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)