ブログの使い方〜まーさのワンポイントレッスン〜

アクセスカウンタ

help RSS 第73回(写真をブログに載せよう!〜写真掲載のおさらい)

<<   作成日時 : 2008/08/14 14:42   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 73 / トラックバック 3 / コメント 7

まーさ と一緒にお勉強しましょ♪「ブログの使い方」
今回は「写真をブログに載せよう!(写真掲載のおさらい)」をお届けします。

「ブログの使い方」でも、とっても注目の高い画像掲載について
この機会に、たっぷりおさらいしましょう〜!

ブログ初心者さんも上級者さんも必見ですよ

・*:・───────────────────────────・:*・
    旅の思い出をブログに載せよう〜!(画像掲載のおさらい)
・*:・───────────────────────────・:*・

まーさ:お出かけの機会の多い夏は、ブログを書くのにぴったりね
    旅の思い出を写真に撮ったら、写真付きでブログを書いてみましょう!

 Q :ウェブリブログを始めたばかりの友達が
    写真掲載の方法を知りたいって言ってたので、ぜひ教えてください!

まーさ:OK! じゃあ、まずブログに載せる前に、写真をブログ用に準備する
    方法をご紹介しましょう〜

 <準備>

  こちらのページを参考にしてくださいね。

  第50回(画像サイズを変えてみよう)
  第50回(画像サイズを変えてみよう その2)

    そのまま載せると容量が大きすぎる写真を小さくしたり、
     写真の縦横を変える方法を紹介しています。

  第59回(写真の向きを変えてみよう)

    ここでは、写真の向きを変える方法や、不要な部分をカットする
     方法を紹介しています。

     どれもWindows付属のペイントを使ってできるので
     ぜひやってみてくださいね!



 <アップロード>

    ブログに写真を載せるときに、アップロードという作業が出てくるの。

    つまり、パソコンに保存してある写真を
    ブログで指定した場所に持ってくることなんだけど、
    これには2つの方法があります。

    アップロードの方法 
      (1)画像貼付ボタンを利用
       第20回その1(画像アップロードのコツ 「画像貼付」ボタン)
    
      (2)画像リストボタンを利用
        第20回その2(画像アップロードのコツ 「画像リスト」ボタン)

    一覧表の中から好きな画像が選んだり、複数の画像を掲載するときは
    画像リストボタンを使う方が便利かもね。
    どちらでも好きな方法でやってみてね。



 <画像の複数掲載>

    次に、写真をブログに掲載するやり方だけど、
    特にユーザーの皆様からの反響が多いのが「複数画像の掲載方法」ね。

   ●画像を中央・縦に並べて掲載 (初心者向け)
    まず[ブログ]−[新規作成]で、本文を入力するでしょ。
    で、画像を貼り付けたいところにカーソルを持ってきて
    [画像貼付]または[画像ボタン]をクリックして、画像が貼り付けてね。

    で、このとき注意したいのは
    [画像貼付]ボタンの左側にある「左寄せ」「中央」「右寄せ」のうち
    「中央」を選んでから、画像を貼り付けたい位置にカーソルを移して、
    [画像貼付]をクリックすること。

    そうすれば、画像は中央に配置されて見やすくなるわよ。
    これが一番簡単な方法ね。


   ●2つの画像を横に並べて掲載

    縦ではなく横に並べるときは、まず1枚目の写真を貼り付ける前に
    [新規作成]の[本文]のところにある「左寄せ」を選んでから、
    画面を貼り付けたい位置にカーソルをあわせて、
    そのあと[画像貼付]をクリックしてね。

    続けて2枚目を同じように貼り付けてみてね。

    写真のサイズをブログの横幅にあわせて、小さくしておくと
    すっきりきれいにおさまるわよ。
      (サイズの変更の仕方は、↑上の<準備>のところを見てね)
画像


     これをタグで見ると↓

<a href="http://userdisk.webry.biglobe.ne.jp/004/955/38/N000/000/001/p1.jpg" target="_blank"><img src="http://userdisk.webry.biglobe.ne.jp/004/955/38/N000/000/001/p1.jpg" width="208
" height="156" align="left" class="up-image" alt="画像" title="ペンギン1" /></a><a href="http://userdisk.webry.biglobe.ne.jp/004/955/38/N000/000/001/p2.jpg" target="_blank"><img src="http://userdisk.webry.biglobe.ne.jp/004/955/38/N000/000/001/p2.jpg" width="208" height="156" align="left" class="up-image" alt="画像" title="ペンギン2" /></a>


    【参考】ブログ記事の横幅
      2カラムの場合は、記事幅は500ピクセル。
      3カラムの場合は、記事幅は440ピクセル。


   ●2つの画像の横に説明文を入れる

    画像の横に文章を入れてみましょう!

    上のタグをそのまま使って、画像のすぐあとに文章を入れてみると・・・
    こんな感じになります。

画像


     これをタグで見ると↓

<a href="http://userdisk.webry.biglobe.ne.jp/004/955/38/N000/000/001/p1.jpg" target="_blank"><img src="http://userdisk.webry.biglobe.ne.jp/004/955/38/N000/000/001/p1.jpg" width="208
" height="156" align="left" class="up-image" alt="画像" title="ペンギン1" /></a> きょとんとしたペンギンが可愛いっ!<a href="http://userdisk.webry.biglobe.ne.jp/004/955/38/N000/000/001/p2.jpg" target="_blank"><img src="http://userdisk.webry.biglobe.ne.jp/004/955/38/N000/000/001/p2.jpg" width="208" height="156" align="left" class="up-image" alt="画像" title="ペンギン2" /></a> うわっ! なにか叫んでるよ



    文字が回りこんで、表示がガタガタになってしまうわね!

    これをふせぐのが、<br clear="left"> というタグよ。

    画像の最後に <br clear="left"> というタグを入れれば、
    画像を左に寄せて、右側に文章を載せる場合には
    画像表示タグの後に、<br clear="left">と書き足しておけば
    文字のまわりこみを防げるわよ。例えば、こんな感じ↓↓


画像


<a href="http://userdisk.webry.biglobe.ne.jp/004/955/38/N000/000/001/p1.jpg" target="_blank"><img src="http://userdisk.webry.biglobe.ne.jp/004/955/38/N000/000/001/p1.jpg" width="208
" height="156" align="left" class="up-image" alt="画像" title="ペンギン1" /></a>きょとんとしたペンギンが可愛いっ!<br clear="left"><a href="http://userdisk.webry.biglobe.ne.jp/004/955/38/N000/000/001/p2.jpg" target="_blank"><img src="http://userdisk.webry.biglobe.ne.jp/004/955/38/N000/000/001/p2.jpg" width="208" height="156" align="left" class="up-image" alt="画像" title="ペンギン2" /></a>うわっ! なにか叫んでるよ<br clear="left">


    同じように <br clear="all"> というタグを使えば、
    右寄せの場合でも左寄せの場合でも、文字がきれいに入るわよ。
    画像をいくつもタテに並べるときにも、使えるわ。

    こちらも参考にしてね!
    
     第34回その1(複数の画像を掲載しよう!)初心者むけ

     第34回その2(文字のまわりこみを防ぐ方法)中級者むけ
 
     第34回その3(画像の表示サイズを変更しよう!)中級者むけ
  
 Q :なるほど! 旅行先のスナップ写真をたくさん並べることも
    これならきれいにできそうです!


本「ブログの使い方」でとりあげてもらいたいテーマなどが
ありましたら、このブログにトラックバックもしくはコメントしてくださいね。
みなさまのご意見お待ちしております。

※個別のお問い合わせについては、よくある質問と答え(FAQ)をご参照ください。

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 73
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス
面白い 面白い 面白い 面白い 面白い
驚いた 驚いた 驚いた 驚いた
ガッツ(がんばれ!) ガッツ(がんばれ!) ガッツ(がんばれ!)
かわいい かわいい

トラックバック(3件)

タイトル (本文) ブログ名/日時
写真をブログに載せよう!
こんにちは、隊員Eです{%音符webry%} 8月も半ばが過ぎましたね{%流れ星webry%}さて、本日隊員Eがご紹介するブログは「ブログの使い方〜まーさのワンポイントレッスン〜」です{%ハート1webry%} ...続きを見る
公式ブログウォッチ隊
2008/08/20 19:10
Q:画像アップロードの際に、「画像を小さくする」項目が表示されません。
Q:画像アップロードの際に、 「画像を小さくする」項目が表示されません。 ...続きを見る
よくある質問と答え(FAQ)
2009/10/01 09:04
(8/12)【賞品付】コネタマは8/14まで!
【8/14まで!】コネタマでブログを書こう!デイリーポータルZお題のコネタマでブログを書いて入賞すると、もれなく入賞賞品をプレゼント! ...続きを見る
ウェブリブログ事務局
2011/08/12 15:45

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(7件)

内 容 ニックネーム/日時
なんとなくで済ませてましたが
きちんと基礎を教えていただいた気分でございます。
とても参考になりますデス。
トリコ
2008/08/17 00:53
「画像の横に文字を入れる」は分かりましたが
並列に並べた画像の下にそれぞれ的確な位置に説明文を入れる方法を知りたいです。
もう一つ 記事の中で参考文献や参考にしたHPにいってもらいたい時に「こちらへどうぞ」とか「おせんべい」とか文字をクリックすると 参考のHPへ飛べる方法を知りたいです
かみふうせん
2008/08/18 10:36
大変参考になりました。
ところで、写真画質を、縮小してもなるべくきれいに表示する方法がございましたら、教えて下さい。
いとうひでとも
2008/08/18 16:34
大変参考になりまた。ちょっとすっきり。
papa
2008/10/22 22:47
難しそうですが、挑戦してみようと思います。とても参考になりました。
285
2009/01/11 19:55
2つの画像を横に並べて掲載してきました。所が、先日来、横に並べた画像が上下にずれてしまいました。画像がずれたために上下に掲載した文章が画像と会わなくなってしまいました。どうしたら元に戻せるのでしょうか? 判る方はご教授下さい。
oyaji
2009/05/23 12:08
4月6日可愛がっていたラブラドールメスのパルがなくなりました。とても悲しいです。
akahara
2011/01/19 02:09

コメントする help

ニックネーム
本 文

第73回(写真をブログに載せよう!〜写真掲載のおさらい) ブログの使い方〜まーさのワンポイントレッスン〜/BIGLOBEウェブリブログ
[ ]