2010⁄12⁄16 Tags :
制作テクニックホームページブログ
年末年始などの季節のイベントに限らず、
写真や画像を載せる方は多くいらっしゃるようです。
キレイに撮った写真なら、キレイに公開したいもの。
けれど、皆が画像編集ソフトを持っている訳じゃない。
そこで今回は、
手軽にかっこ良く簡単に「
画像に枠を付ける方法」を紹介。
枠を付けるスタイルシート。
フォトショップなどの画像編集ソフトがなくても使える
便利なテクニックです。
写真に枠をつけるだけで豪華に見える
枠線あり |
枠線なし |
枠線を付けると、
画像を額に入れたようにシャキッと見せることが出来ます。
簡単なタグ講座
ブログ・ホームページで画像を挿入したことがある方は、
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に慣れていないと呪文のようにも見えますが
よく観察すると
画像タグの内容はとても単純なものです。
画像タグ内には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つの数値を書くことで
上下左右、一括の設定にしています。
これも個別に設定してやることが出来ます。
数値は［上］［右］［下］［左］の順。
padding: 10px 6px 30px 6px; のようにしてやると
ポラロイド写真のように見せてやることも出来ます。
WEBカラーのルールについて
WEBサイトはモニターで表示されるので
赤、緑、青の光の３原色です。
俗にいう
加法混色という物。
数値は各色16新数の2ケタ×3色で表記してやります。
言葉ではこんがらがってしまいますね。
イメージはこんな感じ。
数え方としては
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位のシンプルな枠がオススメです。
手っ取り早く写真の装飾をしたい方は
スタイル装飾を試して見て下さい。
ブログランキングに参加しています。
ブログランキングについて
テーマ : ∞写真関連情報∞ ジャンル : 写真
チル様こんばんは
コメントありがとうございます。
最近はＨＴＭＬがよくわかんなくても
ブログやＨＰが手軽に作れてしまうので
ＨＴＭＬ超初心者のおやじには
ひじょう～に勉強になります。
話は変わりますが、ロストワックスやられた
事があるのですね・・・
おやじも一度チャレンジしてみます。
アート系も超初心者ですが
今後ともよろしくお願いしますね。
なんちゃっておやじ さん> こんばんは
HTMLは慣れてない人は拒絶してしまうだろうな
と、思いながら記事にしていたりします。
「説明すると覚えが早い」じゃないですが、半分自分の備忘録です。
今回のスタイルは殆どコピー＆ペーストでしのげると思うんで試してみてください。
ロストワックスと言ってもキャストはしたこと無いんですよね。
遠心力が面白いという噂を聞いたことがあるので、いずれは見てみたいです。
すごく勉強になりました＾＾
すごくわかりやすかったです♪
吉田パフ さん>ありがとうございます。
どの程度伝わるかドキドキしてました。
今回の記事が理解できると
他の場面でけっこう応用がききますよ。
なるほど！！
すごい参考になりました！
いつも訪問ありがとうございます！
あやた さん> どうもです。
写真だけでなく、アップロードした画像にも使えるので
バキっと見せたい時にでも試してみて下さい。
たいへん参考になりました☆
こんなに簡単にできるんですね～
（っていえるのも、Chillさんが懇切丁寧にレクチャーしてくださったおかげです♪）
写真が上手に撮れない＆デジタル一眼を持っていない分、こうした技で、美味しそうに見えるお料理写真をアップしたいです^^
これからも、Chillさんの胃袋をがしがし揺さぶり続けます♪
（最近、時間がとれず、お料理紹介できなくてすみません。。。）
はじめまして。
画像の枠のつけ方を教えていただき、ありがとうございます。僕のような無知な者には奇跡に近い出来事でした。枠がつけられたらいいなと思っていたところなので、感激です！
macmasky さん> ありがとうございます。
一見ムズカシそうですが、楽チンです。
写真を生かす様に、香り付け程度にやるといいと思いますよ。
いろんな方の料理ブログを拝見してて気付いたんですが
私はきれいに撮れたというよりも、愛情がある写真に惹かれます。
写メールのような画質や、フライパンから移したての盛付けでも
どことなく惹かれてしまう。
美味しそうにに盛付け、上手く撮れる撮れるに越したことは無いですけど
やっぱり楽しく・美味しくが一番な気がします。
次回作も楽しみにしています。
過去記事があるから、それだけでも十分大変なことになってますけどね。
その日暮らし さん> はじめまして。
たぶん、無知とかじゃなくて探し方が思い付かなかったとかじゃないかと。
専門書で専門用語で書かれても分かりづらいですよね。
お好みのスタイルを探して試してみて下さいね。
このコメントは管理人のみ閲覧できます
ソフトがなくても枠って付けられるんですね～。
丁寧にレクチャーしてくださっているので、素人主婦にも大変わかりやすかったです☆
おかげさまで私のブログの写真にも、枠をつけることができました。ちょっとグレードアップしたような気がして嬉しいです。これから利用していこうと思います。
ありがとうございました♪
丸山みかん さん> おお！使われているの拝見しました。
使わなくても美味しそうなのに、更に引き立ってますね。
記事で紹介したように色や線の種類なんかも色々設定できるので
お好みに合わせて探してみて下さい
（グレーは色んなテンプレートに合うので、ナイスチョイスです。）
紹介までして下さってありがとうございます。
これからも、楽しみに拝見させていただきますね。
丸山みかんさんの所より飛んできました＾＾ はじめまして。
とても分かりやすい説明で、何も分からない私でも「枠」を作る事ができました☆
幅とか枠の太さとか色々試してみて自分の気に入ったのをコピペして使いたいと思ってます♪
色々こちらでお勉強させてもらいますのでよろしくお願いします＾＾
どうもありがとうございました☆
Ｋａｎａ さん> はじめまして。
一度お気に入りのモノを作ってしまえば
後はコピー＆ペーストでばっちりです。
私も新たな食べ物ブログを知って喜んでいたりしています。
あまりマニアックなテクニックは紹介するか分かりませんが
お時間のある時にでもご覧頂ければと思います。
はじめまして。
いつもご訪問ありがとうございます。
枠のつけ方、とても参考になりました！早速使わせてもらってます。
難しいことはできませんが、今回のように簡単なことならまた
チャレンジしたいので、いろいろ教えてくださいね。
やんちゃ さん>お役に立ててうれしいです。
ブロックのようなオモチャの写真に枠をつけると
パッケージのように見えますね。
気になる方法があれば、お気軽に仰ってください。
万能ではないので、全部答えれる訳じゃないと思うんですが
大体の人が手軽に出来そうなモノだったら解説してみますよ。
Chill【チル】さん こんばんは よく探したらこちらにちゃんと記事がありましたね
大変ためになる記事が多くて今後も参考にさせて頂きますね＾＾
»メインの領域が584pxで切れているので
と頂いたアドバイスは全く思いつきませんでした。すごいですね・・・
以前のテンプレの時から長辺640pixにそろえていてふつうに見えているものだと
ばかり思っていたんです。自動でトリミングされてたんですね・・・なるほど確かに
切れててヘンだなって思った写真もありました・・・＾＾；
親切で丁寧なコメントをいただいて助かりました。ありがとうございます
ちなみにリサイズはRalphaっていう専用のソフトを使っています
縮小アルゴニズムはいろいろ選べますが今はbicubicです
元画像がRAWで現像かまったりするとかなりでかいサイズなので縮小したときに
けっこうな差があるかもしれませんね
階調崩れてるよってコメント頂いたこともあります・・・（汗
ブログのカスタマイズはホント初心者なのでまずはブログタイトルの文字を変える
とかヘッダーに自分の写真を入れる、とかポピュラーなことをしてみたいです
もしかしてすでにこちらで記事にされているかもしれませんね？見てみます♪
それと写真のことほめていただいてありがとうございました
クオリティーなんてコメントいただいたの初めてで恐縮するやらうれしいやら・・・
うーん・・・やっぱり嬉しかったです(笑)
まだ去年始めたばかりなんです写真もブログも。がんばりまーす♪
これからもよろしくお願いいたします<(_ _)>
milk さん> お礼コメントありがとうございます
残念ながら、テンプレートカスタマイズは
構成ごとに方法が変わるので、記事にはしていません。
フォントもまだしていないですね。
いずれやってみようと思います。
私のブログにはまだ記事にできていませんが、
ある程度、見通しが立った時にmilk さん宛にメッセージを送らせていただきます。
これからもどうぞよろしくお願いいたします。
とても参考になりました！
ありがとうございます。
にこらうす さん> お役に立てて良かったでです。
始めての者です、
こちら様の記事に出会えて憧れの画像枠を作成できました、
あるブログで下部分にサインがしてあるのを見ていいなあと思っていました、
これまでにもサイトを参考にやってみましたが出来ませんでした、
ゆっくりブログを拝見させていただきます、ありがとうございました。
acyababa さん> ご希望の操作が出来て良かったです。
「下部分にサイン」というのが、どういう状態を指すのか上手く捉えることが出来ませんが
「画像の中やフレーム内にウォーターマークを入れたい」などであれば
画像作成ソフトなどを利用するのが手っ取り早いと思います。
どちらもスタイルシートという方法で出来ないことは無いのですが
ポラロイド写真の一言コメントみたいに入れるのであれば
画像作成ソフトで作ってしまうのが手っ取り早くて分かり易いような気がします。
本当はブログ記事で紹介している枠の付け方よりも
「外部スタイルシート」（FC2ではテンプレートの設定で操作するのですが）
で書いてやると、外観を変えた時の修正が簡単なのですが
込んだことを始めると終わりが無くなるのがブログの怖いところ。
老舗のサイト様などでは、なかなかに手の込んだ作り方をされているところも多々ありますので
出来る範囲を増やす感じで楽しんでいかれるのが良いような気がします。
これからもご愛顧のほど、よろしくお願い致します。
无域屋【むのくにや】
Chill's store
