アメブロで、記事に画像を書き込んでも、いまいち、こじんまりしてて迫力が出ない！
とお嘆きならば… ＨＴＭＬを いじって、変えちゃえ～！
簡単に言うと！
★ サイズ指定を消しちゃえ！
★ 画像ＵＲＬから 「_s」 を消しちゃえ！ で いけます！
でわ… でわ… ご説明！
「記事を編集」 の画面で、[画像] ボタンをクリックし… 画像フォルダから、貼り付けたい画像の
[使用] ボタンをクリックすると… 記事中に、画像が貼り付けられます。
その際に、ＨＴＭＬ画面には、次のような 文面 が自動的に生成されます。
| ＜a href="http：//ameblo.jp/user_images/XXXXX.jpg" target="_blank"＞ ＜img height="220" alt="さくら" src="http：//ameblo.jp/user_images/XXXXX_s.jpg" width="165" border="0" /＞＜/a＞ |
プログラムを見慣れていない人は… 見ただけで、目がアスタリスクに なりそうです！
この文面を、解説しますと…
| ＜a href="http：//ameblo.jp/user_images/XXXXX.jpg" target="_blank"＞ ＜img height="220" alt="さくら" src="http：//ameblo.jp/user_images/XXXXX_s.jpg" width="165" border="0" /＞＜/a＞ |
◆ 「＜a href … 」 という命令は 『 リンクを張りますよ！ 』 という指定です。
◆ リンク先の対象となる画像は、 http：//ameblo.jp/user_images/XXXXX.jpg です。
これは、あなたが、アメブロのサーバにアップした、オリジナルの画像にあたります。
| ＜a href="http：//ameblo.jp/user_images/XXXXX.jpg" target="_blank"＞ ＜img height="220" alt="さくら" src="http：//ameblo.jp/user_images/XXXXX_s.jpg" width="165" border="0" /＞＜/a＞ |
◆ target="_blank" という指定が書かれていますので… クリックされたときには、
リンク先のオリジナル画像が 『 新しいウィンドウで開きますよ！ 』 ということ。
| ＜a href="http：//ameblo.jp/user_images/XXXXX.jpg" target="_blank"＞ ＜img height="220" alt="さくら" src="http：//ameblo.jp/user_images/XXXXX_s.jpg" width="165" border="0" /＞＜/a＞ |
◆ 次に 「＜img … 」 （イメージ） という命令が指定されていますね
これは 『 画像を記事中に表示させますよ！ 』 という指定です。
◆ height="220" width="165" の指定があるので…
この画像は 高さ＝220ピクセル 横幅＝165ピクセル のサイズで表示されます。
（これは、アメブロのシステムが、自動的に制御している機能で…
めちゃ でっかい画像をアップされても、画面がくずれないように、小さく表示させる為の配慮！）
| ＜a href="http：//ameblo.jp/user_images/XXXXX.jpg" target="_blank"＞ ＜img height="220" alt="さくら" src="http：//ameblo.jp/user_images/XXXXX_s.jpg" width="165" border="0" /＞＜/a＞ |
◆ 記事に貼り付けられる画像というのは、 src= （ソース） で指定されている
http：//ameblo.jp/user_images/XXXXX_s.jpg です。
◆ ここで、注目！
この画像、名前には、「_s」 が、付加されていますね！
これは、アメブロのシステムが自動的に作った、リサイズ画像 です。
あなたがアップした オリジナル画像 を小さめに複製した画像です。
（画面をくずさないようにと… なんだが、ごていねいに、２重の配慮がされてるのかな？）
| ＜a href="http：//ameblo.jp/user_images/XXXXX.jpg" target="_blank"＞ ＜img height="220" alt="さくら" src="http：//ameblo.jp/user_images/XXXXX_s.jpg" width="165" border="0" /＞＜/a＞ |
◆ alt="XXX" という指定が書かれていますので、画像の代替文字として XXX が
指定されている という意味になります。 ( XXXに は、画像フォルダ上のファイル名が使われる ）
◆ border="0" というのは、画像の枠線を 『 どのように表示するか！ 』
を指定するオプションです。 0 は、枠線なし の意味です。
※ alt で指定された文字は、IE の場合、カーソルをあてると、その文字が ポップアップ表示
されます。 title と同じ動きをしますが、意味合いとしては異なるもの とされているようです。
（ 詳しくはこちら ⇒ alt と title の違い ）
それでは… リサイズ版の小さい画像を
オリジナルサイズ にする 修正方法です！
◆ オリジナル画像を記事に表示させたい その１
画像を小さくするための制約指定を 取っちゃいましょう！
つまり…
| ＜a href="http：//ameblo.jp/user_images/XXXXX.jpg" target="_blank"＞ ＜img height="220" alt="さくら" src="http：//ameblo.jp/user_images/XXXXX_s.jpg" width="165" border="0" /＞＜/a＞ |
ここから…
① height="220" を 取っちゃいます！
② width="165" も 取っちゃいます！
③ 画像名から _s を 取っちゃいます！
すると、こうなります↓
| ＜a href="http：//ameblo.jp/user_images/XXXXX.jpg" target="_blank"＞ ＜img alt="さくら" src="http：//ameblo.jp/user_images/XXXXX.jpg" border="0" /＞＜/a＞ |
◆ オリジナル画像を記事に表示させたい その２
クリックした時に、オリジナル画像を表示させる必要もなければ…
① ＜a href= …＞ の命令自体も 取っちゃいます！
② ＜/a＞ も忘れないで 取っちゃいます！
つまり…
| ＜a href="http：//ameblo.jp/user_images/XXXXX.jpg" target="_blank"＞ ＜img alt="さくら" src="http：//ameblo.jp/user_images/XXXXX.jpg" border="0" /＞＜/a＞ |
これを…
| ＜img alt="さくら" src="http：//ameblo.jp/user_images/XXXXX.jpg" border="0" /＞ |
こうします！
これで、スッキリ！
画像も、バッチリ！
【注意１】 まじで、でっかい画像を、表示させると、ブログ画面がくずれます！
わたくしは、横幅＝400ピクセルまでに、とどめてます。
【注意２】 自動生成されたＨＴＭＬ画面の文面を いじるのは 結構大変！
慎重に… 一旦、メモ帳とか、wordとかに、書き出してから編集するとイイかも です！
では… 最後に、画像を添えて、おさらい しときましょう！
| ＜a href="http：//ameblo.jp/user_images/XXXXX.jpg" target="_blank"＞ ＜img height="220" alt="さくら" src="http：//ameblo.jp/user_images/XXXXX_s.jpg" width="165" border="0" /＞＜/a＞ |
上の記述では、記事の画像は、リサイズされた画像。 リンク先がオリジナル画像。 ですね！
| ＜a href="http：//ameblo.jp/user_images/XXXXX.jpg" target="_blank"＞ ＜img alt="さくら" src="http：//ameblo.jp/user_images/XXXXX.jpg" border="0" /＞＜/a＞ |
上の記述では、記事の画像はオリジナル画像。 リンク先も、オリジナル画像。 になります。
| ＜img alt="さくら" src="http：//ameblo.jp/user_images/XXXXX.jpg" border="0" /＞ |
上の記述では… 記事の画像はオリジナル画像。 リンクは無し！ というシンプルさ！
以上 おつかれちゃ～ん！
