ブログパーツ

趣味の工房

☆画像リンクを貼る方法☆

メールフォームより、お問い合わせがありましたのでUPします。
タイトルどおり、画像にリンクを貼る方法です。

通常、FC2ブログなどでは画像を挿入するとこのようになります。(※クリックしてみてください)
2011y04m10d_094125171.jpg

画像をクリックすると、その画像へリンクしますね。
でも、他のブロガーさんへのリンクや、ショップへのリンクなど、画像を使って他のサイトへのリンクを作成したいときもあると思います。

例えばこんな具合。
2010y05m30d_233425078.jpg

ショップにリンクしたと思います。




といってもそれほど難しいことではありません。通常のように画像を差し込んでおいて、その一部分を書き換えるだけでOKです。


例えば、FC2ブログの場合、記事中に画像を差し込むと、下のプレビューでは画像が表示されていますが、記事本文中では…

2010y09m04d_155731039.jpg

この様に表示されると思います。
アメブロでは、編集画面とプレビュー画面が同じようですので、下にある「HTMLタグ」の方をクリックすることで、この表示を出すことができます。


通常、画像をクリックすると、その画像が表示されるようになっていると思います。
それが、この部分です。
2010y09m04d_155731039_20100904162129.jpg

しょっぱなのa href=の後の""で囲まれたURL部分、コレがリンク先のURLになっています。
要はこの部分を任意のURLに差し替えることで、画像をクリックしたときのリンク先を変更できます。




中身をもうちょっと細かく説明すると…
通常画像を差し込んだときのこの記述ですが、見やすく整理するとこうなります。

<a href="リンク先URL" target="_blank">
<img src="画像のURL" alt="画像の名前" border="0" width="599" height="326" />
</a>


まず、この一番初めの<a href="リンク先URL" target="_blank">と最後の</a>で挟まれた部分(文字や画像など)でリンクの設定がされています。

通常、文字でリンクする場合などは
<a href="リンク先URL" target="_blank">ココをクリック!!</a>
のようになっているかと思います。

ちなみに、リンク先URLのあとの、「target="_blank"」というのは、新しいウィンドウ(またはタブ)で開く設定です。消せば、同じウィンドウで開く設定になります。




ですので、その<a href="リンク先URL" target="_blank">と最後の</a>で挟まれた部分の間に、画像の表示の記述をしてやれば、画像をクリックしたときにリンクされる設定になる。ということですね♪

画像の表示部分というのがつまりコチラ。
<img src="画像のURL" alt="画像の名前" border="0" width="599" height="326" />
です。


ちなみにコチラも念のため説明すると…
img-src="画像のURL" で、画像の指定。
alt="画像の名前" は代替文字列の設定。
border="0"  は画像枠(境界線)の設定。
width="599" height="326" は幅と高さの設定。

※代替文字列とは、画像が表示されない場合にでる文字の設定ですので、画像の名前で
 なくても構いません。
 むしろ、画像の名前というよりも、「○○の画像」などに変えておいたほうが、画像が
 表示されない場合でも何の画像なのかが見ている人にわかるようになるので、親切かと
 思います。自分は変えてませんが…( ̄∇ ̄;)



なんとなく、お分かりになりましたでしょうか!?
ではでは。


ヽ(* ̄∀ ̄)**SeeYou




ランキングに参加しております。クリックにご協力を♪


にほんブログ村 PC家電ブログ 自作PCへ
にほんブログ村


関連記事


    16:53 | Trackback : 0 | Comment : 16 | Top
Comment
2010.09.04 Sat 17:40  |  yuuki914 #/FNYXDdw
またためになる情報ありがとうございます。

今度使ってみようと思います。
  [URL] [Edit]
2010.09.04 Sat 17:48  |  りくんちゅ。パパ #-
>yuuki914さん

参考になりました!?そう言ってもらえると素直に嬉しいです。
あ。テストお疲れ様でした(>Д<)ゝ”

  [URL] [Edit]
パパさん~

★⌒(●ゝω・)b アリガトゥ♪

画像を貼れる部分で試したら、出来ました~^^
アメブロのサイドで、どこで、画像を差し込めるのかが・・・不明ですw


それに、やりたいことだらけww
背景も変えたいし、デザイン?も変えたいしww
始めてみると欲が出てきますね^^;
  [URL] [Edit]
2010.09.04 Sat 19:31  |  りくんちゅ。パパ #-
>夜王さん

できましたか~!?よかったです( ̄∇ ̄)
う~ん、FC2ならわかるのですが…
でも、「フリースペース」とかがあれば、上で書いたように画像リンクの記述をしておいて、コピペでいけると思いますよ♪

  [URL] [Edit]
なるほど~w

試してみます~^^
  [URL] [Edit]
パパさん

出来ました~^^
趣味の工房のリンク完成~^^
  [URL] [Edit]
2010.09.04 Sat 21:28  |  りくんちゅ。パパ #-
>夜王さん

おめでと~♪
リンクありがとうございます☆人´∀`).☆.。.:*
夜王さんのも張っておきますね。
  [URL] [Edit]
2010.09.04 Sat 21:32  |  りくんちゅ。パパ #-
>夜王さん

あぁっ!! Σ( ̄□ ̄;

すみませんっ!!今日TOP画像変更しちゃいました(ToT)
その画像も気に入っているので、もちろんそのままでOKです♪
  [URL] [Edit]
2010.09.04 Sat 21:43  |  -Stea1th #-
自分はFC2の場合、高機能テキストエディタ(内容書くところの上にいろいろ並んでるそれの一番右で「W」が書かれている)を使っていますが、そちらではもっと簡単ですよー

まずは画像をアップロードして、内容欄に画像が出てきます。その画像をドラッグして、その「W」がある欄の「URL」って書かれてるのをクリックして、URLをうてば(この作業は文章にリンクを付けるやり方と同じ)、画像のリンクができますよb

ちょっとややこしいですねww
  [URL] [Edit]
2010.09.04 Sat 21:50  |  りくんちゅ。パパ #-
>-Stea1thさん

おぉ!?
今試してみましたが、いろいろ他にも昨日あるじゃないですか!!
Σ( ̄Д ̄lll)

…4年以上やってるのに、初めて知った(恥)
「W」なんて、見向きもしてなかったです( ̄∇ ̄;)

Nice!な情報、ありがとうございます。人´∀`).☆.。.:*

  [URL] [Edit]
ほんとだww

画像変わってるwww
そのまま使わせていただきます^^
  [URL] [Edit]
2010.09.04 Sat 22:58  |  りくんちゅ。パパ #-
>夜王さん

すみませ~ん( ̄∇ ̄;)
  [URL] [Edit]
2010.09.04 Sat 23:49  |  丸ボロマン #-
りくパパさん、こんばんわ(^^♪
TOP画像変更したんですね!
僕のブログのりくパパさんのリンクの画像も変えましたよ!

ブログ初めて2週間ぐらいなんですが、結構奥が深いですね
りくパパ先生、時々勉強会開いてください!お願いしま~す(笑)
  [URL] [Edit]
2010.09.04 Sat 23:53  |  りくんちゅ。パパ #-
>丸ボロマンさん

こんばんは♪
なかなかお気に入りの1枚です。
ちょっとブルーで統一されたような感じじゃないですか!?w

ボクはキャリアだけは長いですが、あんまり勉強してないのであまりお教えできることも少ないですが(笑)
不定期更新いたします♪

  [URL] [Edit]
2011.12.03 Sat 22:14  |  BRABUS #Q8zXXIsk
はじめまして。
挿入画像にリンクが貼れず悩んでいたところ
こちらに辿りつきました。
ご丁寧な解説、ありがとうございました!
おかげさまでスッキリ問題解決です^^
  [URL] [Edit]
> BRABUSさん

初めまして。コメントありがとうございます。
お役に立てたのなら嬉しいです。☆人´∀`).☆.。.:*

BRABUSさんのブログ拝見して、ビックリしました!!
スゴイきれいな写真がズラリ...
また一眼レフへの物欲が(笑)

ちなみにコチラの記事もオススメです。
http://rikuntyudady.blog101.fc2.com/blog-entry-445.html

ブログの画像表示方法を変えることができます。
ちょっと手間はかかりますが、自己満足度は高いですよ(笑)

  [URL] [Edit]









(編集・削除用)


管理者にだけ表示を許可
Trackback
http://rikuntyudady.blog101.fc2.com/tb.php/293-eacfcec5
プロフィール

りくんちゅ。パパ

Author:りくんちゅ。パパ
初歩的な話からオーバークロックまで、PCに関することやその他趣味に関することを思い付きで書いています。
コメントはお気軽にどぞ。

「rikuntyudady」の名前で出没することもあります(笑)

rikuntyudady01.jpg

このサイトはFirefox,Google Chrome用に最適化されています。
IEでは一部表示が正しく行われない場合があります。
ご了承ください。


アクセスカウンター
signbot_20101017072856.gif
現在の閲覧者数:

galleryロゴ02
cmcrogo2.png
RikuntyudadyのCM690をUP!!
☆ただ今34台展示中☆



みんなのPC♪ギャラリーはコチラ。

Page 1 Page 2


Categories...

クリックで全て開閉↓

openclose


○自作をしてみたい方へ
○オーバークロックについて

「+」はフォルダクリックでOPEN

全ての記事を表示する


見つからない場合はコチラ
(記事内検索)

最新記事
最新コメント
☆MY GEAR☆
カスタマイズ工程はコチラ
画像
画像
画像
画像
画像
画像
画像
ATCS840
COSMOS II
CORE1500
MasterCase5Mod

<製作依頼PC>
画像
Overclock.net work log
MNPCTECH"Case Mod Blog"
画像
画像
【CORSAIR Vengeance® C70】
HAF X MOD

<コラボ企画> 画像
SNIPER
☆おもな活動サイト☆

Cooler Master Forum
CoolerMaster

techPoweUp! Case Mod Gallary-
techPowerUp!

Overclock.net
   -Case Mod Work Logs-
Overclock.net

Case Modding Forum
Case Modding Forum

こだわりの持ち物を登録しよう♪
2010y05m05d_221238218.jpg

Web page translation
THIS IS MY GEAR
2016y03m23d_233159886.png 2016y03m23d_233204419.png
感染者増殖中...
りくんちゅ。パパにメールする







本文:

☆掲示板☆

趣味の工房 ~みんなの休憩室♪~
お気に入りブログ♪
カメラ熱上昇中♪
【Canon】EOS 70D 70D.png ○レンズ
【Canon】
EF-S18-135mm F3.5-5.6 IS STM
EF-S55-250mm F4-5.6 IS STM 【SIGMA】
18-35mm F1.8 DC HSM|Art
APO 50-150mm F2.8 EX DC OS HSM


【Canon】G7 X canon_g7x_20150528010550367.png
☆広告☆
ブロとも申請フォーム
QRコード
QRコード
RSSリンクの表示