使用テンプレート:nude
使用ブラウザ:Google Chrome

よく見かけるのがこちら。

0_20130925095408dd0.jpg

(赤)画像が大きすぎてきちんと表示されてないもの。
毎回サムネイルで書く、で対応することも可能です。

が。
今回は自動縮小・中央寄せ・飾り等入れてみましょう。

※FC2ブログのサムネイルについて※
初期は横縦Max170になっており、変更する事が可能。
[環境設定の変更]→[ブログの設定]→[投稿設定]→[サムネイル作成のサイズ]

以下CSSの変更。
前提:テンプレートにimgの設定がある場合。

1_20130925103830bc4.jpg
1.大抵"~ img"とあるため、上記と合致していることを確認して変更。

.~~ img {
border: 1px solid #000;
margin: 1px;
display: block;
margin-left: auto;
margin-right: auto;

max-width: 360px;
height: auto;

}

(青)画像を自動センタリング。

(赤)画像の自動縮小。
横360pxを上限とし、横縦を自動縮小。
逆に縦を上限としたい場合は「max-height: ---px;」を記載。


実際の画像がこちら。

4_201309251038297ee.jpg
360px(左右余白+2px)に自動縮小。

今回は枠線を1px黒の実線を追加しています。
borderの設定によっては写真風に仕上げる事も可能。

5_2013092510463341e.jpg
灰色の実線「左・上:1px」「右・下:2px」。
外枠・背景色の設定



前提:テンプレートにimgの設定がない場合。

たいていの場合は下記コピペで対応可能。

/* イメージにリンクを貼ったときの設定 */
a img {
border: 1px solid #000;
margin: 1px;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 360px;
height: auto;
}

色々いじってみてくださいませ。



1_201309180233226dd.jpg
※元画像。


コメント

    コメントの投稿

    (コメントの編集・削除時に必要)



    最新記事