第15回(画像掲載のコツ)

まーさ と一緒にお勉強しましょ♪「ブログの使い方」
今回は写真の掲載に役立つ「画像掲載のコツ」です。
たのしい画像でブログを彩ってくださいね!

・*:・─────────────────────────・:*・
    複数の画像を掲載しよう!(初心者向け)
・*:・─────────────────────────・:*・

まーさ:今回は画像の掲載方法についてご紹介するわね。

    まずは、復習から。画像掲載の方法は、ここに
    載っているわよ。
     ⇒https://webryblog.biglobe.ne.jp/guide/gazou_1.html

    さて、画像の掲載で、どんなことがわかりにくいかしら?

 Q :1つの写真を載せるのは大丈夫だけど、
    たくさんの写真を載せることが、むずかしいわ。
    こんなふうに、うまく表示できないことがあるの。
画像画像



まーさ:OK。まず簡単な複数画像の掲載方法を紹介するわね。

まーさ:画像を貼り付けたい位置にカーソルを移して、
    [画像貼付]ボタンをクリック、あとは指示に従って
    アップロード、貼り付けを行うの。

    複数画像を載せる時のコツとしては、[画像貼付]ボタン
    の左側にある「左寄せ」「中央」「右寄せ」のうち
    「中央」を選んでから、画像を貼り付けたい位置
    カーソルを移して、[画像貼付]をクリックすること。
    
    この方法で貼り付けを繰り返せば、画像が中央に
    揃った状態で掲載されるわ。一番簡単な方法ね。
    こんなふうに表示されるわ。

画像
画像


・*:・─────────────────────────・:*・
    画像掲載のコツ(中級者向け)
・*:・─────────────────────────・:*・

 Q :画像を左や右へ移動させるのは、どうしたらいいですか?

 まーさ:その場合は、画像を貼り付ける前に
    [新規作成]の[本文]のところにある「左寄せ」か「右寄せ」、
    どちらかを選んでから、画面を貼り付けたい位置にカーソルをあわせて、
    そのあと[画像貼付]をクリックしてね。

    ただし、「左寄せ」や「右寄せ」を使った場合、他の画像や文章と
    重なったり、一部が表示されなかったりすることもあるので
    注意が必要よ。

  :何かコツはありますか?

まーさ:画像を表示するタグの後に<br clear="left">
    書き足しておけば、画像の後の文字がまわりこむのを
    防ぐことができるのよ。以下は「左寄せ」を選んだ場合の
    例ね。

画像<br clear="left">を書いていない時、文字がまわりこんでしまうの。続けて画像を掲載すると、画像もまわりこんでしまうわ。
画像


    画像表示のタグに続けて<br clear="left">を書けば、改行されて
    左寄せで表示されるので、まわりこみを回避できるの。
    <br clear="left">を書いた位置から改行されるから、
    自分の好きな位置で改行できるのよ。

    例えば、こんな風に使えるの。    
画像今日はドライブに行きました。←ここに<br clear="left">を入れる

画像天気が良かったので、お弁当を持ってハイキング!歩くのよりも、お弁当がメインかな。←ここに<br clear="left">を入れる



    写真の横に説明を入れる時などに便利でしょ。
    参考のために、タグを書いておくわね。
<a href="https://userdisk.webry.biglobe.ne.jp/004/955/38/1/blog1.jpg" target="_blank"><img src="https://userdisk.webry.biglobe.ne.jp/004/955/38/1/blog1.jpg" width="320" height="240" align="left" class="up-image" alt="画像" title="画像を等倍で表示します" /></a>今日はドライブに行きました。<br clear="left">
<a href="https://userdisk.webry.biglobe.ne.jp/004/955/38/1/blog2.jpg" target="_blank"><img src="https://userdisk.webry.biglobe.ne.jp/004/955/38/1/blog2.jpg" width="320" height="240" align="left" class="up-image" alt="画像" title="画像を等倍で表示しまキ" /></a>天気が良かったので、お弁当を持ってハイキング!歩くのよりも、お弁当がメインかな。<br clear="left">



・*:・─────────────────────────・:*・
    表示サイズを変更しよう!(中級者向け)
・*:・─────────────────────────・:*・

  :画像のサイズは変更できないんですか?

まーさ:<img>タグの、幅と高さ(width/height)を指定するか、
    画像を縮小してアップロードしなおすことで
    サイズを変えることができるわよ。

  :幅と高さを変えるって、具体的にどうすればいいですか?

まーさ:画像をアップロードした後のタグを見てみて。
<a href="https://userdisk.webry.biglobe.ne.jp/004/955/38/1/blog1.jpg" target="_blank"><img src="https://userdisk.webry.biglobe.ne.jp/004/955/38/1/blog1.jpg" width="320" height="240" align="left" class="up-image" alt="画像" title="画像を等倍で表示します" /></a>

    この中の「width="320" height="240"」が表示のサイズなの。
    (もちろん、もとの画像のサイズによって変わってくるけれど)

    これを目安にして、たとえば「width="200" height="160"」
    に変えてみたりね。縦横の比を変えないようにしないと、
    画像が縦や横に伸びてしまうわよ。

    それから、画像を表示するタグの後に<br clear="left">を
    書き足しておけば、画像の後の文字がまわりこむのを
    防ぐことができるわ。

画像画像



<a href="https://userdisk.webry.biglobe.ne.jp/004/955/38/1/blog1.jpg" target="_blank"><img src="https://userdisk.webry.biglobe.ne.jp/004/955/38/1/blog1.jpg" width="200" height="160" align="left" class="up-image" alt="画像" title="画像を等倍で表示します" /></a><a href="https://userdisk.webry.biglobe.ne.jp/004/955/38/1/blog2.jpg" target="_blank"><img src="https://userdisk.webry.biglobe.ne.jp/004/955/38/1/blog2.jpg" width="200" height="160" align="left" class="up-image" alt="画像" title="画像を等倍で表示します" /></a>
<br clear="left">


  :なるほど~、意外と簡単にできますね。

まーさ:タグの中を変更にするときは慎重にね。

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

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 26

なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい かわいい

この記事へのコメント

2006年04月22日 15:49
今回の特集、すごく助かりました。
かなり前のページで、写真をいっぱい載せてたけどうまく並ばなくてすごく見にくかったんです。
これですっきり。
2006年04月22日 22:21
とても参考になりました。
写真で4コマ作品を載せているので
四苦八苦してました。
チャレンジして見やすいページを作ります!!
2006年04月22日 23:20
今回の特集、助かりました。最近ブログに動画の投稿を見かけますが、デジカメで撮った動画も掲載できますか?。掲載出来ればその方法をご指南ください。ニコンは出来ないと言ってます。携帯からの投稿でしょうか?
2006年04月25日 22:21
画像を小さくしていますが、その画像をクリックすると、画面いっぱいに広がってしまうのを防ぐには、どうすればいいですか?あと画像を多用しているせいか、ページ(容量)が重くなってしまって、切り替わりが遅くて困っています。画像ファイルのサイズを小さくするにはどうすればいいですか?
2006年05月09日 17:01
今回のテーマとは違うのですが教えて下さい。
同じウエブリブログだと名前をクリックするとそのブログへリンクできますね☆
例えば、ヤフーブログへ書き込みをした場合は
通常は、自分の名前は記入できても「URLがどうのこうの」と表示されます。
違うブログ先で自分の名前から自分のブログへ
リンクさせるにはどんな方法をとればいいのでしょうか?RSS機能で更新は直ぐにわかるのですが、自分の名前をリンクできるようにして交流を深めたいと考えております。
是非アドバイスお願い致します!!m(_ _)m
2006年05月12日 21:35
tenpaiko 様、現在は動画の投稿はできません。
音声のみでしたら、ウェブリシールを使ってブログに載せることができますよ。
ぜひ、右側のURL欄をクリックして案内をご覧ください。
2006年05月12日 21:39
Maple&Rain 様、容量は、画像をアップロードする時に「画像容量を小さくする」にチェックをつけておけば、元画像よりも小さい画像容量でアップロードできます。

縦横の大きさの変更については、「サポートアイランド」のコーナーでご案内しております。右側のURL欄からご覧くださいね。単なるサイズ変更だけではなく、いろいろ楽しい機能もご紹介していますよ。
2006年05月12日 21:47
四十路 様、各社のブログによって異なりますが、URL記入欄がある場合にはそこにURLを記入すれば、コメント記事からリンクさせることができる場合もあります。詳しくは、ブログを提供している会社にお問い合わせください。

なお、ウェブリブログでもコメントにURL記入欄をつけることもできます。記事投稿時、「テーマ設定」の欄の少し下にある[→詳細オプション]ボタンをクリックして、「コメント・トラックバック受付設定」のところで「URL欄を表示する」にチェックをしてから[公開]ボタンを押すと、その記事のコメントのところにURL記入欄ができます。
2006年05月18日 22:10
画像の枠線を消したいときはどうしたらいいんですか?
2006年05月23日 20:44
写真の横に文字を入れたいのに分からなかったんですが、これでバッチリです。
ありがとうございます♪
2006年05月25日 17:15
ちょっと質問です。
バナーを作ったのを張ってみたいのですが、表示されません。
サイトの通りにタグを書いて、記事編集の所までは画像が表示されましたが、実際公開してみると表示されません。
対応していないのでしょうか?返答お願いします。
2006年06月16日 02:22
☆ サイドバーに自分のブログ記事内容検索をつけたいのです。
(現在はサイト内検索を表示しています。)
教えてください。
2006年06月21日 15:17
朱鳥 様、例えばバナー画像が外部サイト(BIGLOBE以外)に置いてある場合、そのサイト(他社のブログ、ホームページ等)側の制限によって、他の場所では画像が表示されない場合もあります。
2006年06月21日 15:29
jun-chan 様、サイト内検索=ブログ記事内容検索、なのですが、必ずしも全内容が反映されているわけではありません。
例えば、特にみんなに紹介したい記事があれば、リンク集のような形でサイドバーに表示させてはいかがでしょうか。
2006年07月25日 15:53
画像の横にコメントを入れるとき便利ですね。
今回Google Earthの記事に初めて使用しました。
今まではスペースを入れながら、編集を繰り返していたんですよ。
2006年09月20日 18:52
文字間、文字末尾とかにフリー素材のGIFイメージを添付することは出来ないでしょうか?
たとえば「携帯電話」と文字ではなくイメージを貼り付けたいのですが?
2006年12月22日 14:17
ハル兵衛様>
まわりこみ防止には、 のほうが応用範囲が広いかもしれません(どちらに画像を寄せている場合でも、使えます)。

おう援パパ様>
通常の画像掲載と同じように、画像をアップロードしてお使いください。
2007年03月29日 19:31
アップローダーに画像容量を小さくするの表示が消えたのですがこのままで良いのでしょうか?
2007年04月04日 19:41
御勘弁 私の見落し チョンボでした。
お騒がせしました。
2007年10月11日 13:36
ブログを始めて焼く半年になります、お陰さまで、なんとか付いて行けそうです、ただ一つだけ出来ないことがあります。
ブログのトップ タイトル見出しのところの、
つ好きを見る、の所に小さい画像を載せる方法を教えてください。
2008年01月19日 01:43
Q 画像の横にコメントを書きたいのですが、
…等倍で表示します" />○○○
と文字を書いても、画像の右下辺に表示されます。
また、高さの違う画像を複数並べると、画像の下辺が揃います。
画像の右側上部からコメントを付けたり、複数画像の上辺を揃えるにはどうしたらよいのでしょうか?(回り込みさせたいのですが…)
2008年01月19日 02:02
Q ブログ記事内に320×240で画像を表示させる際、オリジナル画像を一旦320×240に縮小すると30KB位の容量になりますが、アップロードすると容量が自動的に15KB位に減って画像が粗くなります。
鮮やかな画像を保つにはどのように対処すればよいのですか?
例えばオリジナル画像を縮小する際に、表示させたいサイズより大きな画像(600×450)にして、これをアップロードして、貼り付ける際に320×240で表示させると綺麗な画像になりますか?
2008年03月31日 19:41
画像を横並びにするにはどうしたら良いでしょうか?
解説記事内にその掲載例は出ているものの、そのやり方、タグ例などが一切触れられていませんが・・
よろしくお願い致します。

この記事へのトラックバック

  • 「第15回(画像掲載のコツ)」について

    Excerpt: 「第15回(画像掲載のコツ)」について biglobeのウェブリブログの、 ワンポイントレッスンです。 私もデジカメで写真を撮って、 のせてみますね。 Weblog: 団塊世代に送る、より良い明日を作るためのブログ racked: 2006-04-22 22:27
  • 「第15回(画像掲載のコツ)」について

    Excerpt: 「第15回(画像掲載のコツ)」について 文字の回り込みに困っていたので助かりました。 Weblog: 立川参保 racked: 2006-04-22 23:56
  • 「第15回(画像掲載のコツ)」について

    Excerpt: 「第15回(画像掲載のコツ)」について 基本的な事だけど、役に立つマメ知識でした。 Weblog: しんちえのメモ帳ブログ racked: 2006-04-24 16:01
  • 画像掲載のコツ(ブログの使い方 ~まーさのワンポイントレッスン~より)

    Excerpt: NECの公式ブログの一つ 「ブログの使い方 ~まーさのワンポイントレッスン~」に 画像(写真)を載せる時に、ちょっと便利なことが書かれていました。 Weblog: 黄昏草日記 racked: 2006-04-25 22:39
  • 作品 No.81(星ヘアピン3種)

    Excerpt: シャワー台がついているヘアピンを使って 星のヘアピンを作りました。 3種類作ってみたけれど 色やビーズの種類を変えただけで 雰囲気の違うものが出来上がりました。 簡単に作れちゃうので .. Weblog: ツェツェの部屋 racked: 2006-04-29 11:44
  • 画像リスト(画像の整理)

    Excerpt: 画像リスト(画像の整理) 記事を書くに連れて、画像の整理が必要になります、フォルダを作って、整理をしましょう。 Weblog: BENのブログ racked: 2006-05-09 16:49
  • 富(腐?)栄養化

    Excerpt: 今夜はまた栄養を付け過ぎに行きました(^_^;) でもこれ!一度やってみたかったんですよね~(笑) Weblog: Nao's Blog racked: 2006-05-16 00:08
  • 【第15回(画像掲載のコツ)】

    Excerpt: 「第15回(画像掲載のコツ)」について Weblog: まだかのブログ racked: 2006-07-10 20:50