バカネコ日記

フリーページ

2004年08月14日
XML
カテゴリ:カテゴリ未分類

  
以前やった、リンク講座で、画像リンクの作り方を説明しましたが、
理解を助けるためとはいえ、簡略化しすぎた部分があります。
このため、画像にちょっと不細工なふちが残ってしまいます。

比較するとこんな感じです。

    フチがある     ふちがない



誰にでもわかりやすく、簡単にと、そのことばかり考えて説明しましたので
ちょっとばかり、不完全な解説になってしまいました。
あらためて、対処方法をご紹介いたします。




1.画像の枠線の消し方

まず、リンクのおさらい。 画像でリンクする場合の基本形は
  <a href="URL"><img src="保管場所"></a>
でした。

"URL"に飛び先、"保管場所"に画像のアドレスをはめ込めば、OKと説明しました。

お忘れになった方は、手抜きで覚えるHTML リンク編または、総集編 を、ご参照ください。

確かに、これで画像も表示されるし、ジャンプもできるのですが、このままだと
青紫のふちというか、枠線が出来てしまいます。
これを消すには、border="0" という呪文を、ひとつ追加します。
  <a href="URL"><img src="保管場所" border="0"></a>

これで、無粋な枠線が消えます。 簡単でしょ?

上の例で言えば、
<a href="http://plaza.rakuten.co.jp/nyancolon/"><IMG SRC="http://plaza.rakuten.co.jp/img/user/49/28/5934928/85.jpg" width="120" height="160" boader="0" alt="ふちがない"></a>
となります。

タグの中には、縦横の幅を表す、width="○○" や Height="○○" なども
入れられますから、どんどん長くなって、読みにくくなりますが、
単に、パラメータという名の呪文を追加しているだけです。

あまり、難しく考える必要はありません。
width, height, border, alt などの順序は気にしなくて良いようです。

ちなみに、border の数値を0ではなく、大きくするとどうなるか?
興味のある方はやってみてください。 ダサくなるので、あまりやりたがる人は
いないと思いますが(笑)


【仔猫の里親募集中】
押すにゃ、押すにゃ~~!
 ↑この子猫の里親を募集しています。



2.別ウィンドウで開く

さて、別ウィンドウで開きたいのに、うまくいかないという質問がありました。
リンク先を別ウィンドウで開くには、target="_blank" という呪文を追加します。

width や height を省略して、単純な形でもう一度おさらいしてみましょうか。

基本形
<a href="URL"><img src="保管場所"></a>
  別ウィンドウで開くようにする
   
<a href="URL" target="_blank"><img src="保管場所"></a>

ここで、うまくいかないとしたら、とりあえず、URL が正確かどうかを確認しましょう。
URL は間違いやすいところです。
その両端を見てください。 半角または全角のスペース(空白)なんかが、ついていませんか?

メモ帳などに、その部分だけコピーして、じーっと眺めてみるといいかもしれません。
width, height, border, alt などのパラメータを取り除いて、眺めると確認しやすくなります。

URLは、インターネットエクスプローラのアドレス欄から、コピー&ペースト
するのが、一番、簡単で正確です。

8月11日の日記のページにジャンプさせたいなら、そのページを開いて
インターネットエクスプローラのアドレス欄を見ます。
これが、正確なURLです。

楽天日記ページのURLはパターンが決まっていて、必ず
http://plaza.rakuten.co.jp/ユーザー/diary/日付0000
となっています。 たとえば、バカネコ日記の8/11の日記は
http://plaza.rakuten.co.jp/nyancolon/diary/200408110000/
となります。

これを、うろ覚えで打ち込もうとしても、かなり無理がありますね。
コピーしましょう。 そして、文字だけでなく、パターンも確認しましょう。
URLが間違っていたり、不必要な空白や文字がくっついていると、うまくジャンプできません。


くたびれてきたので、テキストリンクからアンダーラインを消すという小ワザは、
次回にまわします。






この記事がおもしろかったと思う人は1票! クリック →
 おもしろかったらクリックしてね


講座のページが散らばってきましたので、まとめました。 →マップはこちら




画面右上の「日記リンク追加」 をクリックして、「◎追加する」ボタンを押すと、この日記がリンクされます。
子猫の里親募集にお力添えをいただける方、または、このサイトの新着記事の通知をご希望の方はご利用ください。




 






最終更新日  2004年08月16日 01時39分03秒
コメント(15) | コメントを書く


■コメント

お名前
タイトル
メッセージ
画像認証
別の画像を表示
上の画像で表示されている数字を入力して下さい。


利用規約に同意してコメントを
※コメントに関するよくある質問は、こちらをご確認ください。


 Re:手抜きで覚えるHTMLリンク講座 補講2(08/14)   黒猫の福 さん
直しました~

これで、またひとつ偉くなったね! (2004年08月15日 21時37分03秒)

 黒猫の福さんへ   海獣トド さん
>直しました~

>これで、またひとつ偉くなったね!
-----
めでたし、めでたし。
ちゃんちゃん!

(2004年08月15日 22時05分10秒)

 お盆なのに   lana@lana さん
これだけ丁寧な説明、お疲れ様です。

(2004年08月15日 22時06分45秒)

 Re:お盆なのに(08/14)   海獣トド さん
lana@lanaさんへ

>これだけ丁寧な説明、お疲れ様です。
-----

へい。
もう、バテやした。

(2004年08月15日 22時36分58秒)

 訪問ありがとうございます^^   ☆ぱせり☆2271 さん
足跡を辿ってきてみれば・・・可愛いネコちゃんの写真とHTML講座・・・
ツボにはまりすぎ・・・

HTML非常に苦手なので、勉強しに来させて下さいませ。
と言う事で、リンクいただいていきま~す。
ps. 私も過去最高9匹飼ってました、ネコ・・・ (2004年08月15日 23時20分44秒)

 ご訪問ありがとうございます。   まゆもん3 さん
画像の枠線の消し方勉強させていただきました。
ちょうど困っていたところだったので、大助かりでした!また寄らせてください^^
・・・日記リンクさせて貰おうと思ったら、楽天になかなかアクセスできなくて、泣く泣くあきらめました。。。
(2004年08月15日 23時37分08秒)

 ☆ぱせり☆2271さんへ   海獣トド さん
>HTML非常に苦手なので、勉強しに来させて下さいませ。

ナニをおっしゃいますか、アナタ。
それだけシャレたページなのに。
アタシのサイトなんか、手抜きだらけの文字だらけ。
デザインはいらん! っちゅーのが信条なので(笑)

>ps. 私も過去最高9匹飼ってました、ネコ・・・

...負けました!

(2004年08月15日 23時42分19秒)

 まゆもん3さんへ   海獣トド さん
>画像の枠線の消し方勉強させていただきました。
>ちょうど困っていたところだったので、大助かりでした!

なんと、ナイスタイミング!

>・・・日記リンクさせて貰おうと思ったら、楽天になかなかアクセスできなくて、泣く泣くあきらめました。。。

バージョンアップしてから、評判ワルイよね。
アクセスはできないし、勝手に字は小さくなるし、レイアウトは総崩れになるし。

こりずに、またトライしてみてね。

(2004年08月15日 23時45分46秒)

 Re:手抜きで覚えるHTMLリンク講座 補講2(08/14)   りょうげんひ さん
画像リンクの枠線はずし
とても参考になりました

ぜひ試してみます
ありがとうございました

ところで、バカネコ(失礼)愛くるしいお猫さまは
夏バテなどしておられませんか
(2004年08月16日 00時25分06秒)

 失礼しました   りょうげんひ さん
コロンちゃんでしたね
(2004年08月16日 00時26分52秒)

 りょうげんひさんへ   海獣トド さん
>画像リンクの枠線はずし
>とても参考になりました

それは良かったです。

>ところで、バカネコ(失礼)愛くるしいお猫さまは
>夏バテなどしておられませんか

食欲が落ちて、エサを残すものだから、
残飯をアリに狙われています。
食事量を2/3にしました。

夏バテかどうかは分かりませんが、仰向けにひっくりかえって、
大股開きで昼寝をしています。

(2004年08月16日 01時09分00秒)

 Re:手抜きで覚えるHTMLリンク講座 補講2(08/14)   ユンカース0630 さん
こんばんわ!

今日もとても勉強になりました!
枠線、消したかったんですよ(嬉)
ありがとうございます!

8月11日のトドさんの日記を「新しいウインドウで開く」やり方は、<a href=" http://plaza.rakuten.co.jp/nyancolon/diary/200408110000/
" target="_blank"><img src="保管場所"></a>でいいんですか?

<img src="保管場所">は、画像をクリックして「新しいウインドウで開く」やり方でいいんですか?

画像を使わないで、やる場合は、、<a href=" http://plaza.rakuten.co.jp/nyancolon/diary/200408110000/
" target="_blank">8月11日の日記</a>とやればいいですか?

いろいろお聞きしてすいませんが、教えていただけますか?
よろしくお願い致します。
(2004年08月16日 02時15分49秒)

 Re:☆ぱせり☆2271さんへ(08/14)   ☆ぱせり☆2271 さん
海獣トドさん
うちのサイトはツール使ってるだけなので、テクニックも何もないんですよ・・・。
ハデなのが取り得です。
例えて言うなら、大阪のオカンと言ったところでしょうか(例えるなって。。。怒られるゾ)
そんなに詳しくないんだけど、相談とかも来るようになり、慌てふためいてオリマスヨ・・・涙
ヒマラヤンは長毛なので、夏は暑いんでしょうねぇ・・・
ニャンコは夏が一番弱いといいますから、頑張れ!って感じですネ!(まだ平気でしょうが、若そうだから・・・) (2004年08月16日 09時14分08秒)

 Re[1]:☆ぱせり☆2271さんへ(08/14)   海獣トド さん
>うちのサイトはツール使ってるだけなので、テクニックも何もないんですよ・・・。

にゃははっ、あたくしめも、ツール使ってますにゃん。
ベタベタ、タグ打ちなんぞやってられますかって。(たまに、やりますけど)
タグの意味が分かれば、充分でしょ。
ツールでは出来ないことは、あとから手でタグを修正してます。

でも、基本的には文字だけでやっていきたいです。
だって、HTMLで書くのは、見た目はきれいだけど、めんどくさいんだもん。

(2004年08月16日 13時25分26秒)

 ユンカース0630さんへ   海獣トド さん
>枠線、消したかったんですよ(嬉)

そりは、良かったにゃん。

>8月11日のトドさんの日記を「新しいウインドウで開く」やり方は、<a href=" http://plaza.rakuten.co.jp/nyancolon/diary/200408110000/
>" target="_blank"><img src="保管場所"></a>でいいんですか?

><img src="保管場所">は、画像をクリックして「新しいウインドウで開く」やり方でいいんですか?

>画像を使わないで、やる場合は、、<a href=" http://plaza.rakuten.co.jp/nyancolon/diary/200408110000/ " target="_blank">8月11日の日記</a>とやればいいですか?

はーい。その通りですぅ。
たいへん良くできました(笑)

でも、このままだとダメです。
href="の直後にスペース(空白文字)が入っています。
URLはダブルクォーテーションマークで囲むのですが、
URLの前や後にスペースがあると、それもURLの一部と見なしてしまって、エラーとなります。
この場合、URLの直後にもスペースが入っていますね。
URLに限らず、ダブルクォーテーションマークで囲まれたものは、
空白文字だろうと何だろうと、データとみなすので、注意が必要です。

(2004年08月16日 17時11分27秒)

PR

X

バックナンバー

2021年04月
2021年03月
2021年02月
2021年01月
2020年12月

プロフィール


海獣トド

コメント新着

 海獣トド@ Re:意外な一面に触れて。(08/14) 泡雪さんへ >マザーテレサって本当にす…
 海獣トド@ うめぼしがキラリ☆さんへ >ひゃー、ブログさぼってる間にトドさん…
 海獣トド@ 鵜の岬さんへ >これからも・・ヨロシク・・ね こち…
 海獣トド@ sshijimisanさんへ >でも、トド様のおかげで少しの村民は救…
 海獣トド@ もぐらのこさんへ >日記の下書き機能残ってるよ(^-^) …
 海獣トド@ archfelisさんへ >せめて12日一杯残せばいいのに・・・…

© Rakuten Group, Inc.