今回は画像の掲載とリンクについてです。


・画像の掲載



　上記の画像掲載は、下記のように記述しています。

<img src="https://12675.mitemin.net/userpageimage/viewimage/icode/i288862/" alt="記念品" />

　このように以下の書式で画像を掲載できます。

<img src="画像のURL" alt="代替文字列" />

　「代替文字列」は画像が表示できない環境で代わりの説明書きを出すときに使われます。したがって代替文字列を省いても画像には影響しません。

　なお「みてみん」の場合、「▽この画像のURL(リンクについて)▽」という場所に表示されるものは画像自体のURLではありません。
　ただし「▽この画像のURL(リンクについて)▽」で表示されたURLを少し変えるだけで、画像自体のURLになります。

・上記画像の「▽この画像のURL(リンクについて)▽」のURL

https://12675.mitemin.net/i288862/

・以下のように「userpageimage/viewimage/icode/」を挿入すると、画像自体のURLになる。

https://12675.mitemin.net/userpageimage/viewimage/icode/i288862/


・バナーとリンク

　紹介したい作品などにバナーがあり、それを使いたい場合を想定しています。

　なお、以下のリンクは実際には「小説家になろう」のトップページに移動します（例ですので具体的な作品の紹介は避けました）。また、画像は見ての通り「小説家になろう」の公式バナーです。

「小説家になろう」はコチラ↓


　上記は、下記のように記述しています。

<a href="https://syosetu.com/"><img src="https://static.syosetu.com/view/images/banner_narou_a.gif?mpc5l8" height="40" alt="小説家になろう" /></a>

　「<a href="リンク">表示内容</a>」は、前回までにご紹介したものと同じです。
　その「表示内容」に画像を示すタグ「<img src="画像リンク" alt="代替文字列" />」を記述します。
　画像自体は「みてみん」などに掲載したものを指定します。

　このようにすれば、バナーを活動報告やランキングタグに組み込むことが出来ます。

　なお掲載する画像は、ある程度小さいものにするか、画質を落とすなどでデータサイズを小さくしたほうが良いです。


・画像とサイズ

　画像はサイズの変更が可能です。
　ただしスマホなどではサイズの指定未指定に関わらず画面に収まるように自動的にサイズ調整される場合があり、必ずしも指定の通りにはなりません。






　上記の画像表示は、それぞれ下記のように記述しています（リンクは省いています）。

<img src="画像のURL" alt="小説家になろう" />
<img src="画像のURL" height="60" alt="小説家になろう" />
<img src="画像のURL" width="150" height="40" alt="小説家になろう" />

　元々この画像は幅200ピクセル・高さ40ピクセルです。

　一番上の例は、表示上のサイズ指定をしていないものです。
　二番目は、高さのみを指定しています。指定値が元の1.5倍なので、見た目上もそのようになります。ただし、この場合も端末側で再調整される場合があります。なお幅と高さのどちらかのみ指定した場合、もう片方も同倍率で拡大縮小されます。ですから、通常は片方のみ指定するほうが楽です。
　最後は、幅のみ75%になるように指定しました。高さは元と同じものを明示しています。このような場合、縦横比が変わるので要注意です。

　ところで、上記のサイズ変更は、あくまで見かけ上のものです。ですから、データサイズは変わっていません。そのため、巨大な画像の見た目を小さくしても、パソコンやスマホに転送されるデータ量は変わりません。
　そのため、画像をネット上に掲載する前に加工して、適切なデータサイズにしたほうが、お読みになる方は負担に感じません。つまり、画像が重くてブラウザバック、といったことを回避できます。


・検索機能と活動報告の活用
活動報告での事例紹介


・活動報告で使えるHTMLタグについて

☆１回目☆　リンクや色、サイズについて。
☆２回目☆　色と太字について。
☆３回目☆　色について補足（カラーコード）。
☆４回目☆　画像の掲載。《本稿》
☆５回目☆　背景色の変更。
☆６回目☆　下線、訂正線、上付き文字、下付き文字、「<」「>」の記述。


・活動報告のテキスト配置について

☆１回目☆　中央寄せ。
☆２回目☆　枠の形式。