HOME 　»　css , design , Firefox , MovableType , tutorials 　»　写真みたいな枠を付けよう【MT用小ワザ付き】

写真みたいな枠を付けよう【MT用小ワザ付き】

今までは写真を表示させる時に普通に灰色の枠線が写真の縁に沿ってついていただけ（もしくは枠なし）
だったんですけど（こんな感じですね：IEのみ）、上の写真のように素材に写真風の枠がつくようにしてみました。
ずっと前からやりたかったんですけど、全然うまくいかなかったんですよねぇ。
画像にclass指定をかけても、どうしても画像周囲に沿って空白が設定されなかったのが理由です。
おそらくいつものpaddingに関するIEのバグのせいだと思うんですけど。
これがFirefoxだと思った通りに表示されてましたからねぇ。全くIEてば使えん。

で、これに関する解決策を調べてみたものの、テーブル組にするとか、画像表示に関する設定をJavaで組んで制御する（seeseaの記事なのでMTで使えるのか不明）とか、微妙なものしかなくって。
あきらめるしかないのかなぁと思っていた矢先、まさに私の理想とする状態で写真が表示されているサイトを発見しました。

こちらの「solo.design」ってサイトさんなんですけど、うっとりするようなデザインでふるふる来ます。
と、それは置いといて。
こちらのサイトさんで使われている写真には白枠がついてるんですよねぇ。
ソースを見た所、テーブル組みはしていないようだし、と言う事で恐れ多くも管理人さんに質問してみた所、普通にcssで指定かけてあるだけですよ、とのお答えが。
もちろんさっそくマネっこしたのですがやっぱりうまくいかなくて、IEだってcssの指定で写真風に表示できるはずなのに何がおかしいんだろうなぁと思っていたら、答えは意外な所にありました。

実は自分のサイトにあったんですよね、これが。

過去ログを見直してる時に、昔投稿したモブログの写真をIEで見たんですけど、なぜか枠がちゃんとついてました。
驚いてソースを見たら、パソコンからupする時と、昔のモブログ用の画像指定のかけ方って違っていまして。
ココを修正したらビンゴ！　ちゃんと表示されるようになりました。

• 以前のモブログ用の画像指定
  <div class=”image”><img src=”http://画像のup先” /></div>
• パソコンから画像をupした時の指定
  <img src=”http://画像のup先” class=”image” />

要は画像表示を<div>指定で制御すると枠が表示されるんだけど、<img>タグに直接class指定をかけてもきちんと表示されない、と言う事です。
全然気がつきませんでした。
そんな訳で、もし同じ事で困っている人がいたら是非<div>で画像を囲ってあげてください。

ここから下にはMT用の画像up時に自動で画像を<div>で囲うようにする設定を自分用に覚え書きしておきます。
正しい設定かどうか分かりませんが、一応動作確認済みです。

画像アップロード時の基本レイアウトを改変

lib/MT/App/CMS.pm：1962、1970、1974行目

【改変前】　→色つき字部分を削除

        my $link = $thumb ? qq(<img src="$thumb" width="$thumb_width" height="$thumb_height" class="image" />) : "View image";
return <<HTML;
<a href="$url" onclick="window.open('$url','popup','width=$width,height=$height,
scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,
menubar=no,status=no,left=0,top=0'); return false">$link</a>
HTML
} elsif ($q->param('include')) {
(my $fname = $url) =~ s!^.*/!!;
if ($thumb) {
return <<HTML;
<a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" class="image" /></a>
HTML
} else {
return <<HTML;
<img alt="$fname" src="$url" width="$width" height="$height" class="image" />
HTML
}
} elsif ($q->param('link')) {
return <<HTML;
<a href="$url">Download file</a>
HTML
}

【改変後】　→色つき文字部分を追加

        my $link = $thumb ? qq(<div class="image"><img src="$thumb" width="$thumb_width" height="$thumb_height" border="0"/></div>) : "View image";
return <<HTML;
<a href="$url" onclick="window.open('$url','popup','width=$width,height=$height,scrollbars=no,resizable=no,toolbar=no,
directories=no,location=no,menubar=no,status=no,left=0,top=0');
return false">$link</a>
HTML
} elsif ($q->param('include')) {
(my $fname = $url) =~ s!^.*/!!;
if ($thumb) {
return <<HTML;
<div class="image"><a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" border="0"/></a></div>
HTML
} else {
return <<HTML;
<div class="image"><img alt="$fname" src="$url" width="$width" height="$height" border="0"/></div>
HTML
}
} elsif ($q->param('link')) {
return <<HTML;
<a href="$url">Download file</a>
HTML
}
}

モブログ投稿時のレイアウト設定を改変

dh’s memorandaさんの「moblog mail gateway」を利用しているので、こちらの「template」と「image template」の設定を書き換える。

【改変前】

・template：%(imagecontent)s\n%(caption)s
・image template：<img src=\"%(imageurl)s\" class=\"image\"/>

【改変後】　→オレンジ部分を追加

template：<div class=\"image\">%(imagecontent)s</div>\n%(caption)s
image template：<img src=\"%(imageurl)s\" border=\"0\"/>

ちなみにcssの設定はこんな感じです。
「image」の後に来るアルファベットを適宜入れ替える事によって、写真の位置と枠の有無を調整する形を取っています。

/* 画像表示の設定 */
.image{
float: left;
border: 1px solid #999999;
background-color: #FFFFFF;
padding: 5px;
margin: 0 10px 5px 0;
}

.imager{
float: right;
border: 1px solid #ccc;
background-color: #FFFFFF;
padding: 5px;
margin: 0 0 10px 5px;

}

.imagec{
float: left;
border: none;
padding: 5px;
margin: 0 5px 10px 0;
}

.imagecr{
float: right;
border: none;
padding: 5px;
margin: 0 0 10px 5px;
}

上二つが枠付き、下二つが枠なしの設定。
枠なしの設定の方でborder指定がかぶってる理由は、以前にアップした画像の設定までいちいち変えるのがめんどくさいからです（苦笑）。
本当は下二つの枠線指定はしなくても大丈夫だと思います。

以上、おしまい。

Related Posts

• プルダウン式メニューバーになりました
• コメント欄の幅を変える・日付表示を自由に変える
• コメントプレビュー機能とコメントスパム対策
• Wordpressに移行しました
• （ようやく）エントリの前後記事を読みやすくしました

• Tags : css , design , Firefox , MovableType , tutorials　|　TrackBack URL
• Prev : オサレなメニューバーを作ろう　|　Next : 裏ワザ・手巻きプチ肉まん