人気ブログランキング | 話題のタグを見る

画像の拡大表示(その5)画像の配置とサイズ

ページへページへページへ

前回まではHTMLを知らなくても出来たことです。
ここからは「HTML編集」で画像のサイズや配置を変えて楽しいブログ創りをしてみたい思います。
「HTML編集」の経験がない方も是非挑戦してください。

【HTML編集とは】
HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略称です。ウェブ上の文書を記述するための言語です。
文章の中に記述することで、さまざまな機能を記述設定することができます。
「テキストを超える」という意味から"hyper-"(~を超えた) "text"(文書)と名付けられました。
HTML編集はこの言語を使って記事を書くということです。
HTML編集で記事を入力していくと、いろいろな文字列が挿入されますが、この文字列をタグと呼んでいます。
タグを追加したり、タグの中身を直接書き替えることができます。
今回のテーマでは「画像タグ」「改行タグ①」「改行タグ②」だけに注目しますので頭に入れてください。

【画像タグ】
下の文字列はクリックして挿入された花火の画像タグです。

[#IMAGE|d0181824_16233500.jpg|201701/07/24/|mid|900|600#]

青字の部分:アップロードしたJPEG画像の番号
緑字の部分:アップロードした日付
mid:画像の配置(中央配置)
(mid:中央配置、left:左寄せ配置、right:右寄せ配置)
900:画像の横サイズ(900ピクセル)
600:画像の縦サイズ(600ピクセル)
実際の画像は下の様に見えます。
画像の横サイズが既定値(520ピクセル)に縮小されています。
画像をクリックすると横900ピクセル×縦600ピクセルの拡大画像が表示されます。
画像の拡大表示(その5)画像の配置とサイズ_d0181824_16233500.jpg

画像タグの赤字の部分を書き替えることによって配置とサイズを自由に変えることが出来ます。

【書き替え例1】
横180ピクセル×縦120ピクセルに書き替えてみましょう。

[#IMAGE|d0181824_16233500.jpg|201701/07/24/|mid|180|120#]

実際の画像は下の様に見えます。
クリックして拡大画像も確認してください。
画像の拡大表示(その5)画像の配置とサイズ_d0181824_16233500.jpg

【書き替え例2】
更に左寄せ配置に書き替えてみましょう。
左寄せ配置、右寄せ配置にしたときは行の最後に改行タグ②(後述)を挿入する必要があります。
[#IMAGE|・・・・.jpg|201701/07/24/|left|180|120#]<br clear=all>

実際の画像は下の様に見えます。
クリックして拡大画像も確認してください。
画像の拡大表示(その5)画像の配置とサイズ_d0181824_16233500.jpg

【重要⑥!】
サイズを書き替えるとき横縦比が同じくなるようにしなければなりません。
元の画像が横900ピクセルX縦600ピクセルの場合
横180ピクセルのサイズにするには、縦は次の計算で求めます。学校で習った比例計算ですね。
新縦=元縦600÷元横900X新横180

【重要⑦!】
左寄せ配置、右寄せ配置にしたときは行の最後に必ず改行タグ②(後述)を挿入します。

【画像を小さくして横に並べる方法】
4枚の画像を連続して入力します。
[#IMAGE|d0181824_16232323.jpg|201701/07/24/|mid|900|600#]
[#IMAGE|d0181824_16231133.jpg|201701/07/24/|mid|900|600#]
[#IMAGE|d0181824_16230620.jpg|201701/07/24/|mid|900|600#]
[#IMAGE|d0181824_16230620.jpg|201701/07/24/|mid|900|600#]

次に4枚の画像タグを次のように書き替えます。
全て左寄せ配置にし、サイズは4枚が横に並ぶサイズ(横100ピクセル×縦67ピクセル)にします。
[#IMAGE|d0181824_16232323.jpg|201701/07/24/|left|100|67#]
[#IMAGE|d0181824_16231133.jpg|201701/07/24/|left|100|67#]
[#IMAGE|d0181824_16230620.jpg|201701/07/24/|left|100|67#]
[#IMAGE|d0181824_16230620.jpg|201701/07/24/|left|100|67#]<br clear=all>
実際の画像は次のようになります。
クリックして拡大画像も確認してください。
画像の拡大表示(その5)画像の配置とサイズ_d0181824_16232323.jpg画像の拡大表示(その5)画像の配置とサイズ_d0181824_16231133.jpg画像の拡大表示(その5)画像の配置とサイズ_d0181824_16230620.jpg画像の拡大表示(その5)画像の配置とサイズ_d0181824_16232945.jpg

【重要⑧!】
画像が2列になった場合は横幅が大きすぎるためです。横幅を小さくしてください。
横幅一杯に配列する方法は次回ご紹介します。

【改行タグ①】
<br>
文章の改行を意味します。
通常はENTERキーで改行すると挿入されます。

【改行タグ②】
<br clear=all>
画像を左寄せや右寄せで配置したとき文字がその横に表示されます。これを文字の回り込みと言いますが、その回り込みを途中で解除するときに使います。
画像を左寄せ配置や右寄せ配置で挿入したときに最後に挿入します。
例えば下の例で「2016年8月1日撮影」の最後にこのタグを入力します。

画像の拡大表示(その5)画像の配置とサイズ_d0181824_16233500.jpg凄い迫力です。
クリックしてご覧ください。
2016年8月1日撮影

今日はここまで、
次回は画像の表示と配置の応用です。
既定値の確認方法も次回説明します。

by PC-otasukeman | 2017-01-10 17:38 | Comments(2)

Commented by tomiete3 at 2017-01-11 08:58
おはようございます。
以前やった経験があります・・写真が多い時には便利ですね。
Commented by shizuo7f at 2017-01-11 17:07
さぁ、今年も勉強したいと思います!
お助けマンさんの教室で、“原理・原則…”しっかりと^^。
ブログでは写真の効果、有効ですよね~。
このわたし案外知らないです、基本的な事。
今年の課題いっぱいだけど、
楽しみながらやっていこうと思っています。
名前
URL
削除用パスワード

<< 画像の拡大表示(その6)画像の...    画像の拡大表示(その4)画像の挿入 >>