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

画像の拡大表示を楽しむ(その5)

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

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

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

【画像タグ】
前回挿入した花火の画像タグで説明します。
:タグはすべて半角文字です。説明のために文字を変更しています。

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

青字の部分:アップロードしたJPEG画像を指定する文字列
緑字の部分:アップロードした日付
mid:画像の配置(中央配置)
(mid:中央配置、left:左寄せ配置、right:右寄せ配置)
900:画像の横サイズ(単位はピクセル)
600:画像の縦サイズ(単位はピクセル)

画像は次の様に表示されます。
画像(↓)は既定値(520ピクセル)に縮小されます。
画像(↓)をクリックすると横900ピクセル×縦600ピクセルの拡大画像が表示されます。
画像の拡大表示を楽しむ(その5)_d0181824_16233500.jpg

【改行タグ①】

<br>

改行を意味します。
通常はENTERキーで改行すると挿入されます。

【改行タグ②】

<br clear=all>

画像を左寄せや右寄せで配置し、改行せずに文字を入力していくと画像の横に配置されます。これを文字の回り込みと言いますが、その回り込みを途中で解除するときに使います。
画像を左寄せ配置や右寄せ配置で挿入したときに最後に挿入します。

【タグの追加、削除、書き替え】
タグは追加したり、削除したり、書き替えることが出来ます。
画像タグの赤字の部分を書き替えてみましょう。

【書き替え例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 ÷ 元横900 X 新横180

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

【書き替え例3】
画像サイズは替えずに左寄せ配置に書き替えてみましょう。
左配置にすると、画像が縮小されて右にスペースができます。
画像タグの後ろに続けて文字を入力して、最後に改行タグ②を挿入します。
【画像タグ】
[#IMAGE|d0181824_16233500.jpg|201701/07/24/|left|900|600#]凄い迫力です。
クリックしてご覧ください。
2016年8月1日撮影
<br clear=all>
実際の記事は下のように見えます。
画像の拡大表示を楽しむ(その5)_d0181824_16233500.jpg凄い迫力です。
クリックしてご覧ください。
2016年8月1日撮影


【重要⑧!】
大きな画像を左配置にすると横幅は中央配置より約100ピクセル小さくなります。
文字を入力しないときは中央配置のままにしておくと良いでしょう。

続きます。

by PC-otasukeman | 2017-02-02 12:00 | Comments(3)

Commented by orientexp at 2017-03-01 14:04
なんどもありがとうございます。
今、テストでブログをアップしました。
私は、65.3KBのサイズを使用したいと思っています。
なお、HTMLは、今すこし勉強してトライしてみます。
何度もなんどもありがとうございました。
御礼申し上げます。
これからもよろしくお願いいたします。
Commented by orientexp at 2017-03-01 14:05
今ひとつ書き忘れました。
ブログを読んでいただいた後、削除しますので、
お知らせください。
Commented by PC-otasukeman at 2017-03-01 17:10
★ orientexp さん
理解できました。
大 ( 1.0 MB )で送った画像は、横580ピクセル×縦434ピクセル(133KB)に自動的に縮小されてアップロードされています。
また小(65.3KB)で送った画像は横320ピクセル×縦240ピクセル(72KB)でアップロードされています。
新管理画面で通常編集で記事を書いているという前提で、どうしたら大で送った画像を小さく表示できるかをご指導しますので、暫くお待ちください。
テスト投稿は削除して結構です。
名前
URL
削除用パスワード

<< 画像の拡大表示を楽しむ(その4)    画像の拡大表示を楽しむ(その6... >>