» 投稿画像・イメージ画像に簡単に枠を付ける(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宣言について"
を参照してください。
秋月 錬
