- ブログ初心者です
- ブログに貼り付けた画像にリンク埋め込められますか？
- もしも埋め込められるなら画像にリンクを貼り付ける方法を教えてください
ぴっぴ（@hiyoko_no_pippi）です！
画像にリンクを埋め込めると便利ですよね！
ということで今回の「ぴっぴのはてなブログでアフィリエイト」は、はてなブログの画像にリンクを貼り最後までお読み頂いて、魅力的なブログ作りに挑戦してみてくださいね！
付ける方法についてお話しすることにしました。はてなブログは４つの編集モード全てで画像にリンクを貼り付けられますよ。
- 見たまま
- HTML編集
- はてな記法・markdown
そして今回の記事では、これら全部の編集モードの画像にリンクを貼り付ける方法について全部分かるようにしました。
ところで、はてなブログの画像にリンクを貼り付ける方法を使えるようになると、次みたいなことができます。
- 画像で他に運営しているブログのリンクを目立たせる
- 画像で自社のホームページに誘導
- 画像でSNSに誘導
少しでも興味がおありでしたら、最後までお読み頂いて魅力的なブログ作りにお役に立てくださいね！
はてなブログの画像にリンクを貼り付ける方法
はてなブログは、全ての編集モードで画像にリンクを貼り付けられます。ちなみにはてな記法とmarkdownの画像にリンクを埋め込む方法は同じです。そのため、この２つについてはまとめてお話します。
- 見たまま
- HTML編集
- はてな記法
- markdown
見たまま
はい、見たままの画像にリンクを貼り付ける方法は下記のとおりです。なお画像の貼り付けについては省略します。詳しくは「」をご覧ください。
- リンク先のURLをコピーする
- 画像を指定しリンクボタンを押す
- リンク先のURLを貼り付ける
- プレビューを押す
- 選択範囲を選び「選択した形式でリンクを挿入」を押す
- プレビューを押す
- リンクしているか確認する
1.リンク先のURLをコピーする
新しいウィンドウにリンク先のページ開きます。検索窓に矢印を合わせてマウスの右側のボタンを押してください。すると上野画像みたいにメニューが開きますので、その中にあるコピーを押します。
2.画像を指定しリンクボタンを押す
記事編集画面に戻り貼り付けた画像を指定してください。指定は矢印を画像に合わせてマウスの左側のボタンを押すとできます。
上野画像みたいに画像が青くなったら、リンクボタンを押してください。
3.リンク先のURLを貼り付ける
リンクボタンを押すと上野画像みたいに画面が暗くなり、小窓が表示されます。URLと書かれた枠に矢印を合わせてマウスの右側のボタンを押してください。するとメニューが開きますので、その中の貼り付けを押します。
4.プレビューを押す
リンク先のURLを貼り付けたら小窓の右上にあるプレビューを押してください。
5.選択範囲を選び「選択した形式でリンクを挿入」を押す
するとリンクの形式が表示されますので、一番上にある「選択範囲」のチェックボタンを押します。その後「選択した形式でリンクを挿入」ボタンを押してください。
6.プレビューを押す
ボタンを押したら画面が元の表示に戻りますので「プレビュー」タブを押しましょう（上の画像の赤い枠で囲っているところにプレビュータブはあります）。
7.リンクしているか確認する
プレビュー画面になったらリンクを埋め込んだ画像に矢印を合わせてください。矢印を合わせたとき、上の画像みたいに画面の左下にリンク先のURLが表示されたら、リンクの埋め込みはできています。お疲れ様でした！
HTML編集
はい、HTML編集の画像にリンクを貼り付ける方法は次のとおりです。
- 画像を貼り付ける
- 貼り付けた画像のコードの前にリンク先のURLを入力する
<p><a href="リンク先のURL"><img src="画像のURL" alt="入力したalt属性" title="入力したタイトル" class="hatena-fotolife" itemprop="image" /></a></p>
このようにHTML編集で画像にリンクを貼り付けることはできます。見たままよりも少し手間を省けるので、はてなブログの操作に慣れたらHTML編集で画像にリンクを貼り付けるといいかもです。
はてな記法・markdown
はい、はてな記法とmarkdownで画像にリンクを貼り付ける方法は次のとおりです。ところで今回の説明では、リンクを埋め込む画像をすでにアップロードしている状態で説明しています。なので実際に画像にリンクを埋め込む場合、あらかじめ画像をアップロードしてから作業に取り掛かってください。
- はてなフォトライフに移動する
- HtenaBlogを押す
- フォルダを編集を押す
- 画像を選びメニューを開く
- 画像のURLを指定する
- 画像のURLをコピーする
- 記事編集画面に移動
- コピーした画像のURLを貼り付ける
- 画像が貼り付けられる
- リンク先のURLをコピーする
- リンク先のURLを貼り付ける場所を指定する
- メニューを開いて貼り付けを押す
- リンク先のURLが貼り付けられる
- プレビューで確認する
1.はてなフォトライフに移動する
画面の右上にあるマス目のボタン「利用中のサービス」を押します。すると上野画像みたいにメニューが開きますので、その中にあるはてなフォトライフを押してください。
2.HtenaBlogを押す
はてなフォトライフに移ったら画面の右側にあるHtenaBlogを押します（上の画像の赤い枠で囲っているところです）。
3.フォルダを編集を押す
HtenaBlogのフォルダに移動したら、画面右上にある「フォルダを編集」を押してください（赤い枠で囲っているところです）。
4.画像を選びメニューを開く
フォルダに移動したらリンクを埋め込む画像のチェックボタンに印を入れます。その後「ブログに貼り付ける」を押してください。
5.画像のURLを指定する
すると上野画像みたいにURLが表示されますので、矢印でURLをなぞり指定します。
6. 画像のURLをコピーする
URLを指定できたらマウスの右側のボタンを押してください。するとメニューが開きますので、その中にあるコピーを押します。
7.はてな記法・markdownに移動
記事編集画面に移動して、はてな記法またはmarkdownを選んでください。
8.コピーした画像のURLを貼り付ける
選んだ編集画面になったら、マウスの右側のボタンを押してメニューを開いてください。メニューが開いたら、その中にある貼り付けを押します。
9. 画像のURLが貼り付けられる
すると記事編集画面に画像が貼り付けられます。
10. リンク先のURLをコピー
次に新しいウィンドウを開いてリンク先に移動しましょう。リンク先に移動したら検索窓に表示されているリンク先のURLをコピーします。
11.リンク先のURLを貼り付ける場所を指定する
リンク先のURLをコピーしたら記事編集画面に戻ります。そして上の画像の青くなっている場所を指定して同じように青くしてください。指定する場所は<a harf="画像のURL">の画像のURLの部分です。
12. メニューを開いて貼り付けを押す
URLを貼り付ける場所を指定できたら、マウスの右側のボタンを押してメニューを開いてください。そして、その中にある貼り付けを押します。
13.リンク先のURLが貼り付けられる
するとリンク先のURLが貼り付けられます。次にプレビュータブを押してください。
14.プレビューで確認する
プレビュー画面になったらリンクを埋め込んだ画像に矢印を合わせてください。矢印を合わせたとき、上の画像みたいに画面の左下にリンク先のURLが表示されたら、リンクの埋め込みはできています。お疲れ様でした！
まとめ｜画像にリンクを貼り付けてブログをオシャレにしてみてくださいね！
はてブログでは４つの編集モード全てで画像にリンクを貼り付けられます。
- 見たまま
- HTML編集
- はてな記法
- markdown
はてな記法とmarkdownの画像の貼り付けはチョッピリ手間がかかりますが、決して難しいものではありませんので諦めずにチャレンジしてみてくださいね！
以上ぴっぴでした！ ありがとうございます！
はい、ぴっぴからお知らせです💦
ぴっぴのはてなブログでアフィリエイトでは、今回みたいにはてなブログの使い方についてお話しています。その中にはＳＥＯ対策に関係のある記事もありますので、この機会にぜひお読みくださいね。
