「コピペ」でブログの投稿写真に枠や影をつける

ブログ記事の画像に装飾をする方法です。・・・ナチュログのテンプレートカスタマイズ・ブログデザイン・ブログカスタマイズ


方法は何種類かあるのですが、今回は簡単に「コピペ」で記事の画像全てを一括で変更する方法です。

スタイルシートの最後に、好きな装飾の青文字部分を「コピペ」するだけ！

最後というのが重要です。

前回の記事の繰り返しになりますが、スタイルシートには優先順位があって、基本的に後に書かれたものの方が優先度が高いので、最後に記述すればオリジナル部分を変更しなくても大丈夫です。

オリジナル部分をいじると訳がわからなくなる場合があります、出来る限り修正分を追記するという方法がおすすめです。

通常の手順で写真をアップロードすればブログには装飾された画像が表示されます。

※スタイルシートの編集方法は過去記事「ブログタイトル画像の差し替え」を参考にしてくださいね。



＜元画像・・・標準＞




①枠をつける



/* ブログ画像装飾 */
.main img{
border:solid 1px #ccc;
}


②外枠をつける



/* ブログ画像装飾 */
.main img{
border:solid 1px #ccc;
padding:4px;
}


③うっすらと影をつける



/* ブログ画像装飾 */
.main img{
box-shadow: 0px 0px 20px -5px #999;
}


④少し濃い影をつける



/* ブログ画像装飾 */
.main img{
box-shadow: 5px 5px 15px -5px #666;
}


⑤角を丸くする（大きめ）



/* ブログ画像装飾 */
.main img{
border-radius: 10px;
}


⑥角を丸くする（小さめ）



/* ブログ画像装飾 */
.main img{
border-radius: 5px;
}


④少し濃い影をつける＋⑤角を丸くする（大きめ）



/* ブログ画像装飾 */
.main img{
border-radius: 10px;
box-shadow: 5px 5px 15px -5px #666;
}


※線や影の色
薄い → 濃い
#ccc → #999 → #666 → #333