f-blog

FC2ブログ用共有テンプレート制作ブログ。

TOPIC


※当ブログからの素材の持ち帰りはご遠慮願います。


 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
edit |  tb: -- | cm: --
 
画像枠を消したいという質問がよく頂くのでその回答と、画像枠のカスタマイズをいくつか紹介します。
全てのテンプレートにおいて記事に投稿された画像にはスタイルシートにて画像枠を表示する指定がされています。
このテンプレートでsample 1の画像を投稿しても
<img src="/sample1.gif" alt="sample1.gif" border="0" width="150" height="50" />
sample1.gif
実際には次のような枠が表示されます。
sample1.gif


・画像枠を消したい。
スタイルシートを赤字のようにします。
(テンプレートによって多少の違いはあります)
.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;
}

sample2.gif


・ポラロイド風な枠のサンプル。
.entrytext img {
padding: 10px 10px 50px 10px;
background: #FFF;
border-style: solid;
border-width: 1px;
border-color: #BBB;
}

sample3.gif


・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;
}

sample4.gif



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

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

sample5.gif

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;
}

sample5.gif


なおborderやbox-shadowについては「CSS border」「CSS3 box-shadow」等で検索すれば詳しく解説しているサイトあるので指定方法などはご自身でお調べ下さい。
スポンサーサイト
カスタマイズの関連記事
edit |  tb: 0 | cm: 0

コメント


▲Page top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。