Recent Entries

スポンサーサイト

[スポンサード リンク]


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

超簡単!CSSで画像にシンプルな枠をつける方法

[スポンサード リンク]


ブログに載せる画像は枠を付けてあげると綺麗に見えます。
ちょっとしたひと手間で画像が綺麗に見えるなら…と思って画像ソフトで枠作りしました。
でも、意外と枠作りって面倒くさかった…。みたいな。

そんなあなたにお勧めの、超簡単・超適当なCSS技をご紹介します。
この技を使えば画像ソフトで枠を付けなくてもOK!うまく使えば、ブログに貼り付ける画像に常に枠を付ける事もできます。また、外す事も容易です。
まずは下の画像をご覧くださいませ。

CSSで枠を付ける前の画像。なんか味気ないですねぇ。
画像に枠を付けない

CSSで枠を付けた画像。ひと手間かけた風だけど超簡単。
さりげなさを重視して色を控えめに設定するとCool!
画像に枠を付ける

上の画像のソース

<img src="http://blog-imgs-24.fc2.com/m/i/r/miracleblues/kumo.png" alt="画像に枠を付ける" style="border:solid 1px #ccc;padding:4px;" />

こんな感じのシンプルな枠なんですけどいかかでしょう?気にいった方は続けて読んでね。
基本的にシンプル枠です。色、幅など少しは弄れますが、もしも豪華な枠が必要になった場合は迷わず画像ソフトを使ってください。
個人的には単なるボーダーを付けるのならばこちらの方がイイ感じだと思いますよ。

CSSで画像にシンプルな枠を付ける方法

方法はいくつかあります。でも、やってる事は同じです。
要は画像にCSSでborderとpaddingを指定できればいいのです。
(padding部分は背景の色が適用されます。)

方法1

imgタグに直接スタイルを追加する。(border + padding)
特徴 : その都度、枠を付けるか付けないかを決めやすいが、外部CSS化と逆方向…。

style="border:solid 1px #ccc;padding:4px"

※線の太さ、線の色、画像と線の間の間隔(padding)はお好みで変更してください。

方法2

ブログの記事欄のidを使ってCSSに記述する。
特徴 : まとめて指定できる。過去の記事にある画像にも簡単に枠を付けられる。

div#entry_body img{
     border:solid 1px #ccc;
     padding:4px;
}

※うちのブログの場合、#entry_bodyが記事欄のidです。
ただ、絵文字も画像なので絵文字を使っている方はNG・・・。

方法3

枠を付けたい画像をdivやpなどで囲ってid、classを付けてCSSに記述する。
特徴 : htmlとCSSを分けられる。一番良い方法かな。

画像のソース

<div class="wakkuwaku"><img src="http://blog-imgs-24.fc2.com/m/i/r/miracleblues/kumo.png" alt="画像に枠を付ける" /></div>

※「wakkuwaku」の部分は自由です。idでもOK!

もしもpadding部の色と画像の色が同化してしまって外側の枠線のみになっちゃう場合は、backgroundに色を指定してあげると見やすくてグー!
画像に枠を付ける

というわけで、シンプルすぎるけど誰でも驚くほど簡単に画像の枠が付けられます。
なかなか便利で面白いから色々試して遊んでみてね。
※画像float時にpadding部のサイズが変になる不具合があるかもしれません。
その時は、プロパティに「vertical-align:bottom;」を追加すれば良いようです。

CSSのボックスモデル

意味わからない方の為にCSSのボックスモデルも軽く紹介しますので参考にどうぞ。
CSSで色んな設定をする時にとても重要な考え方です。
いい機会なので覚えちゃいましょ(*´д`*)グヘヘヘヘッ
CSS ボックスモデル

この画像全体をひとつのボックスとして考えます。
何かを配置した時には必ずこれらの要素が関係してくると思ってください。

  • width : コンテンツの幅
  • height : コンテンツの高さ
  • border : 枠線
  • padding : コンテンツと枠線の間の余白
  • margin : 枠線より外側の余白

コンテンツの外側にpaddingやmarginやborderがありますね。
トータルの幅やトータルの高さという場合、widthやheightだけではなくpaddingやborderの値も関係するという事です。
ここを間違えているとCSSを弄る時にパニックになりますのでぜひ頭に入れておいてくださいな。
(と常に自分に言い聞かせるのであった…。)

Comments

SistaN : No title

いいですね。そういう初心者向けの記事も。
確かに最近は画像に枠をつけてるサイトが多いですね。
昔は枠付きのサイトは少なかったのになぜでしょうね~

パペポ : No title

>SistaNさん
お早いコメントどうも~♪
初心にかえると意外と新しい発見があるような気がするので、ある意味自分の為に書いてます^^
当然ブログ始めたばっかの方の参考になればいいなぁってのもありますけどね。

確かに枠付き画像よく見ます。
なんでしょうねぇ。業界人じゃなきゃわかりませんね^^

ちなみに私は白地、枠無しで配置するのも好きですよ。

SistaN : No title

私も枠無しが好きですねー
私の場合はThickboxを使っているのでリンクされると大きくなると分かってもらうために、リンク付きの画像にはボーダーに5px(だっけな)の黒線を配置してますね。
たぶん枠がないと見づらいとか思われてスルーされてしまうのでw

私はもっぱら枠があると邪魔だって思うことが良くありますが、枠の付け方しだいでは素敵なデザインのサイトになりそうですね。

パペポ : No title

>sistaNさん
何でもそうですけど、使い方次第ですね~^^
枠に収まっていた方が綺麗に見える場合もありますし。

Thickboxですか。私はLightbox系のslimboxです。
記事の幅を広めにとってるので大体の画像は収まるのですが、演出の面でたまに使ってます。それとグループ化すれば見やすい場合もありますからね。
自己満の世界かもしれませんが・・・(;´∀`)

: 承認待ちコメント

このコメントは管理者の承認待ちです

: 承認待ちコメント

このコメントは管理者の承認待ちです

Comment Form