アメブロのサイドバーに画像を載せて、記事にリンクをはる方法

内藤です

アメブロのサイドバーに画像を載せたいっていう場合ありませんか？お客様の声などの記事に。

さらに、その画像に記事へのリンクをはりたいっていう場合ありませんか？

これは、アメブロのサイドバーに追加できる『フリースペース』を使います。

フリースペースの編集画面には、画像の挿入ボタンがありません。ですから、「どうやって貼り付けるんだろう？」と悩む方は多いです。

今回は、アメブロのサイドバーに画像を載せて、記事にリンクをはる方法を説明します

フリースペースの編集画面に画像挿入ボタンがないので、まずは通常の記事を書く画面で編集します。

『画像』ボタンから、挿入する画像を選びます

『オリジナルで表示』を選び、画像を選択します

するとこのようにHTMLタグが挿入されます。

これだけ見ると拒絶してしまう人もいますが、こんな構造になっています

アメブロの場合、画像にリンクがついている状態で挿入されています

ですから、リンク先画像URLの部分を、リンクさせたい記事のURLに変更すればOKです。

次に画像サイズをサイドバー幅に合わせます。

今のアメブロのサイドバーは、ワイドのサイドバー幅が300px、もう一方が180pxになっています。　フリースペースを設置しているサイドバーの幅に合わせます。

このように　”表示画像URL”　の後に半角スペースを入れて　width=”180″　を付け足します。　（180px側のサイドバーの場合）

　↓↓↓

赤線の部分が変更部分、青線の部分が追加箇所です

あとは、このHTMLタグをコピーし、フリースペースに貼り付ければOKです。

右側にある画像の部分で、画像をアップロードし、『小さいサイズで貼り付ける』のチェックを外して、画像を挿入します。

挿入した画像の上にカーソルをあてると、幅を変えられるパネルが出てきます。

サイドバーに合わせて300pxまたは180pxにします。　幅を変更すると高さも自動的に変更されます。

『HTML表示』に切り替え、タグ編集エディタと同じように、リンクさせたい記事のURLを変更します。

変更後はHTMLをコピーし、フリースペースに貼り付ければOKです。

サイドバーに載せる画像ですが、どんな画像ならクリックしたくなるでしょうか

事例で出した2つのブログとも、何かしている写真ではなく、集合写真です。

その集合写真からは楽しさやお客さんの喜びが伝わってきますよね。

サービスを受けた楽しさとか、悩みが解決して喜んでいる様子が伺えます。
そうした方が、クリックしたくなります。

2つのブログを参考に、サイドバーに画像を載せてみましょう。