アメブロ 画像にリンク先を貼る方法基本を身につけましょう。

アメブロ 画像にリンク先を貼る方法基本を身につけましょう。アメブロでも、ワードプレスでもそうですが、
パソコン操作って、意外に見落としがちです。

 

画像にリンクを貼る。
基本的なことを身につけましょう。

 

 

 

よくある質問なんですが、リンクを画像にしたい!!
画像にリンク先を貼りたいけれども、うまくいかない!!

 

これはパソコン操作の基本でもあります。

 

楽天の商品リンクなどは、コード(ソース)を取得すれば、
(HTML形式になっているので)そのまま貼ればいいのですが、
画像の場合は、ちょっとひと手間かかります。

 

 

まず、画像を作ってアップロードしますよね。

 

よく勘違いするのは、CSSなどでアップロードしたURLを貼って下さい。
という記述があります。

 

ここにアップロード先のURLを貼ればいいのですが、
アップロード先のURLとは?????

 

ってなってしまって、間違ったコードを貼る場合が多々あります。

 

 

CSSやHTMLなどに慣れていない方は、
ちょっと戸惑うかもしれませんが、これ基本ですから
覚えておいてほしいです。

 

画像のアップロード先が、例えばアメブロの場合でいうと、
画像フォルダにアップロードします。

 

 

画像フォルダにアップロードすると、こんな感じになります。

アメブロ画像のアップロード

 

画面の見た目は、アメブロもちょっとつづ変わっていますが、
使い方は、一緒です。

 

この画像は、画像一覧という場所で見ることができるため、
そこのリンク先のURLも一緒に取得できるようになっています。

 

 

「記事に追加」ボタンをクリックすると、
記事の中に自動的に追加されています。

 

 

新エディタを使うと、記事の投稿の隣に表示されるので、
使いやすいかと思いますよ。

 

記事投稿のところで、通常表示の方を見ると、
画像だけが表示されますが、HTML表示の方を見るとタグのみが
表示になっているかと思います。

こんな感じです。

画像記事投稿

 

HTML表示にタブを切り替えると・・・・

 
HTML表示

 

このコード表示の中に、アップロード先のURLが隠されていて、
なおかつ、アメブロのあなたの画像一覧にリンク先が設定されているわけ。

 

 

ブログ初心者の方や、コードに慣れていない方は、
コピーしたものを、メモなどに貼りましょう!!

 

間違えたら、再度記事投稿のエディタに画像をクリック・・・
という順番で、同じことを繰り返さなければなりません。

 

何回も繰り返すことこそ、間違いの原因になるひとつです。

 

やばし!!と思ったら、メモにコピーしてローカルに保存してください。

 

 

コードの解説

コードの解説をすると、

<a href= ~となっている部分がアンカーといって、
リンク先のURLです。

 

アメブロの場合は、こんな感じのコードになっていますが、
同じです。

<a class=”” href= ~ となっているでしょう?
※確認してみてください。

 

これは、アップロードした場所のURLではなく、
その画像の閲覧場所のリンクURLなんですね。

 

 

<a class=”” href から始まり、> で終わっていますね。
その後に続く <img src~ 始まるコードがアップロード先のURLなんです。

アメブロの場合では、 <img id= から始まっていますが、
同じことです。

<a ~ 始まって </a> で囲んで終わるのがHTMLの記述の仕方です。

 

こういう記述の方法を覚えておきましょう。

 

<img ~ 始まっているタグも最後は >で閉じていますね。

 

画像にリンクを貼る場合のタグはこれ!!

 

<a href=”リンク先URL”><img src=”アップロード先のURL”></a>

 

リンク先が別窓(外部に飛ばしたい場合)で
開きたい場合は、必ず target=”_blank”
つけましょう。
※内部リンクの場合はいりません。

 

例えばランキングサイトのボタンなどをブログに貼る場合、
タグを取得して、そのまま貼ったりしている方もいますが、
クリックされた時、この target=”_blank”をつけていなければ、
ブログに戻れなくなります。
 
 
そう、いったまんまね。
 
 

そうではなく、別ウィンドウで開いて
また戻ってくるようにしてあげるのが、親切ですよね。
※これがユーザビリティーというものです。

 

こういう基本的なタグを少しづつ覚えていくといいです。

 

多少なりとも、ブログで情報をお届けしているのであれば、
最小限のPC操作や、HTMLタグを覚える。

 

その方が、百億万倍役自分の肥やしになります。

 

 

私も最初は興味なかったですが、だんだん勉強していくうちに
楽しくなって、CSSなどもわかるようになりました。

 
 

今は、解らないことって検索すればブログやサイトで、
詳しく書いてありますが、自分で調べて勉強するっていうこも、
忘れないでくださいね。
 
 

 

パソコン操作も、PCのバージョンによっても違いはありますが、
基本を理解していると、なんでもこい!!ってなりますよ!!
 

 

 

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



こんにちは。ちえぞうです。
手作りモノが、大好きで、好きが講じて手芸家になりました。
自分の時間を、もっと大事にするため、アフィリエイトもしています。 夢を叶える為に、日々奮闘中です。

もっと詳しくプロフィール♪

line

お役に立てたら、ぽちっとな ♪



Fc2ランキングへ



お問い合わせ

ペンちゃんをクリック!!

pen

ご質問や、ご相談など、
気軽にメールしてくださいね。

アメブロテンプレート参考本

このページの先頭へ