ブログに載せる画像に枠を付ける簡単な方法

2010⁄12⁄16 Tags :
はてなブックマークに追加はてなブックマーク - ブログに載せる画像に枠を付ける簡単な方法   
ブログに載せる画像に枠を付ける簡単な方法 写真 フレーム ブログ写真 装飾

年末年始などの季節のイベントに限らず、
写真や画像を載せる方は多くいらっしゃるようです。

キレイに撮った写真なら、キレイに公開したいもの。
けれど、皆が画像編集ソフトを持っている訳じゃない。

そこで今回は、手軽にかっこ良く簡単に画像に枠を付ける方法」を紹介。

枠を付けるスタイルシート。
フォトショップなどの画像編集ソフトがなくても使える便利なテクニックです。
 
 

写真に枠をつけるだけで豪華に見える


ブログに載せる画像に枠を付ける簡単な方法 写真 フレーム ブログ写真 装飾 サンプル1
枠線あり
ブログに載せる画像に枠を付ける簡単な方法 写真 フレーム ブログ写真 装飾 サンプル2
枠線なし

枠線を付けると、画像を額に入れたようにシャキッと見せることが出来ます。


簡単なタグ講座


ブログ・ホームページで画像を挿入したことがある方は、
imgタグを見たことがあると思います。

上記の画像の場合、以下のようなタグが挿入されると思います。

<img src="http://blog-imgs-46.fc2.com/c/h/i/chillslab/profile1.jpg" alt="profile1.jpg" border="0" width="160" height="160" />

HTMLに慣れていないと呪文のようにも見えますが
よく観察すると画像タグの内容はとても単純なものです。

ブログに載せる画像に枠を付ける簡単な方法 写真 フレーム ブログ写真 装飾 THMLタグについて

画像タグ内にはURLや画像名など、色んな内容が入っています。
そして、各種内容は半角スペースで区切られています。

多くのタグは<タグ> ○○ </タグ>と、囲んで効果を発揮させるのですが
画像タグは1つのまとまりで完結しています。

今回のタグを日本語に直せば

画像『
画像のアドレスは「http://blog-imgs-46.fc2.com/c/h/i/chillslab/profile1.jpg」
名前は「profile1.jpg」
枠線は「0ピクセル(無し)」
横幅は「160ピクセル」
縦幅は「160ピクセル」
。』

でしょうか?

それぞれの数値をいじれば、比率を変えたり出来るので
気が向いた方は試してみてください。
大きすぎる画像を無理矢理小さくしても、容量は変わらないので
画像を大量に挿入する方はご注意を。(激重サイトになっちゃったりします。)


写真に枠をつけるだけで豪華に見える


枠線は、この画像タグの内容の中にスタイルを加ます。

先程の日本語で表せば  装飾は「〇〇〇」

最初の例のような枠を付けるのであれば
height="160"の後に半角スペースを入れ以下の記述を書き入れる。

style="border:solid 1px #909090; padding:1px;"

記入後のimgタグ
<img src="http://blog-imgs-46.fc2.com/c/h/i/chillslab/profile1.jpg" alt="profile1.jpg" border="0" width="160" height="160" style="border:solid 1px #909090; padding:1px;" />

画像タグの内容と同じように、この装飾の内容も簡単なものです。

ブログに載せる画像に枠を付ける簡単な方法 写真 フレーム ブログ写真 装飾 スタイルの内容

この数値を変更してやれば、お好みの枠にすることが出来ます。


枠線の種類
線の種類には様々なものがあります。
私はsolidを使っていますが、grooveやridgeなども作品の額っぽいですね。

 solid   double   dotted   groove 

 ridge   inset   outset   dashed 

また、borderをborder-styleとしてやると
上下左右個別で設定してやることも出来ます。

 border-style: ridge dashed groove double; 

border-style:[上][右][下][左];
あまりやり過ぎるのも見辛くなってしまいますので
こんな方法もあるよ位に覚えておけばいいと思います。


画像と枠の距離
例で紹介したpadding(画像と枠の距離)は1つの数値を書くことで
上下左右、一括の設定にしています。

これも個別に設定してやることが出来ます。
数値は[上][右][下][左]の順。

ブログに載せる画像に枠を付ける簡単な方法 写真 フレーム ブログ写真 装飾 サンプル3

padding: 10px 6px 30px 6px; のようにしてやると
ポラロイド写真のように見せてやることも出来ます。


WEBカラーのルールについて


WEBサイトはモニターで表示されるので赤、緑、青の光の3原色です。
俗にいう加法混色という物。

数値は各色16新数の2ケタ×3色で表記してやります。
言葉ではこんがらがってしまいますね。

ブログに載せる画像に枠を付ける簡単な方法 写真 フレーム ブログ写真 装飾 WEBカラーの説明
イメージはこんな感じ。

数え方としては
01,02......08,09,0A,0B......0E,0F,11,12......と増えていきます。

#909090のように6ケタの数字で記入。

本当は3ケタでも記入できますが、色数が少なくなります。
3ケタの場合はFC2ブログであれば「文字に色を付ける」のカラーパレットの色数
#336699のばあい#369でも表示されると言ったところでしょうか。


00は最小値、FFが最大値です。
なので#000000は黒#FFFFFFは白に。
#909090のように各色の数値を均等にしてやるとグレートーンになります。

FC2ブログでは「文字に色を付ける」機能で基本的な数値が現れるので
カラーパレットからお好みの色の数値を選んで使うと便利です。

ちなみに、どんな色にも合う色がグレー(無彩色)です。
印刷を学ばれている、関わっているなどであればご存知と思いますが
小さな文字などは黒を使わず、僅かなグレーにすることがあります。

このテクニックWEBサイトの制作にも使えるテクニックです。
白背景にテキスト文字などを黒で表す時は000000使わず
111111くらいのややグレーにしてやると、サイトに馴染みます。


数値でなく、文字で指定する
また、色の指定方法は6ケタの数字だけではなく
カラーネームでも指定することが出来ます。

色数は16色ですが、HTMLで定義されている色なので
古いブラウザや携帯などでも解釈できる基本的な色です。

カラーネーム一覧

  black
#000000
  red
#ff0000
  lime
#00ff00
  blue
#0000ff
  gray
#808080
  maroon
#800000
  green
#008000
  navy
#000080
  silver
#c0c0c0
  fuchsia
#ff00ff
  yellow
#ffff00
  aqua
#00ffff
  white
#ffffff
  purple
#800080
  olive
#808000
  teal
#008080




最近流行っているjQueryなどを使えば、より豪華な装飾にもなりますが
使いこなすまでにはそれなりの時間がいるもの。

テンプレートのスタイルシートが使える方は
そこに独自スタイルをつくってやるのもよし
よく分からない人も一度作っておけば、後はstyleのコピー&ペーストで
統一したフレームで装飾することが出来ます。

色々と種類がありますが、画像や写真を強調したい場合は
1px位のシンプルな枠がオススメです。
手っ取り早く写真の装飾をしたい方はスタイル装飾を試して見て下さい。

   
この記事をブックマークはてなに登録livedoorクリップGoogle BookmarksYahoo!deliciousBuzzurl
ブログランキングに参加しています。
人気ランキングへにほんブログ村へビジネスブログ100選blogram投票ボタン
ブログランキングについて

テーマ : ∞写真関連情報∞  ジャンル : 写真

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

ブログの画像に枠線を付ける

過去記事の リンクの色変更について4 にて画像に枠線がなくて見にくく 枠線の付け方を検索したのだがマニュアルも含めほとんどのものが CSS(スタイルシート)を編集するという高度なもので今の自分には理解できなかった。 しかし、貼り付けた各画像のHTMLに枠線のHTML文?を追加するという方法の 記事を見つけたので参考にして、挑戦してみる。 参考にした記事はこちら。   ...

コメントの投稿

非公開コメント

ほっほ~

チル様こんばんは
コメントありがとうございます。
最近はHTMLがよくわかんなくても
ブログやHPが手軽に作れてしまうので
HTML超初心者のおやじには
ひじょう~に勉強になります。
話は変わりますが、ロストワックスやられた
事があるのですね・・・
おやじも一度チャレンジしてみます。
アート系も超初心者ですが
今後ともよろしくお願いしますね。

Re: ほっほ~

なんちゃっておやじ さん> こんばんは
HTMLは慣れてない人は拒絶してしまうだろうな
と、思いながら記事にしていたりします。
「説明すると覚えが早い」じゃないですが、半分自分の備忘録です。

今回のスタイルは殆どコピー&ペーストでしのげると思うんで試してみてください。

ロストワックスと言ってもキャストはしたこと無いんですよね。
遠心力が面白いという噂を聞いたことがあるので、いずれは見てみたいです。

はじめまして^^

すごく勉強になりました^^

すごくわかりやすかったです♪

Re: はじめまして^^

吉田パフ さん>ありがとうございます。
どの程度伝わるかドキドキしてました。

今回の記事が理解できると
他の場面でけっこう応用がききますよ。

No title

なるほど!!
すごい参考になりました!
いつも訪問ありがとうございます!

Re: No title

あやた さん> どうもです。
写真だけでなく、アップロードした画像にも使えるので
バキっと見せたい時にでも試してみて下さい。

No title

たいへん参考になりました☆
こんなに簡単にできるんですね~
(っていえるのも、Chillさんが懇切丁寧にレクチャーしてくださったおかげです♪)

写真が上手に撮れない&デジタル一眼を持っていない分、こうした技で、美味しそうに見えるお料理写真をアップしたいです^^

これからも、Chillさんの胃袋をがしがし揺さぶり続けます♪
(最近、時間がとれず、お料理紹介できなくてすみません。。。)

No title

 はじめまして。

 画像の枠のつけ方を教えていただき、ありがとうございます。僕のような無知な者には奇跡に近い出来事でした。枠がつけられたらいいなと思っていたところなので、感激です!

Re: No title

macmasky さん> ありがとうございます。
一見ムズカシそうですが、楽チンです。
写真を生かす様に、香り付け程度にやるといいと思いますよ。

いろんな方の料理ブログを拝見してて気付いたんですが
私はきれいに撮れたというよりも、愛情がある写真に惹かれます。
写メールのような画質や、フライパンから移したての盛付けでも
どことなく惹かれてしまう。

美味しそうにに盛付け、上手く撮れる撮れるに越したことは無いですけど
やっぱり楽しく・美味しくが一番な気がします。

次回作も楽しみにしています。
過去記事があるから、それだけでも十分大変なことになってますけどね。

Re: No title

その日暮らし さん> はじめまして。
たぶん、無知とかじゃなくて探し方が思い付かなかったとかじゃないかと。
専門書で専門用語で書かれても分かりづらいですよね。

お好みのスタイルを探して試してみて下さいね。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

(* 'ω')ノコンバンハ

ソフトがなくても枠って付けられるんですね~。
丁寧にレクチャーしてくださっているので、素人主婦にも大変わかりやすかったです☆

おかげさまで私のブログの写真にも、枠をつけることができました。ちょっとグレードアップしたような気がして嬉しいです。これから利用していこうと思います。

ありがとうございました♪

Re: (* 'ω')ノコンバンハ

丸山みかん さん> おお!使われているの拝見しました。
使わなくても美味しそうなのに、更に引き立ってますね。

記事で紹介したように色や線の種類なんかも色々設定できるので
お好みに合わせて探してみて下さい
(グレーは色んなテンプレートに合うので、ナイスチョイスです。)

紹介までして下さってありがとうございます。
これからも、楽しみに拝見させていただきますね。

はじめまして

丸山みかんさんの所より飛んできました^^ はじめまして。

とても分かりやすい説明で、何も分からない私でも「枠」を作る事ができました☆
幅とか枠の太さとか色々試してみて自分の気に入ったのをコピペして使いたいと思ってます♪
色々こちらでお勉強させてもらいますのでよろしくお願いします^^

どうもありがとうございました☆

Re: はじめまして

Kana さん> はじめまして。
一度お気に入りのモノを作ってしまえば
後はコピー&ペーストでばっちりです。

私も新たな食べ物ブログを知って喜んでいたりしています。

あまりマニアックなテクニックは紹介するか分かりませんが
お時間のある時にでもご覧頂ければと思います。

No title

はじめまして。
いつもご訪問ありがとうございます。

枠のつけ方、とても参考になりました!早速使わせてもらってます。
難しいことはできませんが、今回のように簡単なことならまた
チャレンジしたいので、いろいろ教えてくださいね。

Re: No title

やんちゃ さん>お役に立ててうれしいです。
ブロックのようなオモチャの写真に枠をつけると
パッケージのように見えますね。

気になる方法があれば、お気軽に仰ってください。
万能ではないので、全部答えれる訳じゃないと思うんですが
大体の人が手軽に出来そうなモノだったら解説してみますよ。

No title

Chill【チル】さん こんばんは よく探したらこちらにちゃんと記事がありましたね
大変ためになる記事が多くて今後も参考にさせて頂きますね^^

»メインの領域が584pxで切れているので
と頂いたアドバイスは全く思いつきませんでした。すごいですね・・・
以前のテンプレの時から長辺640pixにそろえていてふつうに見えているものだと
ばかり思っていたんです。自動でトリミングされてたんですね・・・なるほど確かに
切れててヘンだなって思った写真もありました・・・^^;
親切で丁寧なコメントをいただいて助かりました。ありがとうございます

ちなみにリサイズはRalphaっていう専用のソフトを使っています
縮小アルゴニズムはいろいろ選べますが今はbicubicです
元画像がRAWで現像かまったりするとかなりでかいサイズなので縮小したときに
けっこうな差があるかもしれませんね 
階調崩れてるよってコメント頂いたこともあります・・・(汗

ブログのカスタマイズはホント初心者なのでまずはブログタイトルの文字を変える
とかヘッダーに自分の写真を入れる、とかポピュラーなことをしてみたいです
もしかしてすでにこちらで記事にされているかもしれませんね?見てみます♪

それと写真のことほめていただいてありがとうございました
クオリティーなんてコメントいただいたの初めてで恐縮するやらうれしいやら・・・
うーん・・・やっぱり嬉しかったです(笑) 
まだ去年始めたばかりなんです写真もブログも。がんばりまーす♪
これからもよろしくお願いいたします<(_ _)>


Re: No title

milk さん> お礼コメントありがとうございます

残念ながら、テンプレートカスタマイズは
構成ごとに方法が変わるので、記事にはしていません。

フォントもまだしていないですね。
いずれやってみようと思います。

私のブログにはまだ記事にできていませんが、
ある程度、見通しが立った時にmilk さん宛にメッセージを送らせていただきます。

これからもどうぞよろしくお願いいたします。

はじめまして

とても参考になりました!

ありがとうございます。

Re: はじめまして

にこらうす さん> お役に立てて良かったでです。

画像枠について

始めての者です、

こちら様の記事に出会えて憧れの画像枠を作成できました、

あるブログで下部分にサインがしてあるのを見ていいなあと思っていました、

これまでにもサイトを参考にやってみましたが出来ませんでした、

 ゆっくりブログを拝見させていただきます、ありがとうございました。

 

 

Re: 画像枠について

acyababa さん> ご希望の操作が出来て良かったです。
「下部分にサイン」というのが、どういう状態を指すのか上手く捉えることが出来ませんが
「画像の中やフレーム内にウォーターマークを入れたい」などであれば
画像作成ソフトなどを利用するのが手っ取り早いと思います。

どちらもスタイルシートという方法で出来ないことは無いのですが
ポラロイド写真の一言コメントみたいに入れるのであれば
画像作成ソフトで作ってしまうのが手っ取り早くて分かり易いような気がします。

本当はブログ記事で紹介している枠の付け方よりも
「外部スタイルシート」(FC2ではテンプレートの設定で操作するのですが)
で書いてやると、外観を変えた時の修正が簡単なのですが
込んだことを始めると終わりが無くなるのがブログの怖いところ。

老舗のサイト様などでは、なかなかに手の込んだ作り方をされているところも多々ありますので
出来る範囲を増やす感じで楽しんでいかれるのが良いような気がします。

これからもご愛顧のほど、よろしくお願い致します。
最近作品・今までの作品
スポンサー
アップしたやつとか
最新記事
チラシの裏チラシの裏 バックナンバー
カテゴリ
ブログ記事検索
お友達・おすすめサイト
あまつのひみつ

23/奴隷区 僕と23人の奴隷

奇少物件100LDK
プロフィール

Chill【チル】

管理人:Chill【チル】
モノ作り関したことを中心に書いていこうと思います。
チラシの裏それ以外はチラシの裏
書いていきます。
非表示コメント記事に関係ないご連絡や
非表示コメントはこちら
にどうぞ
リンクフリー当サイトはリンクフリーです

Chill's Mart チルズマート HP:作品一覧ページ
PC壁紙 Hatena Fotolife:壁紙
お絵かき Pixiv:お絵かき
deviantART作品アルバム deviantART:作品集 海外
素材集 Flickr:素材集
snsサイト Facebook:フェイスブック
icon_artmeter.jpg ART-Meter:1点モノ作品
shop_clubt.png クラブT:グッズ・雑貨販売
shop_upsold.png UPSOLD:グッズ・雑貨販売
zazzleZazzle:グッズ・雑貨(世界)
現在時刻
ブログでは、色んな作家様を紹介させて頂いておりますが、著作権の侵害を目的とするものではありまません。
記事などに用いている画像・映像などの所有権は、それぞれの著作者・団体に帰属しています。
作品画像を始め、著作権などの問題がありましたら、ご連絡下さい。
著作権所有者様からの警告、修正・撤去などのご連絡があった場合は迅速に修正、削除させて頂きます。
月別過去の記事

総記事数:
スポンサー
お知らせ&ミニブログ
Twitter 最近記事のRSS
Twitterアカウントについて。 です。

このブログをリンクに追加する
ブログランキング
日替わりで集計しています。
人気ブログへビジネスブログ100選
にほんブログ村へblogram投票ボタン
CoRich
ブログランキング
web拍手 by FC2
押した人は私がピックアップされた時に
「ワシが育てた」と言ってもいいです。

ブログランキングについて
スポンサー