写真をメインにしたブログを行われている方もいますよね。
写真に縁取りのようなものをつけて、より写真らしく魅せている方もいますよね。
今回は縁取りをつける方法のご紹介です。
通常は写真をアップするとこのように、何も縁取りなどはありませんね。
せっかく写真を綺麗に目立たせたいと思ったら、少し縁取りなどもつけてあげると写真の見栄えも変わってきます。
ちなみにこの写真は、足成さんというフリーの写真を提供しているところから頂いてきましたので、私が作ったパスタではありませんよ(*⌒∇⌒*)
次に枠をつけた写真になります。
パソコンの画面によっては少し背景は薄くてみずらいかもしれません。
背景の色によっても見やすさが違ってきますので、ＣＳＳのカラーコードを変更して自分で色も変更して見て下さい。
さっそくＣＳＳのご紹介です。
ＣＳＳ編集用じゃないデザインの場合
フリースペース、もしくはプラグインを使用します。
どちらでも構いませんが、フリースペースの場合は改行してしまうと自動で改行タグが挿入されてしまうため、改行を消してください。
過去の写真、画像もすべて縁取りをつけても構わないという場合
<style type="text/css">
.skinArticleBody img{
border:1px solid #f3f3f3;
padding:8px;
background:#fffff0;
}
</style>
写真ごとに指定して縁取りをつけたい場合
<style type="text/css">
.fuchi{
border:1px solid #f3f3f3;
padding:8px;
background:#fffff0;
}
</style>
記事作成ごとに写真にタグをつける必要があります。
個別に指定する場合の記事作成方法は、最後に説明します。
ＣＳＳ編集用のデザインの場合
過去の写真、画像もすべて縁取りをつけても構わないという場合
.skinArticleBody img{
border:1px solid #f3f3f3;
padding:8px;
background:#fffff0;
}
写真ごとに指定して縁取りをつけたい場合
.fuchi{
border:1px solid #f3f3f3;
padding:8px;
background:#fffff0;
}
記事作成ごとに写真にタグをつける必要があります。
個別に指定する場合の記事作成方法は、最後に説明します。
各種調整の為の説明
border:1px solid #f3f3f3;
は外側の線で、1pxは線の太さ、solidは線の種類、#f3f3f3は線の色を指定しています。
padding:8px;
は写真の外側の枠の幅を指定しています。
数字を大きくすれば枠も広くなります。
background:#fffff0;
は縁取りの背景の色です。
これらを変更することで自分のブログの色合いなどに合わせることが出来ます。
写真ごとに縁取りを反映させる方法
過去の写真、画像もすべて縁取りをつけても構わないという場合でＣＳＳを張り付けた方は、すべて反映されますので、何もすることはありません。
写真ごとに縁取りをするためには、ＨＴＭＬタグにＣＳＳの情報を入れてあげる必要があります。
ブログを書くという画面で、画像を差しこんだら画面の下部にある[ＨＴＭＬタグを表示]を選択します。
そうするとＨＴＭＬが表示されます。
アルファベッドや数字が羅列されていて、少し分かりにくいと思いますが、下記のような感じで表示されていると思います。
<a href="http://stat.ameba.jp/user_images/20130412/15/arksz/d5/ae/j/o0481036012497590357.jpg"><img class="fuchi" border="0" alt="デザインって大事なの" src="http://stat.ameba.jp/user_images/20130412/15/arksz/d5/ae/j/o0481036012497590357.jpg" width="220" height="165" /></a>
赤字で表示したclass="fuchi"を、この場所に追加することで縁取りがされるようになります。
imgとborder="0"の間に挿入すると憶えておけば良いかもしれませんね。