本文テキスト
*.゜｡:+*.゜｡:+*.゜｡:+*.゜｡:+*.゜｡:+*.゜｡:+*.゜｡:+*.゜｡:+*
下書きをそのまま上げてしまったわけではありませんからね？
前回の記事で、Amebaブログが最近デザインの変更をお勧めしてくると書きました。上の部分は、お勧めされたデザインの内の一つ。写真を一枚投稿して、身近な春の到来について書くという3月らしいものですね。
スマホアプリの記事編集画面上では、灰色の空が映っているところに「写真を追加」ボタンが存在していて↓
*.゜｡:+*.゜｡:+*.゜｡:+*.゜｡:+*.゜｡:+*.゜｡:+*.゜｡:+*.゜｡:+*
このボタンをタップすると、以下のように簡単に写真を差し替えることができます↓
*.゜｡:+*.゜｡:+*.゜｡:+*.゜｡:+*.゜｡:+*.゜｡:+*.゜｡:+*.゜｡:+*
でもこの方法、PCからだとできないんですよ。「写真を追加」ボタンが表示されないので。
ではPCから写真を乗っけたいときはどうすればいいんでしょうか。そこで確認すべきなのがこのページのHTML。これはウェブページの設計書ともいえるもので、「HTML表示」タブから見ることができます。
当該デザインのHTMLはこんな感じ↓
いや～いきなりこんなよく分からないもの見せられてもって感じだと思います。実は僕もHTMLについてほとんど知らないので、この機会に基礎から調べてみました。
HTMLは、＜＞でくくられたものを「タグ」と呼び、このタグと記事の本文を組み合わせてウェブページの見え方を決めているみたいです。
<p>とか、<div style="text-align:center>とかがタグですね。
で、上の画像でタグ内の青色で表示されている文字が「属性」、""でくくられた赤色の文字が「属性値」と呼ばれています。<div style="text-align:center">というタグを例にとると、styleが属性、text-align:centerが属性値というわけです。
これ以上の細かい話はここでは割愛。そもそも僕自身がよく分かっていませんし……。まぁたぶんちょっと触るくらいならこのくらいの理解で大丈夫ですよ。たぶん。
基礎をちょっとだけ学んだところで本題へ。結局HTMLのどの部分を変えたら写真を差し替えることができるのでしょうか。手掛かりは、差し替え元である灰色空の画像にありました。
この画像を右クリックして「新しいタブで画像を開く」とすると、「img_noimage.jpg(1028*686）」というタイトルのタブが開きます。このうち、「img_noimage.jpg」という文字列が上のHTML画像の四行目（左の灰色部分に行番号が書かれています）に書かれている<img>タグ中のsrc属性の属性値内に含まれています。お、この属性値は先ほどのタブのURLと全く同じものですね？
どうやら、ここを載せたい画像のＵＲＬに書き換えれば良さそうです。というわけでさっそく――
実際にやってみた（トリビアの泉風）
*.゜｡:+*.゜｡:+*.゜｡:+*.゜｡:+*.゜｡:+*.゜｡:+*.゜｡:+*.゜｡:+*
おお～！！春らしい桜の写真に差し替えることができました！！これは嬉しい。仕組みについて推測して、仮説を立てて、それが正しかったときの達成感を味わっています。やったぜ……。
ただ、この方法はスマホの「写真を追加」ボタンから変更する方法とは、結果に微妙に違いがあります。HTMLを見た感じ、そうですね……テストしていないので分かりませんが、クリックしたときの挙動が違うのではないでしょうか。他にも違いはありそうですが、これ以上はまた後日の記事で書くこととします。
今日はこの達成感を胸にゆっくり眠りたいところです。おやすみなさい。