カスタマイズ：画像枠

画像枠を消したいという質問がよく頂くのでその回答と、画像枠のカスタマイズをいくつか紹介します。

-- 続きを読む --

全てのテンプレートにおいて記事に投稿された画像にはスタイルシートにて画像枠を表示する指定がされています。
このテンプレートでsample 1の画像を投稿しても
<img src="/sample1.gif" alt="sample1.gif" border="0" width="150" height="50" />

実際には次のような枠が表示されます。



・画像枠を消したい。
スタイルシートを赤字のようにします。
（テンプレートによって多少の違いはあります）

.entrytext img {
    padding: 0;
    border: none;
    background: none;
}

・一部の画像だけ枠を消したい。
一番簡単なのはhtmlタグにstyle="border:none;"を追加する方法です。
<img src="/sample1.gif" alt="sample1.gif" border="0" width="150" height="50" style="border:none;" />


次に画像枠のカスタマイズについて。

・画像の上右下左に対して、実線の1px#BBB 3px#888 3px#888 1px#BBBで囲むサンプル。

.entrytext img {
    padding: 0;
    border-style: solid;
    border-width: 2px 5px 5px 2px;
    border-color: #BBB #888 #888 #BBB;
}

・ポラロイド風な枠のサンプル。

.entrytext img {
    padding: 10px 10px 50px 10px;
    background: #FFF;
    border-style: solid;
    border-width: 1px;
    border-color: #BBB;
}

・CSS3のbox-shadowを利用した影エフェクトのサンプル。

.entrytext img {
    padding: 0;
    border: 0;
    -webkit-box-shadow: 0 10px 6px -6px #888;
    -moz-box-shadow: 0 10px 6px -6px #888;
    box-shadow: 0 10px 6px -6px #888;
}

・複数のデザインを使い分ける。
あらかじめ.entrytext imgによる指定を無効にしておきclass="○○"をhtmlと.○○をスタイルシートに追加する。

画像の周りの余白に背景色を指定するサンプル。
<img class="xxx" src="/sample5.gif" alt="sample5.gif" border="0" width="150" height="50" />

.xxx {
    padding: 10px;
    background: #999;
}

2本線（double）を用いたサンプル。
<img class="yyy" src="/sample5.gif" alt="sample5.gif" border="0" width="150" height="50" />

.yyy {
    padding: 0;
    border-style: double;
    border-width: 5px;
    border-color: #999;
}

なおborderやbox-shadowについては「CSS border」「CSS3 box-shadow」等で検索すれば詳しく解説しているサイトあるので指定方法などはご自身でお調べ下さい。

-- 続きを閉じる --