やんちゃ爺とからくり村

サムネイルを使ったクリッカブル画像の本来の目的は、Ｗｅｂページの開きを軽快にするためです(^^)
サイズの大きい画像のデーターは、とても重たいので “大きい画像が多いページ” は開くのに時間が掛かります・・
：そこで最初は小さいサムネール画像で軽快に表示させておいて、クリックされてからオリジナルサイズの画像を呼び出す方が、見てくれる人も気持がいいし.. ブログシステムへの負担も下がるためです。。

しかし、光ファイバー網の発展で、インターネットへの接続環境が早くなった昨今は、軽快さは解消しているので、もっぱらウエブページのデザインの手法としての使途が多くなっています。
：特にブログの場合はページデザインの中で “大きな画像をずらずら並べる” と、見る人がうんざりして、嫌われるケースが多いのですが、
一枚一枚の画像を小さくして、多くの画像を一度に見せる！ 方が軽快でセンスも良く..親しみやすいページに仕上げ易く、上級者の間で多用されています!(^^)!

しかしｅしずおかブログ標準（デフォルト）の「サムネイルサイズ：巾100ピクセル」は、いささか小さすぎませんか？ お使いのテンプレートにも依りますが.. 爺は何時も少し大きくしちゃっていますが・・

：サムネイルの画像ファイルは、皆さんが“画像挿入”でサムネイルを選択したとき“自動的に作成さ＆保存れます”
(画像一覧リストには表示されません）
既に投稿（アップロード）したオリジナル画像ファイルから“横幅200ピクセルに縮小された１枚が生成され以下の“にょろにょろ”の内容にそって“表示サイズや表示位置、文字列との配列など”を設定する仕組みです。
そこで、いきなり呪文のお話ですが？ “画像とにょろにょろの関係”　から・・　このサンプル画像をタネに“サイズを変えて”.. 遊んでみましょうね！
：話を簡単にするため、最もシンプルなレイアウトの（左揃え、文字の回り込み無し）サムネイルの例で説明します、まず標準のまま表示してみます。

以下は.. ややっこしい部分もあり.. 少々頭が痛むお話ですが、この辺りのからくりからご案内いたします。 しばしのご容赦を(^^ゞ

サムネールをボタンに使った：クリッカブル画像を表示する為の呪文？ 例の“にょろにょろ”（HTMLタグ）の記述は..
＜a href="//img01.eshizuoka.jp/usr/kagishin/x9eos5d_3460.jpg" target="_blank"＞
＜img src="//img01.eshizuoka.jp/usr/kagishin/x9eos5d_3460-s.jpg" align="left" width="100" alt="" ＞＜/a＞

：先に結論から.. とりあえず“にょろにょろの意味”は..放っておいて・・ 上のwidth="100"の.."100"を200未満で任意の値に編変更すれば良いのです！ 簡単でしょ!(^^)!

：でも“にょろみょろ”って良～く見ると..こんな文字列＆意味合いになっています・・
：“HTMLタグ”の文字列の意味を..翻訳して？ 併記してみましたので追読してみて下さいませ、頭が少々こんがらかるかな？
（タグの命令語を文字列で表示させる為、本来は半角 <>（不等号）を全角＜＞にして命令.. を実行しない様にしてあります）

（ａ）は：↓↓画像を呼びだして表示！：↓↓（ｂ）は画像の保存場所とファイル名 （ｃ）は新しい：↓↓ウインドウを開いて画像を表示せよ！
＜a href="//img01.eshizuoka.jp/usr/kagishin/x9eos5d_3460.jpg" target="_blank"＞

（ｄ）は：↓↓このサムネイル画像を表示せよ！（ｅ）は：↓↓サムネイル画像の場所とファイル名　（ｆ）は：↓↓サムネイルのサイズ（横幅）
＜img src="//img01.eshizuoka.jp/usr/kagishin/x9eos5d_3460-s.jpg" width="100" alt="" ＞＜/a>

ここで..皆さんの画像ファイル名は%E3%81%A1%E3 -中略- %E3%81%BC_4998.jpg な～んて訳のわからない記号になっていると思いますが、ここでは無視して下さい.. 理由は「画像ファイル名に全角（日本語）を使っている」場合ですが、この弊害については別の機会に・・

そこはそれ.. 感の良いみなさんの事・・ な～んだそうだったのか～ サイズを大きくするにはどうすればよいのか？.. もうお気付きですね(^O^)
そうです..width="100"の.."100"を200未満で任意の値に編集すればいいのですよね！（英文字「width」は「ワイズ」と読み「幅」の事です）
なぜ200未満なのか？　お分かりですね、生成しているサムネイルの実ファイルサイズが巾200ピクセルなので、無理やり広げると、画素の荒い画像になってしまうからです。
※なお大きいので..サムネイルと云えるか？ “200ピクセル以上”の画像サイズで..かつ画像が荒れない方法は、改めてご案内します・・

先ず標準width="100"と100ピクセルwidth="120"と120ピクセル　同様にwidth="150"と"200"と150と200ピクセルの例です。











こちらは“文字の回り込み”を設定したサムネイルの例ですが、サイズの編集ポイントは.. width="100" 上の例と同じですよ～ (^^♪

標準サイズ：横幅100ピクセルです～

少し大きく ：横幅120ピクセルです～

やや大きく ：横幅150ピクセルです～

フルサイズ ：横幅200ピクセルです～

この画像の“にょろにょろ”（HTMLタグ）の記述は
＜a href="//img01.eshizuoka.jp/usr/kagishin/x9eos5d_3590.jpg"
target="_blank"＞＜img src="//img01.eshizuoka.jp/usr/kagishin/x9eos5d_3590-s.jpg"
align="right" width="200" alt="" ＞＜/a＞フルサイズ：横幅200ピクセルです～
＜br clear="right"＞

サイズを決める “width="xxx"” は同じですね、この場合も、ここを“200ピクセル以下”で任意に指定すればよいのです(@^^)/~~~
※参考までに ：align="right" は回り込みを命令する命令語： ＜br clear="right"＞ は回り込み命令！ を解除する命令語です。

※なお：編集操作そのものは、前編の 　“画像彼是４）：記事の編集も通過点に？” を熟読の上.. .. にょろにょろの他の文字列などを間違って壊してしまわない様に・・
「実際の表示をプレビュー」で頻繁に参照して、結果を確かめるまで、不用意に“上書き保存をしない”様に・・ くれぐれも慎重に行ってください・・ （上書き前なら、うまくいかない編集を破棄して「記事一覧」で元へ戻れますから）