TOP ブログの基本 アフィリエイト アクセスアップ カスタマイズ ブログ・HTML ブログ・CSS




ハイサイ(ようこそ)利爺のブログへ


●ブログの基本、アフィリエイト、HTML・CSSまで
初めての方にも分かり易いように下記のシリーズで纏めています。

・・・・・・・・・・・・・・・・ 各章の項目(目次) ・・・・・・・・・・・・・・・
= 現在、シリーズ記事を書いているブロックです。

エントリー順に確認できるように【目次】を作ってありますので
上段のコンテンツバー(menu)または上記の項目から各ブロックに入れます。


●本文中に表示しているアイコンは
= 参照記事  = 頁中の章  = 注釈  = 記事ブロック
を表します。

2009年12月26日

画像と文章の組み合わせ

■ 5-12 画像と文章を組み合わせる


●ブログやホームページに画像を使用する目的は
文字だけの文章で仕上げた構成では平滑になりやすく、さらに訪問した方の視点が活字に絞られることで、ブログに対する興味が半減してしまう結果になります。

また文章だけでブログの内容を表現するには限界があります。

●訪問した方は「書かれた文章を読む」ことが中心ですが、それだけではなく「書かれたものを補足する画像」を見て理解を深めます。

●文章で明確に情報を伝え、その内容を画像で補足する。(その逆もあります)

●この双方の利点を生かした構成をすることで、
「伝えたいことを伝える」ことが出来るブログに仕上げることができます。

●文章と画像とをうまく利用する…。
訪問した方の興味を促し継続をさせ、ブログの信頼性を高めることが目的です。


■文章・画像のうまい使い方


文章と画像を組み合わせるにはいくつかの方法が有りますが、
前回で確認した「画像の組み合わせ」の応用になります。



【例1】■ 画像を左揃えに構成
tosiji.jpg

三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。

左端に画像を表示して、その画像の下段から文章を始める。

ブログで多く見られる表示の方法のひとつで、
右に文章を表示するだけのスペースがないか、デザイン的にスペースを生かしたいときのレイアウトです。

使用している画像の横サイズが、記事表示枠の横幅をいっぱいに使用している時は
どうしてもこの表示方法になりますね。

HTMLは

<img src="http://…表示する画像のurl… />

の形で
画像のurlのみの記入ですから、あまりタグ類を気にすることなく使用できますね。

この表示方法は、画像横の余白部分が大きすぎると、
レイアウト的にはアンバランスになることがありますので、表示する画像のサイズや余白部分のとり方を考えて使用しましょう。

 
【例2】■ 画像は左揃え・文章は画像の右(1)
tosiji.jpg三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。

画像の右に文章を回り込まして表示する方法。
ブログで多く見かけるレイアウトの一つですね。

例では、画像とその横に配置している文章の行頭が接触して表示されていますね。

画像の版面(はんずら)と文字面(もじずら)の間に余白がなく
くっついて表示されることは、画像の利点を消してしまい、文章も読み難くなります。

間に余白がないため
ゆとりや気遣いの感じられないレイアウトになりますので、避けたい画像と文章の表示です。

印刷やデザイン関係では、やってはいけない表示方法の一つですが
webでは堂々とまかり通っているレイアウトです。

使用タグ形式は
<img src="http://…表示する画像のurl… align="left"/>

属性と属性値 = align="left"

を使っていますが「align」の特性上どうしても面(つら)が接触してしまいますね。


【例3】■ 画像は左揃え・文章は画像の右(2)
tosiji.jpg三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。

「例2」の属性を変えた文章の回りこみ表示で、画像の右に若干の余白を取り、文章を表記しています。

画像と文章にお互いの干渉が少なく、それぞれの特性が生かされます。

余白の大きさは、
本文で使用している文字の一文字分が適宜なサイズになります。

「見せるための画像」と「読ますための文章」の配置といえます。

タグの形式は
<img src="http://…表示する画像のurl… align="left" style="margin-right:●px" />

属性と属性値 = align="left"
属性と属性値 = style="margin-right:●px"
解除タグ   = <br clear="all">

「揃え」と「余白」を指定する属性を同時に使用しています。

文章の回りこみには、このタグの使用を勧めますので、
タグの形式を覚えてください。


【例4】■ 画像は右・文章は左(余白有り)
tosiji.jpg三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。

「例3」の文章の右回り込みの逆、左回りこみですね。

画像を右に表示して文章は左に表示しています。
このレイアウトもブログではよく見かける表示方法です。

デザイン的な効果は「例3」と同じくらいありますが、
画像が右に寄っていますので

ブログ構成が2カラムでサイドが左配置の時には
バランスの取れたレイアウトになるでしょう。

逆に右配置のときは右側が重く見え、
バランスをよく考える必要があります。

このことは、左配置にも言えますが、
訪問した方の目の動き(流れ)からは、画像の右よりは
左配置の方が、まだいいレイアウトになります。

タグの形式は
<img src="http://…表示する画像のurl… style="margin-left:●px" />

属性と属性値 = align="right"
属性と属性値 = style="margin-left:●px"
解除タグ   = <br clear="all">

「align="right」だけの使用だけでも表示は可能ですが、
画像と文章が接触し、行末がうまく揃わない形で表示
されますので、

例のように、画像の左側には決まったサイズの余白を
入れるように設定したほうが見栄えの良いレイアウト
になります。
 

【例5】■ 文章毎に画像は左右交互に。
tosiji.jpg三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。

tosiji.jpg漢(後漢)帝国の末裔「劉備玄徳」と、血を分けた兄弟にも類する「諸葛亮孔明」「関羽雲長」「張飛翼徳」らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。

アフィリエイトのページでは
1ページに商品を2、3点紹介することが有りますね。

何枚かの画像を使用するページを作るときに、全ての画像を
左あるいは右にそろえて表示すると、動きの感じられない構成に
なることが多いです。

ページのレイアウトではバランスを取ることも重要で、
「左に傾きすぎず右に重過ぎず」のバランス表現が必要です。

左右のバランスを取ったレイアウトは比較的に安定感がみられ
グラフィックデザインの世界では、交互に画像を配置する手法も
よく使われます。

機会があれば、この表示法を試してみてください。
バランスとは何かを理解できると思います。

タグの形式は「例3」と「例4」の組み合わせです。

「左画像」
属性と属性値 = align="left"
属性と属性値 = style="margin-right:●px"
解除タグ   = <br clear="all">

「右画像」
属性と属性値 = align="right"
属性と属性値 = style="margin-left:●px"
解除タグ   = <br clear="all">


【例6】■ 画像は左・文章は右・行頭揃え。

tosiji.jpg





三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。

画像の使用範囲を過ぎても、文章は画像の下段に戻らずに
指定された行頭のライン内に表示される方法です。

あまり見られないレイアウトですが、
余白を生かすレイアウトのひとつの手法です。

使用しているタグは、
今まで紹介したタグの形式とは全く異なります。

「table」機能や「float」機能を使いますので、
HTMLの「table」や「float」のときに詳しく確認します。



比較的に簡単に使える
画像と文章を上手く組み合わせる方法を確認しました。

ほかのブログに訪問したとき、
「例1から6」ようなタグを使ったレイアウトに出会います。

「このブログの画像の配置は…を使っているのだ」

と意識しつつ読み進めてみて下さい。
必ず自分でも使えるようになります。

注)
写真などの画像をネットから取得して使うことは
著作権の問題にふれる恐れがありますので注意しましょう。


実際に利爺の身近なところでも著作権や肖像権の問題で
閉じてしまったサイトもあります。



▲HTMLの関連記事
   holder01.gif ブログで使うHTML-目次ー
    http://tosiji-dreamafi.seesaa.net/article/133635358.html
    【別窓での表示です】

★ご協力お願いいたします★   
      kame.jpg
    banner_01.gif
……人気ブログランキング……



この記事へのコメント
利爺さん
こんにちは、あずきです。

ご無沙汰しています^^

読ませていただきながら
2、3年前ころHTMLタグと戦っていたな〜なんて思い出します。

少しずつ分かってくると
おもしろいですよね。
思い通りにならないと
PCにインネンつけてましたけど^^;

応援ポチ<★です。
Posted by あずき at 2009年12月26日 12:14
利爺さん
こんにちは。
いつも有益な記事ありがたいです。
参考書代わりに読ませてもらっています。
お気に入りに入れました。
応援☆
Posted by hebaseijin at 2009年12月26日 12:34
今晩は。文三です!

先日はコメントをいただき
ありがとうございました^^

あまり顔を出せなくて
すみません。

今日の記事。
これはとても
勉強になりました。

画像と文章の組み合わせ、
表示方法は
内容をより鮮明に
読者の側に届けるために
なくてはならないノウハウだと思います。

貴重な記事を
ありがとうございます!

気合いをこめて本気の応援!
Posted by やるんです!幸福を呼ぶ☆本気のブログ・アフィリエイト by文三 at 2009年12月27日 02:35
ハイサイ、利爺さん

ありすです。
いつも応援を本当にありがとうございます。

画像と文字の組み合わせで、受ける印象が全然違いますね!
自分のイメージ通りにしたければ、利爺さんのサイトで勉強ですね。

応援済み☆
Posted by 超初心者ありすの稼ぐアフィリエイト戦略 at 2009年12月28日 04:55
利爺さん

あけましておめでとうございます。

今年も利爺さんにとって、

良き年でありますように♪
Posted by 小雪 at 2010年01月01日 04:03
利さん、倭人です^^
明けましておめでとうございます。

昨年はいろいろお世話になり、
ありがとうございました。

本年もよろしくお願いいたします。

回り込みタグ、
一つしか知らなかったので、
メモ帳にコピー取らせていただきました^^

では、良いお正月をお過ごしください。

今年の初応援!
Posted by 倭人 中高年ブログで稼ぐアフィリ大百科 at 2010年01月01日 21:43
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

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

この広告は1年以上新しい記事の投稿がないブログに表示されております。