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

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


テーマ:画像加工基本スキル

アメブロでも無量ブログでも使える
画像にリンクを貼る方法をご紹介しますね。

 

画像を設置しのはいいのですが、それにリンクを貼りたい!!

 

これは、基本のHTMLと関係するので、ちょっと解説しておきます。

 

 

 

 

 

 

画像を作ってアップロードし、
記事投稿やメッセージボードを使って設置しても、
なかなか表示されなかったり、リンク先に飛ばなかったり・・・

 

 

HTMLって、本当に厄介ですよね。

 

 

でも、順番と表記の方法を知っておくだけで、
間違えも正せますので、覚えておいてくださいね。

 

 

 

 

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

今回は誰でも出来るように、アメブロのメッセージボードを使ってみますね。

 

 

メッセージボードは、記事投稿と同じエディタを使えるので、
簡単ですので、そちらで解説していきますね。

 

 

まず、リンク先のURLをメモに保存しておきます。
今回例として、読者登録先へリンクするようにしたいかと思います。

 

 

自分の読者登録URLは、ブログの読者登録するをクリックすると、
アドレスバーに出てきますよ。(一番上です。)

こんな感じです。

 

アドレスバー

※ブラウザの一番上ね。

 

解らない方は、下記のURLの最後を、
ご自分のアメブロIDに変更してお使いくださいね。

 

 

 

これも、いったんメモして置いておきましょう。

 

 

次に、作ったもしくはフリー素材でゲットした画像を、アップロードします。
※メッセージボードの画像ボタンをクリックすると、表示されますね。

こんな感じですね。

 

画像をアップロードする。

ここでは、配置設定もできますので、
使う画像をチェックし、配置設定もついでに設定してくださいね。
(後から変更しても可能です)

 

 

 

メッセージボードのエディタにある、リンクをクリックすると、
リンク先追加という表示が出てきます。

メッセージボード解説

 

各種設定からメッセージボードをクリックすると、表示される画面です。

 

 

ここにリンク先と、テキストには適当な名前を付けておきます。

 

ここで「リンク先の表示方法」ですが、外部へリンクを貼りたい場合は、
新しいウィンドウで、同じブログ内の内容だったら、
同じウインドウで表示させるように設定します。

 

 

もし、タグがいい方は、下記のタグをお使いください。

 

 

 

※target=”_blank”を後ろにつけると、別窓でウインドウが開くという意味です。

 

以前の記事でも書いているんですが、リンク先が外部のサイトへいくのであれば、

このtarget=”_blank” を付けないと、ブログに行ったきりになってしまいます。
読者さんにとっても、見ていた記事に戻れなくなってしまいますよね。

 

 

ですから、外部へリンクを貼るのかなのか、内部(自分のブログ)にリンクを貼るのか?
ということは、大事なことです。

アメブロ 人気ブログランキングバナーの設置方法

 

 

次に画像にリンクを貼る場合ですが、

この<a href=~>と </a> の間に、
先ほどコピーを取っておいた、画像のアップロード先のタグを貼ります。

 

 

タグはこちら!!

 

 

 

画像の高さや画像の幅は、省略してもOKです。
alt は、代替えテキストといって、画像が表示できない時の、
変わりのテキストになりますので、つけましょう。

 

アメブロの場合のHTMLタグの表記が、上記のHTMLの順番とは
ちょっと違うかもしれませんが、
順番は違っても、表記はあっていますので気にせず貼ってください。

 

 

できたら、表示で確認してみましょう。

 

 

 

 

画像にマウスを合わせると、指に変わりませんか?

 

 

 

指マークに変わったら、リンク先がちゃんと貼られたということになります。

 

 

 

もし、出てこない場合は、タグが間違っているかと思います。

 

次のことを確認してくださいね。

 

 

  • タグが半角英数字になっているかどうか?
  • <> が、ちゃんと閉じられているかどうか?
  • ”” が抜けていないか?

 

 

それでも、表示できない場合は、
ブログを確認する時は、必ずF5キーを押下して、更新をかけましょう。

 

これは、何か修正したら必ず行ってくださいね。

 

 

画像にリンクを貼るのは、結構日常的に使うHTMLコードです。

 

 

応用もできますので、覚えておいてくださいね。
(使いながら、覚えましょう!!)
 

 

 

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

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