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

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

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

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

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

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

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

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

 <準備>

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

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

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

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

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

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



 <アップロード>

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

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

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

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



 <画像の複数掲載>

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

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

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

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


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

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

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

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


     これをタグで見ると↓

<a href="https://userdisk.webry.biglobe.ne.jp/004/955/38/N000/000/001/p1.jpg" target="_blank"><img src="https://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="https://userdisk.webry.biglobe.ne.jp/004/955/38/N000/000/001/p2.jpg" target="_blank"><img src="https://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="https://userdisk.webry.biglobe.ne.jp/004/955/38/N000/000/001/p1.jpg" target="_blank"><img src="https://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="https://userdisk.webry.biglobe.ne.jp/004/955/38/N000/000/001/p2.jpg" target="_blank"><img src="https://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="https://userdisk.webry.biglobe.ne.jp/004/955/38/N000/000/001/p1.jpg" target="_blank"><img src="https://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="https://userdisk.webry.biglobe.ne.jp/004/955/38/N000/000/001/p2.jpg" target="_blank"><img src="https://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回(写真をブログに載せよう!~写真掲載のおさらい)" へのコメントを書く

お名前
メールアドレス
ホームページアドレス
コメント

※ブログオーナーが承認したコメントのみ表示されます。