アメブロのメッセージボードに画像を表示させてボタンをつける

メッセージボードにメッセージを表示させることは簡単ですが、今回は画像を表示させてみることにします。

 画像を表示させるには、まず表示させたい画像をアメブロや他のサーバーにアップさせないとだめですが、今回はアメブロにまずはアップしてみましょう。

 まずは、サイドバーの「画像フォルダ」をクリックして「ファイルを選択」そしてファイルを選んだら「アップロード」でアップロードします。


 


 そうしたら、画面の下に今アップロードした画像が表示されるので「記事に追加」をクリックします。


 


 すると、先ほどアップした画像のリンクタグができますのでそのままコピーします。


 


 それを、そのままメッセージボードに貼付けるとアメブロのメッセージボードに画像が表示されます。

 しかし、そのままだと画像が左によってしまうので真ん中に表示させるには、先ほどコピーした画像のリンクタグを先ほどのリンクタグの両側に貼付けます。

<div style="text-align: center;">先ほどコピーした画像のリンクタグ</div>

を先ほどのリンクタグの両側に貼付けます。これで、画像が真ん中に表示されるようになりました。

 今回はアメブロのメッセージボードに画像を表示させるだけでしたが、ボタンの画像をアップしたのでついでにクリックするとリンク先に飛ぶ画像にします。


 まずは、画像をクリックしたら表示されるURLを準備します。そして、下の「ここに表示したいURLを記入」のところに挿入します。


〇〇の部分は先ほどアップロードした画像のリンク先と名前にそれぞれなっていると思うので実際には〇〇とはなってなく、URLや名前が表示されていれば大丈夫です。

<div style="text-align: center;"><a href="ここに表示したいURLを記入" target="_blank"><a href="〇〇"><img src="〇〇" alt="〇〇" /></a></div>

を先ほどのタグの代わりにメッセージボードに張り付ければボタンが表示され、画像をクリックするとリンク先が表示されるようになります。


 

 こうすることによって、アメブロのメッセージボードを有効に使うことができると思いますので、ぜひ試してみてください！