スポンサーサイト

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

ブログの写真に外枠をつけてみよう

2012.03.28 Wed
そろそろ新年度という事で、当ブログも少し見栄えを変えて気分も新たに。
まあ、基本的な部分は変わってないんですが(;´▽`A``

そんなタイミングで知り合いからブログに関して質問が。

「ブログの画像の外枠ってどうやって付けてる?」
写真に枠をつけてみる


やり方としては、色々とあると思います。
以前は画像自体に枠を付けていたりしたのですが、今回の様にブログの色やデザインを変えたりする事も
多い為、今は「スタイルシート」で枠表示しています。

「スタイルシート?」なんか難しそう…。そんな方も多いかと。
ただ、外枠位であれば結構、簡単にできちゃいます。

また、写真系ブログであれば「ちょっと外枠を付けてみたい」という事もあると思います。
写真のプリントに関して白枠、黒枠のどっちが合うのかな?など試してみたい事も多いと思います。


そこで今回は、当ブログでの枠の付け方をご紹介したいと思います。
======================================================================
(注意)
上記の通り、外枠の付け方に関しては他にも方法があります。
今回、紹介する方法は一例だと思って頂ければと思います。

また、FC2ブログでは、テンプレートという形でブログデザインを変える事が出来ます。
テンプレートによっては、今回の方法がうまくいかない可能性があります。
その際は、個々で微調整を行って頂ければと思います。
======================================================================


1.ブログ管理画面にて、「テンプレートの設定」を選択します。
 写真に枠をつけてみる

2.下段の「スタイルシート編集」欄から編集をしていきます。
 ※編集する前に現在のテンプレートのバックアップをお忘れなく。

3.「スタイルシート」に以下の設定を追加し、更新します。
 ※追加位置がよくわからない時は、最下段に追加してください。

.PhotoFrame {
  border-top: 10px solid #000000;
  border-bottom: 10px solid #000000;
  border-right: 10px solid #000000;
  border-left: 10px solid #000000;
}

 写真に枠をつけてみる

4.画像を含むブログ記事を作成(過去記事でも可)を開きます。
 写真に枠をつけてみる

 写真に枠をつけてみる

5.この状態でプレビューをしてみましょう。
 枠はまだ表示されていないはずです。
 WakuNoTest.jpg


 では枠を表示する設定をしてみましょう。
 まず、画像を追加した際の表示用コードの「border="0"」を削除します。
 ~ /WakuNoTest.jpg" alt="WakuNoTest.jpg" border="0" width="600" heigh ~

 続けて下記の様に表示用コードの最後に「class="PhotoFrame"」を追記します。
 ~ width="600" height="400" class="PhotoFrame" />

 追記が終わったら再度、プレビューをしてみましょう。
 枠が付いているでしょうか?
WakuNoTest.jpg


ちなみに「上記3」にて追加した「スタイルシート」は順に「上、下、右、左」の枠線の設定となります。
その為、個々に色や太さなどを変更できます。
※設定については、色々ありますので「スタイルシート border」などで検索してみて下さい。

例えばこんな感じだと…。

.PhotoFrame {
  border-top: 20px solid #ff0000;
  border-bottom: 10px dashed #00ff00;
  border-right: 10px inset #0000ff;
  border-left: 10px double #ff00ff;
}

 写真に枠をつけてみる
これは…目が痛い(`;ω;´)


スタイルシートを使うと一括で外枠を変更が出来ます。
また、外枠の種類(黒枠や白枠など)を何個も設定しておいて、写真によって使い分ける事も可能です。

今回紹介したのは「外枠」でしたが、枠の有無だけでも写真の印象がガラっと変わったりします。
皆さんのブログでも色々なカスタマイズにチャレンジしてみてはいかがでしょうかヽ|・∀・|ノ


関連記事

コメントの投稿

非公開コメント

スポンサードリンク
スポンサードリンク

プロフィール

きりん

Author:きりん
 
「透明な月の下で」へようこそ。
リンク・コメントはフリーです。

当blog上の掲載物の無断転載・複写・複製
及び商用利用は固くお断りします。

カメラ
-Sony α550

カテゴリ
お問い合わせ

お名前:
メールアドレス:
件名:
本文:

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