【基本】アメブロのフリースペースで画像のリンク先を変更する方法

こんにちは！

ずっと女性に売れ続けるひとめぼれデザイン集客、清水よふ子です。

今回はアメブロのお客様からよくお問い合わせいただく、

フリースペース（サイドバー）で画像のリンク先を差し替える方法をご紹介します。

フリースペースって？

文字や画像、リンク先、囲み枠など、HTML記述のタグで好きなように装飾できる自由記入スペースのことです。（入力限度は半角10,000文字まで）

スマホ表示では残念ながら表示されていませんが、主にパソコン表示ブログのサイドバーに表示されています。

私のブログにないんだけど？ってな方は、「サイドバーの配置設定」で表示するようにしていただくと見れるようになれます＾＾

サイドバーの配置設定はこちらから直接お入りいただけます！

ちなみにフリースペースの配置は、集客できるブログ型を目指すなら基本「一番上」がオススメです。

集客するには「第一印象」が超重要。なので、パッと見たときに視界に入ってくる注目ポイントとして認識されやすくなります。

やって損はないので、ぜひ設置しておきましょう♪

それでは、お待ちかねのフリースペースに貼り付けてある画像のリンク先を変える方法はこちらからどうぞ！

フリースペースで画像のリンク先を変更する

【1】貼り付けたいリンク先をコピーしてご用意する

画像（バナー）に貼り付けているリンク先を変えたいリンク先（URL）を用意するか、コピーしておいてください。

【2】フリースペースに貼り付けている内容の順番を確認

パソコン表示ブログのフリースペースに、どのような順番で並べているか把握できていますか？

うろ覚え…な方は、フリースペースで順番がどのように並んでいるかご確認ください。

現在、私のブログではサイドバーの上から、無料ブログ診断⇒無料メール講座のバナー（画像）の順に貼り付けています。

＊ここをサボると編集ミスしたりする場合があるので、要チェック！

【3】フリースペースに移動する

「フリースペース」編集画面に辿り着くには、２つのパターンがあります。

①アメブロから入る方はこちら。

ブログ管理⇒設定・管理⇒フリースペース編集

②アメケアを使っている方（Google Chrome限定の拡張機能）はこちら。

アメブロ管理⇒ブログページの編集・カスタマイズ⇒フリースペース

の順番で辿り着けます＾＾

もしくはこちらからでも直接お入りいただけます♪

すると、以下の画面でフリースペース編集の内容が表示されます。

web苦手で初心者の誰もが「ウワッ！」と気が遠くなりたくなるような、記号だらけの「html記述タグ（言語）」が表示されますが、ご安心下さい！

ここは、よくわからない記号ではなく「英単語」と捉えて頂くと、少しずつ意味が理解できてより見分けしやすくなりますよ♪

【4】フリースペースで画像とリンク先のhtmlタグを見つける

ここで画像とリンク先のhtml記述タグをどのように見つけたら良いの？とつまづいたり、

分からないままミスしてしまって、お問い合わせいただくことが結構多かったので

画像とリンク先のhtml記述タグの見分け方をわかりやすくお伝えしてみます！

再確認！【２】で覚えたフリースペースで表示されている順番

フリースペースで表示されている順番を覚えていますか？覚えていない方は、もう一度ご確認くださいね＾＾

私のブログでは、上から無料ブログ診断の画像、次に無料メール講座の画像バナーが並べてあるので、

フリースペース編集画面でも同じようにその順番をなぞってみると・・・

①が、無料ブログ診断の画像＋リンク先

• <a href="リンク先（URL）"><img alt="" contenteditable="inherit" height="191" src="あなたのアメブロの画像URL" width="300"></a>

②が無料メール講座の画像＋リンク先

• <a href="リンク先（URL）" target="_blank"><img alt="" contenteditable="inherit" height="206" src="あなたのアメブロの画像URL" width="300"></a>

のhtmlタグとして上から順に表示されていることになります。

画像のhtmlタグの見分け方

画像のhtmlタグは、ピンクで選択している範囲がそうです。

• <img alt="" contenteditable="inherit" height="191" src="あなたのアメブロにアップロードした画像URL" width="300">

<img〜>から始まる、冒頭の「img」は英単語の「image」を略したもの。

画像を表示するタグなんです！

リンク先のhtmlタグの見分け方

リンク先のhtmlタグは、基本以下のタグで表示されています。

• <a href="リンク先をここに貼り付ける">○○○</a>

<href>は「hypertext reference」を略したもの。直訳するとハイパーテキストの参照といいます。

リンクを設定するときに必ず使われるタグなので、<a>タグとセットとなります。ちなみに、<a href>をアンカーエイチレフと読みます。

<a href〜></a>リンク先のhtmlタグで囲っている○○○は、リンク先につなぐ文字や画像などを入れられます。

実際、○○○にどのように入れているかというと…

ご覧いただいて分かるように、ピンクで選択しているリンク先のhtmlタグの間に、「画像のhtmlタグ」を挟んであります。

つまり画像のリンク先は、冒頭と末尾にリンク先のhtmlタグが設定されるようになっているのです＾＾

さて、ここからリンク先を変える２つのパターンに分けます。

• リンク先が内部ページの場合
• リンク先が外部ページに飛ぶ場合

＊内部ページ・外部ページって何？

分からない方はこちら↓

それぞれ紹介しますので、ご自身の貼り付けたいパターンに合わせてご参考ください＾＾

【5】貼り付けるリンク先が「内部ページ」の場合

用意したリンク先がアメブロの内部ページの場合、

• https://ameblo.jp/あなたのアメブロID/記事ページ.html

リンク先URLに[ameblo.jp]が入っているのが「内部ページ」です。

そのリンク先を貼り替えるだけで、新しいタブをわざわざ開かなくても同じウィンドウで見れます＾＾

ご用意しておいたリンク先を、「リンク先をここに貼り付ける」ところに差し替えてください。

• <a href="リンク先をここに貼り付ける"></a>

一つでも欠けているとリンク先でなくなります。結構見落としやすい点でもあるので、ご注意下さい。

【6】貼り付けるリンク先が「外部ページ」に飛ばす場合

ご用意したリンク先がアメブロの外部ページの場合、

• https://○○○.jp/○○○○○/

[ameblo.jp]ではなく他のサイトやお問い合わせフォームのような、アメブロとは異なるドメインが入っているのが「外部ページ」となります。

リンク先が外部ページでも、貼り替えるだけで終わり〜！……と言いたいところですが、

実はもう一つチェックした方が良いhtmlタグがあります。

• <a href="外部ページのリンク先をココに貼り付ける" target="_blank"></a>

お気づきでしょうか？

そう、リンク先のhtmlタグ内の末尾にある

• <〜target="_blank">

ここ！

<target>は「ターゲット指定」といって、リンク先をどのウィンドウに表示させるか？を指定できるようにするものです。

リンク先が外部ページの場合、必須となります。

入っているか必ずチェックしておいてくださいね♪

まとめ

以上で、フリースペースにある画像のリンク先を変える方法をわかりやすくお伝えしました。

ちょっと難しかったかもしれませんが、いかがでしたでしょうか？

制作業者にバナーや写真を貼り付けてもらったは良いけど、いちいちお願いするのも何だし、

画像のリンク先を変えるだけなら自分でやってみようかな！

ってな時にぜひやってみてください♪

web苦手な女性起業家さんのブログ作りにお役に立てられたら光栄です♡

ずっと女性に売れ続けるひとめぼれデザイン集客、清水よふ子