アメブロdeアクセスアップ

アメブロ メッセージボードの画像にリンクを貼る方法 | アメブロのテンプレートやツールを使って、アクセスアップする方法やアメブロカスタマイズの方法をご紹介します。


テーマ:プチカスタマイズ

アメブロのプチカスタマイズです。
また、リクエストをいただきましたので、(嬉しいですね♪)
回答していきたいと思います。

今回は、画像にリンクが貼ることができますか?という質問ですが、
ちゃんとリンクは貼れますよ!!

 

基本的なHTMLタグの使い方をご説明します。

 

 

 

 

 

 

画像にリンクを貼るというのは、
画像をクリックしたら、読んでいただきたいページが開くということ。

 

 

アメブロの場合は、トップページにメッセージボードという、
自分のやっていることなどを、アピールできるスペースがあります。

 

 

 

ここに、すてきな画像があれば目を惹きますよね。

 

 

なので、メッセージボード内に貼った画像にリンクを貼る方法を、
説明していきますね。

 

 

これってね。

 

 

 

私も画像をたくさん使っているので、
基本のHTMLコードといってもいいです。

 

 

要領を覚えておくと、とっても便利。

 

 

 

サイトの運営上にも役に立ちますし、
画像をたくさん使ってるサイトでは、
読者さんを違うページへの誘導するにも、このリンクの貼り方を使います。

 

 

 

メッセージボード内だけでなく、
記事内でも画像を使ってリンクを貼るという方法も同じです。

 

 

 

では、さっそくやってみましょうね。

 

 

 

hana2画像にリンクを貼る方法

 

今回は、メッセージボードに画像をアップロードして、
リンクを貼るという手順で説明します。

 

 

 

画像をアップロードする前に、画像を作成しなければなりません。

 

以前の記事でも書いているんですが、
画像加工のソフトはいろいろあります。
私もいろんな無料のソフトを使って画像を作成していますが、
ご自分の使いやすい画像ソフトを使ってみてくださいね。
【フリー画像加工ソフトサイト一覧】

 

 

 

画像の準備が出来たら、早速メッセージボードにアピールポイントを書きつつ、

画像をアップロードし、その画像にリンクを貼っていきます。

 

 

出来上がりは、こんな感じ。

アメブロサンプルサイト

 

アメブロのマイページより、【デザインの変更】をクリック。

 

 

メッセージボード設定

 

 

← 下の方の【各種設定】のところから
【メッセージボード】をクリックしてください。

 

 

 

 

 

 

 

アメブロのメッセージボードのところは、
記事を投稿するのと同じで、ワープロみたいに入力することができます。
画像のアップロードも、記事投稿と同じです。

 

【画像】と書いてあるアイコンをクリックします。

 

自分で作成した画像をアップロードします。
(※画像タイトルは必ずつけましょうね)
こんな感じ。

メッセージボードに画像をアップ

 

画像がアップロードされたら、下のタブの【HTMLタグの表示】をクリック。

 

HTMLコードが表示されます。
こんな感じね。

 

HTMLソースの変更

↑ 黄色いハイライトの部分が、画像をアップロードしたコードとなります。

 

ここで、注目!!

<a href=”~”></a>

 

 

 

このコード(タグ)がリンクを設定するタグになります。
つまり、<a href=”~”>の”~”の部分に、リンク先のURLを記載すれば、
そのURLに飛びますよ!!ということ。

 

 

 

でも、この<a href=”~”></a>を入力しただけでは、
ページ上では何も表示されないということなんです。

 

 

href=”URL”で、リンク先を指定するという意味なので、
それに a をプラスすることによって、ここから他のページが開きますということです。

 

 

だから、<a href=”~”>と</a>の間に、文字や画像を入力することで、
その文字や画像をクリックすると、リンクしたURLが開くということ。

 

画像へリンクを貼るということは、
この<a href=”~”>と</a>の間に、画像を入れたらいいわけです。

 

サンプルのコードでは、

<img~>の部分で、アップロードした画像を表示させています。

 

 

<a href=”URL”>は、アップロードした画像の保存場所が指定されている状態です。
なので、ここのURLを開きたいページのURLに変更します。

 

 

 

 

 

この例では、アップロードした画像は、私のワードプレスのバナー用に作った画像ですので、
私のワードプレスのURLを記入することにします。

 

 

 

解りず来場合は、下記のコードを貼りつけてくださいね。

 

 

<a href=”ここにリンク先のURL” target=”_blank”><img src=”アップロード先の画像” alt=”画像のタイトル” /></a>

 

 

 

 

リンク先のURLのあとに target=”_blank” を入力することにより、
別窓でページが開くことになります。

 

 

これは、以前の記事でも書いているんですが、
ランキングのバナーなど、自分のページとは違うページを開くことで、
読者の方が、他のページを見つつ自分のページは温存することができます。
(これを外部リンクといいます。)
アメブロ ランキングバナーを設置する方法

 

 

 

逆に、自分のサイトの記事ページなどへリンクを貼る時は、
この target=”_blank”は、入力しない方がいいです。(これを内部リンクといいます。)

 

 

 

出来上がりを見てみましょう。
【表示を確認する】をクリックします。

 

 

画像をクリックしても、ここではリンク先を確認できないので、
【公開】をクリックしてください。
こんな感じね。

 

メッセージボードにリンクつき画像を貼る

 

画像が表示されていたら、画像にマウスを載せてクリックしてみて、
リンク先が別窓で開いたら、完成です。

 

 

 

ちょっと最初の画像と違うじゃない?

 

それはね・・・・

 

 

タグのチョイ足し・・・

 

これでもいいかもしれませんが、
ちょっと文字や画像をセンターに寄せてみたら、バランス的にいいですね。

 

 

下記のタグを、センターに配置したい文字、または画像の前に入力してください。
(このまま貼ってもいいですよ)

 

 

<div align=”center”>センターに配置したい文字</div>

 

 

 

 

※今回の場合は、一番最初に、<div align=”center”>を貼って、
一番最後に</div>を貼ると、全部が真ん中に配置されます。

 

 

 

どうでしょうか?
私のサンプルサイトで確認してみてください。
(ついでに、リンク先も別窓でひらくかどうか、確認してみて!!)

 

 

http://ameblo.jp/test-site2

 

 

 

 

 

※画像をクリックすると、サンプルサイトへ飛びます。

 

 

 

 

画像にリンクを貼る方法は、覚えておくと今後も使えます。

 

 

画像を使ったブログ作成や、カスタマイズには、
基本的なHTMLコード(タグ)を覚える必要がちょっとあるので、
簡単なことから、覚えましょう。

 

きっとカスタマイズも楽しくなりますよ!!

 

 

 

カスタマイズができない、でも美しいブログにしたい方!!
私のおすすめテンプレートで、アメブロを美しいブログに変身させてくださいね。

 
 
 

テンプレートデザイン・カスタマイズのこと、アクセスアップのこと、
アメブロのことならお任せあれ!

Copyright © アメブロdeアクセスアップ All Rights Reserved.