【はてなブログ】画像にリンク先を設定する方法／右クリック禁止の設定［HTML］

画像にリンク先を設定【はてなブログ】

画像をクリックしたらそのリンク先にジャンプ。

はてなブログの場合は、ツールバーに『リンク』ボタンはあるのですが、これはテキスト化されるリンクです。

画像を選択してリンクしようとしてもうまくいきません。

『選択した写真を張り付け』時に『詳細を設定する』にチェックを入れてもリンクの設定ができないため、ちょっと戸惑う部分です。

 

はてなブログユーザーの方に向けて、画像リンクの設定方法をご紹介します。

（1）写真を投稿

まずは画像を『写真投稿』してアップします。

（2）画像のURL部分を確認

 HTML編集モードで画像のURL部分を確認してください。

画像のURLはこのようになっています。

<img src="https://cdn-ak.f.st-hatena.com/images/　……　.png" alt="" class="hatena-fotolife" itemprop="image" width="350" />

（3）画像のURLを <a class=　…　</a>で囲む

この『画像のURL』を以下のHTML<a class=　…　</a>で囲みます。

<p>-</p>
<p>-</p>

<a class="http-image" href="設定したいリンク先のURL">

<img src="…（画像のURL）…　 width="350" /></a>

<p>-</p>
<p>-</p>

これでURLの設定完了です。

HTMLタグの手順を細かくすると

少し手順を細かく表現すると、まず、画像のURLのすぐ上に↓このタグをひと続きでコピーして貼り付けておきます。

<a class="http-image" href="設定したいリンク先のURL"></a>

そして、設定したいリンク先のURLの文字の上に任意のURLを貼りつけ、画像のURLの一番後ろに</a>を移動させます。

…（画像のURL）…width="350" /></a>

編集中にリンク先を確認するには

記事を編集している時に画像のリンク先を確認するには、『編集モード』または『プレビュー』で画像を右クリック→『リンクを新しいタブで開く』等で確認できます。

《例》先ほどの画像に、当サイトのトップページをリンクしました。 

画像を右クリック禁止にする方法

アイキャッチ画像など、リンク設定用ではない画像もあります。

転用されると困るような著作権を守りたい写真・画像については『右クリック禁止』設定だけでも設定しておきましょう。

スクリーンショット機能もありますので完全に防ぐことはできないのですが、ガードの設定はしておきましょう。

oncontextmenu="return false;"

このHTMLタグを画像のコードの最後の方に入れ込みます。

（はてなブログの例です。）

<p><img src="https://（画像のURL）・・・.png" alt="画像" class="hatena-fotolife" itemprop="image" oncontextmenu="return false;" width="500" /></p>

画像に透かし画像を入れるなど、完全にガードをかけていく方法もありますが、ユーザビリティを考えると難しい面もあります。