雪ん子’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です。
 
 
追記ここまで。
 
 
以上、毛虫のおかげで勉強になったお話でした。
 
 
ちなみに、今日もまだ壁登ってました。
いつまで居るんだろうか……