MovableType・テンプレート・ブログカスタマイズの小粋なテクニック満載!

 


« 前のページ | HOME | 次のページ »

2006年04月03日

» 投稿画像・イメージ画像に簡単に枠を付ける(MT共通)

ミスティプルーム看板娘あゆむちゃん

上のような、イメージ画像に枠が付いている状態にする
方法を紹介します。

画像に枠をつけるには、<head>~</head>に
以下のソースを追加します。

<style type="text/css">
<!--
img {
background: #ffffff;
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #666666;
border-right: 1px solid #666666;
padding: 5px;
}
-->
</style>

この方法を使えば、画像の横・縦幅が小さくても大きくても
簡単に枠をつけることができます。

ただし、この場合imgタグ全てにこのCSSが適用されてしまいますので
意図的に枠を消したいときは、以下のようにimgタグに「style="border:none;"」を
適宜追加して下さい。

(例) <img src="../***.jpg" alt="" style="border:none;">

「小粋空間」のMT3.2用テンプレートを利用している方は
"続きを読む"をクリックして下さい。

「小粋空間」のMT3.2用テンプレートを使っている方は
"styles-site.css"に以下のソースを追加してください。

追加する場所は、エントリー(.entry)のソースです。

/* エントリー */
.entry img {
background: #ffffff;
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #666666;
border-right: 1px solid #666666;
margin: 0px 10px 5px 0px;
padding: 6px;
}

このソースを追加すると、エントリー記事に貼り付けられた
イメージ画像に対して枠がつきます。
ただし、この場合も、エントリーに貼り付けられたイメージ画像
全てにこのCSSが適用されてしまいますので、
意図的に枠を消したいときは、imgタグに「style="border:none;"」を
適宜追加して消すようにして下さい。

!注意事項
小粋空間テンプレートの最初の行にXML宣言をしていると
IE6でプレビューしたときに枠が表示されないというバグが発生します。
詳しくは関連記事"標準準拠モードと後方互換モード・DOCTYPE宣言について"
を参照してください。


★ この記事が参考になりましたら投票お願いします。


» 関連記事

» 標準準拠モードと後方互換モード・DOCTYPE宣言について at 2006年04月05日

» 枠線(border)を変更する at 2006年04月02日




» トラックバックURL

トラックバックURL: http://atoria.sakura.ne.jp/mt/mt-tb.cgi/65





» コメントの投稿