はてなブログ で画像を貼る方法についての自分メモ第 2弾！ということで今回は html を使った方法について少しまとめておくことにします。尚、こちらの記事も はてなフォトライフ にアップロードした画像を 「Markdownモード」の はてなブログエディタで貼り付ける場合を前提にしています。
「はてなフォトライフ」についての説明や注意点、「fotolife記法」で はてなブログ に画像を貼る方法については以下の記事で解説していますので併せてお読み頂ければ幸いです。
「fotolife記法」でも一通りの事はできますが、画像に URL を埋め込んだりといった、ちょっと複雑なことをしようとするとやはり html で記述する必要が出てきます。
■ 「はてなフォトライフ」にアップロードした画像の URL を取得
とにもかくにも、「はてなフォトライフ」にアップロードした画像の URL が分からないことには html を使って画像を扱うことなんて出来ません。ということで、まずは画像の URL の取得方法について。
はてなブログ のエディタ画面上でサイドメニューの「 写真を投稿」から URL を取得したい画像を取りあえず選んで「選択した写真を貼り付け」から貼り付けます。
右の画像は fotolife記法で貼ったものですが、ブログ掲載の便宜上小さく表示しているだけです。URL の取得が目的ならオプションを付けずに単純に貼り付けて構いません。どうせ URL の取得が済めば消してしまうので。
ブログエディタのプレビュー画面で画像を右クリックすると「画像のリンクをコピー」というメニューが表示されると思います。これをコピーすると、以下の様な形式の URL が取得できます。
https://cdn-ak.f.st-hatena.com/images/fotolife/V/（ユーザー名）/（画像投稿日）/（ファイル名）.（拡張子）
「 写真を投稿」にアップロード済みの画像一覧の中から貼り付けたい画像を直接右クリックしても「画像のリンクをコピー」で URL の取得が出来るように見えるのですが、これ、サムネイル用の小さな画像なのですよね。「はてなフォトライフ」の管理画面から画像の URL を取得することも出来ますが、上記の方法の方が手間は掛からないだろうと思います。
何はともあれ、これで画像の URL はゲットすることができました。
■ まずは fotolife記法でできていた貼り方を試してみる
ここで書いている方法は fotolife記法でもできる事です。わざわざ面倒なこちらの方法で記述する必要はないわけですが、とりあえず html でもできますよということで・・・。
html で画像を取り扱う場合は <image> タグを使います。この際、属性同士は半角スペースで区切ることで併記する事ができます。src（ソース）属性が画像の URL を指定するのに使われるので必須なのは言うまでもありませんが、HTML 4.0 からは alt属性も必須となったそうです。
<image src="（画像 URL）" alt="（代替テキスト）" title="（画像のキャプション情報）">
alt属性と title属性の働きは fotolife記法の場合と同じです。
| 属性 | 効果 | 表記例 |
|---|---|---|
| alt | 画像が表示出来ない場合に表示させるテキストを指定 | alt=（代替テキスト） |
| title | 画像の補足説明（撮影場所や日時など） | title=（任意のテキスト） |
・ 画像の横幅と高さの指定
Webブラウザ上での画像の表示サイズは「width」と「height」を使って指定します。サイズはピクセル数（px）か、元画像の拡大・縮小の倍率を示す ％ を使って指定します。どちらかの指定を省略した場合は元画像の縦横比を維持した状態で表示されます。
| 属性 | 効果 | 表記例 |
|---|---|---|
| width | 画像の幅を指定 | width="500" 又は widh="80%" |
| height | 画像の高さを指定 | hight="500" 又は height="80%" |
・ 画像表示位置の調整
imageタグを div要素で囲ってやるのが空いたスペースに文字を回り込ませる事も出来て良さそうです。
| 効果 | 表記例 |
|---|---|
| 画像を左寄せ | <div class="left"><imageタグの内容></div> |
| 画像を中央に表示 | <div class="center"><imageタグの内容></div> |
| 画像を右寄せ | <div class="right"><imageタグの内容></div> |
例えば下の様なコードにすると、
<div class="right"><image src="（画像URL）" alt="sample画像" title="右寄せ" width="100"></div> <br clear="all">
右の画像のように表示されます。但し、この状態では画像のサイドに余白が無く、このように画像のすぐ横にまで文章が来てしまいます。これではちょっと見栄えが悪いですよね？
そこで、次のようにいじってみます。
<div class="right"><image src="（画像URL）" alt="sample画像" title="右寄せ" width="100" style="margin-left: 1em;"></div> <br clear="all">
imgタグ中に「style="margin-left: 1em;"」を挿入して画像の左に 1文字分の余白を持たせてみました。こうすると画像も文章も見やすくなりませんか？画像右に余白を入れたければ「margin-right」でいけます。
・ 画像を横に並べて表示
横に並べても収まる範囲でそれぞれの画像の幅を指定した imageタグを併記します。画像と画像の間隔はそれぞれの imageタグの間にスペースを入れて調節することができます。並べた画像を中央に表示したい場合は全体を div要素で囲い、上記の様にクラス指定してください。
例えば下記の様に記述すると、（ここでは画像の幅は 360px にしています）
<div class="center"> <image src="（画像URL 1）" alt="sample画像 1" width="画像の幅" > <image src="（画像URL 2）" alt="sample画像 2" width="画像の幅" > </div> <br clear="all">
下のように表示されます。
以上で取りあえず画像をクリックしたら Webブラウザ上のビューアで大きく表示されるという機能以外は fotolife記法で出来ていたのと同じ事ができるようになりました。
応用編です。画像同士の間に隙間を空けて 4枚の画像を並べて表示させてみます。
<div class="center"> <div class="box-img" style="margin-bottom: 5px;"> <img src="画像URL①" width="画像の幅" alt="代替テキスト"> <img src="画像URL②" width="画像の幅" alt="代替テキスト"> </div> <div class="box-img" style="margin-bottom: 5px;"> <img src="画像URL③" width="画像の幅" alt="代替テキスト"> <img src="画像URL④" width="画像の幅" alt="代替テキスト"> </div> </div>
のようにすると、以下の様な表示になります。
ちょっと力業っぽいのでもうちょっとスマートに書けるのかも知れませんが取りあえず・・・。
■ html を使って画像を扱う方法いろいろ
それでは html を使って画像を扱う方法をいくつか見てみましょう。
・ 画像に URL を埋め込む
画像に URL を埋め込んでおくと、画像クリックで別のページに飛ばすことが出来るようになります。
<a href="参照先 URL"><img src="画像URL" alt="代替テキスト"></a>
ここではサンプルとして、右の はてなブログ のアイコンをクリックすると はてなブログ のトップページに飛ぶようにしてみました。title属性も指定しておけば、リンク先がどこなのか分かるようにしておくことも可能です。
・ 画像クリックで元のサイズの画像を表示させる
レイアウトなどの関係でブログ上では小さい画像を載せておき、画像クリックで大きな画像が表示されるようにできると便利ですよね？fotolife記法では「plain」オプションを付けておけば画像クリックでブラウザ上のビューアーで大きく表示させることが出来ますが、似たようなことは html でも可能です。
先程の「画像に URL を埋め込む方法」を応用し、次の様に記述してみます。
<a href="（画像 URL）" target="_blank" rel="noopener noreferrer"><img src="（画像 URL） alt="代替テキスト" border="0"></a>
イメージとしては、画像をクリックすると別のタブが開き、画像に埋め込まれた 元画像の URL にリンクして飛んで元のサイズの画像が表示されるという感じになります。
途中に「rel="noopener noreferrer"」というコードが入っていますが、自分のブログを見てくれた方がフィッシング被害に遭うことのないようにも javaスクリプトを使った悪用対策として入れておいた方がいいそうです。
ちなみに、「target="blank" 」を「target="self"」とするか、target属性自体を省略した場合は同じタブ上で画像が表示されます（ブラウザの「戻る」ボタンで元のページに戻ります）。
はてなブログ では fotolife記法（plainオプション）だけでこちらの件については事足りると思うので上記のコードを使う必要はあまりないかと思いますが、一応こういう事も出来ますよということで・・・。
・ 画像右クリックからのダウンロードやドラッグ＆ドロップを禁止する
何らかの理由で画像をダウンロードさせたくないという場合もあるかと思います。そこで、貼り付けた画像を右クリックして表示されるコンテキストメニューからのダウンロードや、画像のドラッグ＆ドロップによる保存を禁止する方法について書いておきます。
<img src="（画像 URL）" alt="代替テキスト" onContextMenu="return false;" onMouseDown="return false;">
右クリックされた時のイベントは「onContextMenu」で、ドラッグ＆ドロップされていることは「onMouseDown」で取得する事が出来るので、これらの値を "false" で返すようにすることで右クリックやドラッグ＆ドロップを禁止することができます。
但し、上記のコードではスマホ・タブレットで画像長押しからの保存を禁止することまでは出来ないようです。
また、比較的簡単に回避する方法があるので、あくまでも " ブラウザ右クリックや、ドラッグ＆ドロップによる簡単な画像の取得・保存を出来なくする " 程度のものだという事は気に留めておいて下さい。
以上、取りあえず使う頻度が多そうなものについて書いてみました。こちらの記事についても、今後何か気付いた事があったら追記していきたいと思います。
上でご紹介した画像を横に並べて貼り付ける方法ですが、PC の Webブラウザで見た場合には正常に表示されるものの、スマホやタブレットで見た場合に縦に並んで画像が表示されてしまうという問題がありましたので、対策したコードもご紹介しておくことにします。
<div class="images-row mceNonEditable"> [f:id:（はてな ID）:（画像番号 1）:plain:alt=（代替テキスト 1）] [f:id:（はてな ID）:（画像番号 2）:plain:alt=（代替テキスト 2）] </div>
「はてな ID」と「画像番号」は、普通に「写真を投稿」から はてなブログ に編集画面に画像を貼り付けた時に挿入されるコードに含まれています。上記のコードで画像を貼り付けると以下の様な表示に。
ぱっと見変わりませんが、スマホやタブレットでブログ記事を表示させてみるときちんと横に並んで表示されているのが分かるかと思います。画像サイズは自動的に調節されるので、3枚、4枚と一列に並べることも可能ですが、どんどんサムネイルが小さくなるのでほどほどに（笑）。
縦横に 4枚を表示させると上記のようになります。
<div class="images-row mceNonEditable"> [f:id:（はてな ID）:（画像番号 1）:plain:alt=（代替テキスト 1）] [f:id:（はてな ID）:（画像番号 2）:plain:alt=（代替テキスト 2）] </div> <div class="images-row mceNonEditable"> [f:id:（はてな ID）:（画像番号 3）:plain:alt=（代替テキスト 3）] [f:id:（はてな ID）:（画像番号 4）:plain:alt=（代替テキスト 4）] </div>
この場合はコードを 2段に重ねただけです。これまでの方法だと、上下に 4枚表示させた場合はそれぞれの画像の拡大表示が出来なくなってしまっていましたが、こちらの方法だと大丈夫そうですね。
（2023.12.7）
