Bloggerの画像の枠のスタイルをカスタマイズ

少しBloggerをカスタムしたので忘れないようにメモを残しておきます。

bloggerのテンプレートには自動で画像に枠がついてしまうものもあるみたいですが私の使っているテンプレートにはなかったので写真に枠をつけるようにスタイルシートを追加しました。

自動で枠がついても困ることもあるので

せっかく透過したのに

枠付きだと↓こんなに…

ということで…

枠なし

枠あり

スタイルシート（CSS）を追加するには
Bloggerのメニューで『テンプレートを選び』カスタマイズをクリック

『Bloggerテンプレートデザイナー』から『アドバンス』の『CSS』を追加メニューに

.photo{background: #fffff0;

padding: 15px;

border-width: 1px;

border-style: solid;

border-color: Silver Gray Gray Silver;

}

 を加え『ブログに適用』をポチとすると枠のスタイル(.photo)が追加されます。

画像に枠を入れたい場合は
投稿画面のメニュー左上のHTMLに切り替えて　img src のタグにdiv class="photo"を加えます。↓ピンクで囲んだところに追加。（画像をクリックすると大きくなります）

枠に画像を使うこともできます。英字新聞の枠をつけてみます。

.pb

{

padding:15px;

background: #fff url(########)repeat 0 0;

border-width: 1px;

border-style: solid;

border-color: Silver Gray Gray Silver;

}

(####は画像(英字新聞）のURLを入れる。)

上記と同じで　img src のタグにdiv class="pb"を加えます。

あとサイズについて…Blogger画像を選ぶのは小・中・大・特大と選べますが、どうもどれもしっくりこない…

そういうときも投稿画面でHTMLでimgタグでサイズ変更します。幅が512px位がいいのでwidth="512" height="384"を入れます。

このサイズ↓

・英字新聞の素材をいただきました→　ヒバナ

・うさぎちゃんはうさぎカフェ　おひさまのうさちゃんです。