雪ん子’s report

スマホ1つでブログは書けるか⁉ スマホの使い方(初級編)と日々のことをお伝えします。

嫌いだけど、おかげでHTMLを勉強できた話。



今日、買い物に行くとき。

駐車場の壁に、黒っぽい?茶色っぽい?ものが2つくっついていたので、見に行ってみました。


目次

毛虫((((;゜Д゜)))


めっちゃモフモフ(゜ロ゜;ノ)ノ

冬のコートのファーみたい!


マンション前の歩道と道路の境には、植栽があって、木もあるので、虫がいることはわかっていましたが、歩道を越えて毛虫がやって来たのは初めてでした。


虫、大嫌いなんです!

でも、動きが遅いヤツに関しては、見るだけならなんとか大丈夫です。

あ!
蟻とミミズは大丈夫です。
とはいっても、アマゾンとかに出そうな巨大なヤツはさすがに無理そうですが......


で、話を戻して。
この毛虫が何になるのかがちょっと気になったので、写真を撮ってみました。

誰か何になるか知ってる人いるかなー?

虫が大丈夫な方のみタップして下さいね。

で、勉強になったこと。

上で使った、画像をタップして画像を出すって方法です。


毛虫の写真をドドーンと載せるのは、後で自分で見返すのもイヤだったので、
「何かいい方法ないかなぁー」
と調べまくりました。

で見つけたのがこの方法。

以前、CSSにも感動しましたが、HTMLもすごいですねー

リンクを貼る方法

こちらはご存知の方が多いですよね。

<a href="URL">文字</a>

と記入すると、目的のサイトへのリンクを文字で表すことができます。

【 例 】

URLに「http://www.snow0303.com」 文字に「雪ん子’s report」

雪ん子’s report


URLに「http://www.snow0303.com」 文字にも「http://www.snow0303.com

http://www.snow0303.com

これを応用して文字の部分も画像に。

<a href="クリックすると見える画像のURL" target="_blank"><img src="最初から見せる画像のURL"></a>

としてやればいいとのこと。

画像のURLの調べ方はこちら
画像のURL(アドレス)の調べ方

【 例 】

今回の虫の画像は

<a href="https://cdn-ak2.f.st-hatena.com/images/fotolife/○○○○.jpg" target="_blank"><img src="https://cdn-ak2.f.st-hatena.com/images/fotolife/○○○○.jpg" width="200" height="300"></a>

としています。

気を付けたいのは、クリックしたあとに表示される画像のURLを先頭側に入れること。

私、下書きの段階で間違えて、プレビュー見てビビりました(笑)


最後の
width="200" height="300"
は画像の幅(width)と高さ(height)を指定する場合にだけ加えれば大丈夫です。
もちろん、数字部分はお好みで変更可能です。

追記

最初の画像の後の「target="_blank"」はクリックした際に出る画像を、新規のウィンドウで表示する為のHTMLです。

追記ここまで。


以上、毛虫のおかげで勉強になったお話でした。


ちなみに、今日もまだ壁登ってました。
いつまで居るんだろうか……