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

画像の拡大表示(その4)

画像の拡大表示(その3)の続きです。
本投稿はエキサイトブログが対象です
説明の前提条件
① パソコンのディスプレイは横1366ドット×縦768ドット(横縦比 16:9)
② 新管理画面を使用し、HTML編集で投稿

前回、目的に合ったサイズの画像をアップロードしました。
今回はエキサイトブログの「新管理画面のHTML編集」で画像入りの記事を書いてみましょう。

【予備知識】
【HTMLとは】
HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略称です。ウェブ上の文書を記述するための言語です。
文章の中に記述することで、さまざまな機能を記述設定することができます。
「テキストを超える」という意味から"hyper-"(~を超えた) "text"(文書)と名付けられました。

【覚えておきたい記号】
記事を入力していくと、いろいろな記号が出て来ますが、取り敢えず次の記号だけ頭に入れてください。

<br>:改行A
文章の改行で使います。

<br clear=all>:改行B
サンプル②、③のように画像を左寄せや右寄せで配置したとき、文字がその横に表示されます。これを文字の回り込みと言いますが、その回り込みを途中で解除するときに使います。

#IMAGE|d0181824_17021426.jpg|201611/04/24/|mid|1366|595#:画像
画像を挿入するとき使います。使う画像と配置とサイズを指定します。
  mid:中央配置
  left:左寄せ配置
  right:右寄せ配置
  1366|595:画像サイズ(単位はピクセル)(横1366ピクセルX縦595ピクセル)
【注意】
記号をタグと呼びます。タグは半角文字を使いますが、上の記述では一部全角文字に替えていますので、コピーして使わないでください。

【画像挿入手順】
実際に画像を挿入してみましょう。
「記事を書く」を開き、[HTML編集]タブを開きます。
文字を入力していきます。1枚目の画像を入れるところにカーソルを立てます。
アップロード画像欄の画像(ミルク姫)をクリックします。
画像の拡大表示(その4)_d0181824_14532329.jpg

画像タグが挿入されました。
画像の拡大表示(その4)_d0181824_14533031.jpg

続いて文字を入力していき、画像挿入位置にカーソルを合わせ次の画像(バスケットボール?)をクリックします。
画像の拡大表示(その4)_d0181824_14550846.jpg

画像タグが挿入されました。
画像の拡大表示(その4)_d0181824_14554737.jpg

以下同様に入力していきます。
左寄せ、右寄せ画像の左右に文章を入れるとき画像タグの後ろに続けて入力します。
画像を横に複数枚並べて配置する場合は画像タグは続けて挿入します。
画像の拡大表示(その4)_d0181824_15004873.jpg

下の画像は入力欄です。
挿入された画像の配置は全て「mid」(中央配置)でサイズはアップロードしたサイズになっています。
画像の拡大表示(その4)_d0181824_15563805.jpg

次に画像サイズと画像配置を書き直します。
なお、画像サイズが既定より大きい場合は、自動的に既定のサイズで表示されるように作られています。
【サンプル①の画像】
私のブログほ既定は横520ピクセルです。サイズを小さくしないときは修正の必要はありません。
【サンプル②の画像】
左寄せに配置しますから、「mid」を「left」に書き換えます。
サイズを小さくしないときは修正の必要はありません。(このサイズでアップロードしています)
文字の回り込みを解除するので、説明文の後ろに改行B<br clear=all>を挿入します。
【サンプル③の画像】
右寄せに配置しますから、「mid」を「right」に書き換えます。
画像サイズはサンプル②に合わせて横260ピクセルに書き替えます。縦は比率で算出した値「182」に書く替えます。
文字の回り込みを解除するので、説明文の後ろに<br clear=all>を挿入します。
【サンプル④の画像】
この画像タグも修正する必要ありません。
【サンプル⑤の画像】
横並べの3枚の画像はすべて「mid」を「left」に書き替えます。
さらに横に並ぶようにサイズを書き替えます。サイズの決め方は次回説明します。
文字の回り込みを解除するので、タグの後ろに改行B<br clear=all>を挿入します。
画像の拡大表示(その4)_d0181824_15570844.jpg

プレビュー画面はこんな具合です。以降は文字を大きくしたり色を付けたり・・ご自分の好みで進めてください。
画像の拡大表示(その4)_d0181824_16414688.jpg

次回は最終回です。ちょっとしたテクニックを含めて説明します。
画像の拡大表示(その5・最終回)へ続きます。

by PC-otasukeman | 2016-11-06 09:14 | Comments(4)

Commented by banban0501 at 2016-11-06 10:05
HTLM編集で出てくる パソコン言語?の意味が
イマイチ よくわかっていなかったので
ちょっと理解できました

今回の記事のような編集をしたかったので
とても参考になりました

ありがとう~
Commented by PC-otasukeman at 2016-11-07 09:53
★ banban0501 さん
難しいパソコン用語の説明にいつも苦心しています。
理解して頂き嬉しいです。
コメントありがとうございました。
Commented by shizuo7f at 2016-11-07 13:39
PC-otasukemanさん、こんにちは~!
改めて本稿シリーズを熟読し、学習したいと思います。
そう、時間をかけて^^。
わたしの写真編集は変わり映えしてません…。
焦るわたしがいます、もっともっとブラッシュアップしなければ^^;。
基本的にはWindows 10の「Microsoft フォト」を使用、
またサイズ変更にはCorel paintshopを。
サイズ決めは少しだけ拘りが。
トップ写真は話の核心部なので、関心を持って頂ける様記事の中で一番大きく(97KB、450*636)、そして出来るだけ縦横サイズを変えて並べたりしています。
時にはコラージュ化など編集ソフトを使い遊んでいます。
Commented by PC-otasukeman at 2016-11-14 09:56
★ shizuo7f さん
トリミング、サイズ変更、そしてブログの基本技を身に付けるとブログ作りも楽しくなりますね。
日々発見した新技をご紹介し、上のようなコメント頂けると本当に励みになります。ありがとうございました。
名前
URL
削除用パスワード

<< 画像の拡大表示(その5・最終回)    画像の拡大表示(その3) >>