f-blog

まず、共有テンプレートを32種類に減らして更新しました。

しかしこの表示は消えず。
普通には使えますが、気になる方は他のテンプレートを使ったほうが良いかもしれません。
訂正：消えてると思います。
----------------------------------------
identity01_2c
登録日：15/04/02
最終更新日：20/12/31
 記事はこちら

----------------------------------------
divide02_2c
登録日：15/03/05
最終更新日：20/12/31
 記事はこちら

----------------------------------------
fb08_2c
登録日：14/10/29
最終更新日：20/12/31
 記事はこちら

----------------------------------------
unify01_1c
登録日：14/10/29
最終更新日：20/12/31
 記事はこちら

----------------------------------------
gallery03_3c
登録日：14/09/26
最終更新日：20/12/31
 記事はこちら

----------------------------------------
photolog03_2c
登録日：14/04/16
最終更新日：20/12/31
 記事はこちら

----------------------------------------
divide01_2c
登録日：14/02/11
最終更新日：20/12/31
 記事はこちら

----------------------------------------
liquidstyle01_3c
登録日：13/12/13
最終更新日：20/12/31
 記事はこちら

----------------------------------------
spatial01_1c
登録日：13/10/07
最終更新日：20/12/31
 記事はこちら

----------------------------------------
airs02_3c
登録日：13/08/09
最終更新日：20/12/31
 記事はこちら

----------------------------------------
airs01_2c
登録日：13/06/21
最終更新日：20/12/31
 記事はこちら

----------------------------------------
fb07_2c
登録日：13/04/24
最終更新日：20/12/31
 記事はこちら

----------------------------------------
gallery02_3c
登録日：13/03/16
最終更新日：20/12/31
 記事はこちら

----------------------------------------
monochro01_2c
登録日：13/01/29
最終更新日：20/12/31
 記事はこちら

----------------------------------------
deadofnight01_2c
登録日：12/12/20
最終更新日：20/12/31
 記事はこちら

----------------------------------------
photolog02_2c
登録日：12/10/17
最終更新日：20/12/31
 記事はこちら

----------------------------------------
simplest03_3c
登録日：12/09/14
最終更新日：20/12/31
 記事はこちら

----------------------------------------
meteor02_3c
登録日：12/08/15
最終更新日：20/12/31
 記事はこちら

----------------------------------------
fb06_2c
登録日：12/06/19
最終更新日：20/12/31
 記事はこちら

----------------------------------------
simplest02_2c
登録日：12/05/02
最終更新日：20/12/31
 記事はこちら

----------------------------------------
simplest01_2c
登録日：12/02/23
最終更新日：20/12/31
 記事はこちら

----------------------------------------
length03_1c
登録日：12/01/19
最終更新日：20/12/31
 記事はこちら

----------------------------------------
lightsky01_3c
登録日：11/12/16
最終更新日：20/12/31
 記事はこちら

----------------------------------------
gravity01_2c
登録日：11/11/11
最終更新日：20/12/31
 記事はこちら

----------------------------------------
gallery01_2c
登録日：11/09/06
最終更新日：20/12/31
 記事はこちら

----------------------------------------
length02_1c
登録日：11/07/13
最終更新日：20/12/31
 記事はこちら

----------------------------------------
fnote03_2c
登録日：11/04/14
最終更新日：20/12/31
 記事はこちら

----------------------------------------
meteor01_2c
登録日：10/12/13
最終更新日：20/12/31
 記事はこちら

----------------------------------------
length01_1c
登録日：10/11/25
最終更新日：20/12/31
 記事はこちら

----------------------------------------
prison01_2c
登録日：10/09/17
最終更新日：20/12/31
 記事はこちら

----------------------------------------
photolog01_2c
登録日：10/07/21
最終更新日：20/12/31
 記事はこちら

----------------------------------------
daydate01-black_2c
登録日：10/06/15
最終更新日：20/12/31
 記事はこちら

-- 続きを閉じる --

全てのテンプレートにおいて記事に投稿された画像にはスタイルシートにて画像枠を表示する指定がされています。
このテンプレートで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」等で検索すれば詳しく解説しているサイトあるので指定方法などはご自身でお調べ下さい。

-- 続きを閉じる --