ウェブリブログでの画像の横並びの方法について熊本の花所/ウェブリブログ

ウェブリブログでの画像の横並びの方法について

<< 作成日時： 2008/06/10 09:52 >>

２００８年　６月１０日　　　ウェブリブログでの画像の横並びの方法について
　以前どなたかのブログで説明されていましたが、画像を横並びに表示する方法です。教えて欲しいとの要望があったため、私のしている方法を説明させて頂きます。ＨＴＭＬ言語が表示されますが、下記要領で修正して頂ければ、どなたでも簡単にできます。

前提として、各記事画面のサイドバーにカレンダー、テーマ一覧等が表示されていないことが前提となっています。表示されている方は、ウェブリブログを起動した時の画面左にある「編集」→「表示項目設定」のサイドバー表示項目設定で記事欄の表示のチェックを外して、一番下にある「設定する」ボタンを押してください。

１、まず新規作成で記事を作成するとおもいますが、画像・地図：左、中央、右の中央をクリックしておきます。
　
２、画像貼り付けを行うと、２件の場合次のような、ホームページ作成用のＨＴＭＬ言語が自動的に作成されて、表示
　されます。

ここに半角で
　　＜ｄｉｖ　ａｌｉｇｎ＝”ｃｒｎｔｅｒ”＞　～　　width="320" height="213"　～　＜／ａ＞＜／ｄｉｖ＞　（※ここに改行を入れる）
　　＜ｄｉｖ　ａｌｉｇｎ＝”ｃｒｎｔｅｒ”＞　～　　width="320" height="213"　～　＜／ａ＞＜／ｄｉｖ＞
　　というＨＴＭＬ言語が表示されたと思います。

※画像ファイルの名前は半角英数で付けられる方が良いようです。日本語等の全角で付けられたものはシステム内で
　自動で変換してくれてしまい分かりずらいです。（上記ではファイル名はiris08060113.jpg、iris08060114.jpgです。）
※１件目と２件目が別々にならずにつながってしまう場合は、１件画像を貼り付けたらＥｎｔｅｒ（改行）をしてください。それ
　の方が分かりやすいと思います。

３、ここからが横並びの方法です。
①　　上記で　　width="320" height="213"　という表示する画像の大きさが指定されていますが、ここを変更します。
　　この数値は、カメラメーカ等写された元の画像の大きさによって変化します。
　　（320は変わらないかもしれませんが、213の部分はカメラメーカによって変わります。）

　　この数値を横に２件入れるためには300以下にする必要があるようです。
　　一方上記例での213は比例式で、　213　÷　320（width="の数値）　×　300（自分が２件表示したい大きさ）　＝　200
　　を計算しておきます。

　　次に300と計算された200を利用して、上記ＨＴＭＬ言語の　width="320" height="213" の数値を、自分がしたいと大きさ
　　width="300" height="200"に変更します。（私の場合、１件を直したら後は、コピー、貼り付けで全て修正しています。）

このままでは、画像が少し小さくなっただけで元の状態で表示されます。

②次に不要な部分を削除します。
　　＜ｄｉｖ　ａｌｉｇｎ＝”ｃｒｎｔｅｒ”＞　～　　width="300" height="200"　～　＜／ａ＞＜／ｄｉｖ＞
　　＜ｄｉｖ　ａｌｉｇｎ＝”ｃｒｎｔｅｒ”＞　～　　width="300" height="200"　～　＜／ａ＞＜／ｄｉｖ＞

　　の上の＜／ｄｉｖ＞～下の　＜ｄｉｖ　ａｌｉｇｎ＝”ｃｒｎｔｅｒ”＞を「Ｄｅｌｅｔｅ」キー等を使い削除します。
　　次に全角で削除した部分に「スペース」キーで１文字分スペースを入れます。
　　＜ｄｉｖ　ａｌｉｇｎ＝”ｃｒｎｔｅｒ”＞　～　　width="300" height="200"　～　＜／ａ＞　＜ａ＞　～　　width="300" height="200"　～　＜／ａ＞＜／ｄｉｖ＞
　　と変更され。２件の命令が１件につながったと思います。

これで処理は終了です。

※作業の途中で余計な削除はしないでください。言語命令が壊れてしまい、画像が表示されなくなります。
　　余計に削除等してしまった場合は、マウスの右ボタンクリックで「元に戻す」を元に戻るまで繰り返して、再度正しく
　　修正してください。
（※※　この記事を見るだけで対応できない方は、インターネットエクスプローラを２個起動し、一番上の右から２番目の「元に戻す（縮小）」ボタンを押し、画面に縦に２つのインターネットエクスプローラを並べ、一方は編集画面（新規作成画面）、一方は当記事を表示し、両者を見比べながら処理することもできます。ここに書かれていることを理解できない方は読み飛ばしてください。※※）
こんな感じに並べて

追記
　最近、大きな画像を表示されているブログを見かけますが、これは　width="320" height="213"　の部分を逆に大きくすることにより可能です。但し、width="320"の数が600程度（実際にしたことがないので正確な数値は分かりません。）以上にするとブログ画面からはみ出してしまうことになります。　　　

参考
　参考に私のブログのトップページの表示方法をコピーしたものを掲載しておきます。画像をクリックし拡大してご覧ください。
「サイドバー表示項目設定」