【解説】写真の上に、アイコン（ボタン）を乗せる

100万ポイント山分け！1日5回検索で1ポイントもらえる

000000

HOME | DIARY | PROFILE

【フォローする】【ログイン】

Freepage List

タグのテスト

< 新しい記事

新着記事一覧(全345件)

過去の記事 >

2005.10.26

(10)

テーマ：ホームページ作成の悩み(549)

カテゴリ：楽天ブログ便利帳

●「画像」の上に「アイコン（ボタン）」を置く●
●「アイコン（ボタン）」に「リンク」を張る●

●「アイコン（ボタン）」に「リンク」を張る●
詳しくはこちら→ 【タグ帳】画像・リンク

■ 「リンク」を貼る

同じページ
<a href='移動先のアドレス'>文字・画像</a>

別窓を開いて移動
<a href='移動先のアドレス' TARGET="_blank">文字・画像</a>

■ 「アイコン」を貼る

<img src='画像のアドレス'>

リンクの外枠（青線）を消す
<img src='画像のアドレス' border="0">

これの組み合わせです。

■ 「アイコン」に「リンク」を貼る

●写真の上に、アイコンを乗せる●

★テーブル・タグを使います。
「テーブル（一つの枠）」を作り、その背景に「画像」を表示される。

「小さい画像」を並べて表示させる。

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

<table background="画像のアドレス" width="500" height="300" align="center">
<TR><TD>
ここアイコンや文字を入れる。
</TD></TR></TABLE>

背景の画像→

【楽天ブログ便利帳】

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

「一枚の写真」を表示させる。

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

<table background="写真のアドレス" width="300" height="400" align="center">
<TR><TD>
ここアイコンや文字を入れる。
</TD></TR></TABLE>

【楽天ブログ便利帳】

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

●解説●

テーブルの背景に、画像を表示させる。

■ テーブルの背景

background="写真のアドレス"

（写真が縦横に並びます）

「テーブル（枠）」の大きさを指定します。

■ 横幅

width="300"

■ 高さ

height="400"

好きな大きさにして下さい。
ただし、一枚の写真として表示したい時は、
「テーブル（枠）の大きさ」と、「写真の大きさ」を、同じにします。

■「テーブル（枠）」の左右の位置

中央：align="center"
左　：align="left"
右　：align="right"

●おまけ●

■「テーブル（枠）」の中での、アイコンや文字の、縦（上下）での位置
<TR>の部分を、次の様に変えて下さい。

上に揃える　：<tr valign="top">
中央に揃える：<tr valign="middle">
下に揃える　：<tr valign="bottom">

例：「テーブル（枠）」の、上で揃える。

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

<table background="写真のアドレス" width="500" height="300" align="center">
<tr valign="top"><TD>
ここアイコンや文字を入れる。
</TD></TR></TABLE>

【楽天ブログ便利帳】

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

【ブログランキング】
今日もクリック（投票）してニャ＾＾

ここ

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

【写真集】【中華街】

【楽天ブログ便利帳】
「色見本帳・カラーチャート」
「タグ帳」「画像置き場」「便利ソフト」
「楽天ブログQ&A　よくある質問」「ホームページスペース」
楽天ブログニュース ・【画像オプション】「５MB」 → 「１５MB」に。詳しくはここをクリック 2005/10/27　　・【アルバム機能】が追加されました。 2005/09/29　　・【トラックバック】悪質なトラックバック・スパムに対応。迷惑行為が確認されているサイトからのトラックバックを、一括で受け取らないように設定を行った。今後も迷惑行為が見られた場合、随時対応を行っていく。 2005/09/21　　・【日記・記事の投稿】１日の投稿「３件まで」→「５件まで」に変更。 2005/08/22　　・【対応】ツールを使った自動巡回行為への対応強化。 2005/06/23

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

お気に入りの記事を「いいね！」で応援しよう

Last updated 2005.10.28 11:31:34
コメント(10) | コメントを書く

[楽天ブログ便利帳] カテゴリの最新記事

■コメント

Re:【解説】写真の上に、アイコン（ボタン）を乗せる(10/26)

やっしーぃさん

お役立ち情報なのだぁ＾０＾
コレはぜひ使ってみぃたい！！
まずは、画像作ってリンク先を考えなきゃ（苦笑） (2005.10.27 01:09:15)

返事を書く

★　やっしーぃさんへ

spiky09 さん

●お役立ち情報なのだぁ＾０＾
コレはぜひ使ってみぃたい！！
まずは、画像作ってリンク先を考えなきゃ（苦笑）

★「写真の上に、アイコンを乗せる」と言うと、難しく感じますが、

■テーブルで一つの枠を作り、枠線は見えなくする。
■テーブル（枠）に背景をつける。

という、単純なタグの組み合わせです。
色んなタグを組み合わせて、色んな技（表現）が出来る、
という事ですね＾＾

　掲示板で質問を頂いた事への回答なのですが、
私も勉強になりました。
「タグを知っている。さて、何をしよう」
ではなく、
「初めにデザインありき」→「それをタグを駆使して表現する」
という事なんだなぁ、と感じました。

　また、逆もあるでしょうね。
「こおいうタグがあるのかぁ」→「これを使って、こんな事やってみよう」

　あぁ、いずれにしても、ページのデザインは、センスなんだなぁ・・・。
私なぞ、文字の大小、間隔だけで表現（デザイン）してます＾＾；；；
デザインで悩む、という方を尊敬します。
色んな質問を頂いて、とても勉強になってます。 (2005.10.27 01:25:16)

返事を書く

おはようございます。

四季の風３６５さん

spikyさんのおかげで、タグがこわくなくなりました。はじめは、タグが並んでいるの見ただけで、わけがわからなくて、逃げていたのですが…。
今日のも、ぜひ覚えたいと思いました。ここへお邪魔すると、覚えたいことがいっぱいで、順番に迷うほどです。

(2005.10.27 05:41:13)

返事を書く

Re:【解説】写真の上に、アイコン（ボタン）を乗せる(10/26)

masako461 さん

｢写真の上に、アイコンを乗せる｣
これ、したかったんです！
ありがとうございます、ぜひ使わせていただきます♪

画像倉庫がいっぱいになって、infoseekのフォトアルバム
使いました。
その画像で昨日日記を書いたんですが、
今までのと画質が全然ちがいます。
８枚目はそのまま貼って、１～７枚目はノイズ処理して貼ったけど
何だかいまいちきれいじゃない。
spiky09さんのワンチャンの写真けっこうきれいに写ってますが
何か方法あるんですか？
(2005.10.27 08:08:15)

返事を書く

Re:【解説】写真の上に、アイコン（ボタン）を乗せる(10/26)

猫の机さん

タグを使っていろんなことが出来るのですね。
テーブルとかまだまだ使いこなせないのですが、
今回も勉強になりました～。

(2005.10.27 13:40:45)

返事を書く

★　四季の風３６５さんへ

spiky09 さん

●spikyさんのおかげで、タグがこわくなくなりました。
はじめは、タグが並んでいるの見ただけで、わけがわからなくて、逃げていたのですが…。
今日のも、ぜひ覚えたいと思いました。
ここへお邪魔すると、覚えたいことがいっぱいで、順番に迷うほどです。

★タグが怖くなくなった、とは凄いですね＾＾
見慣れてくると、勘所が掴めてきます。

　今回のは、画像の上に、画像を乗せる、という方法です。
あまり使う機会はないかなぁ、と思うのですが、
使い方によっては、便利な機能ですね。

　例えば、写真の中に文字を入れる、という部分を利用して、
写真の下中央に、花の名前を入れる、といった事も出来ます。

　四季の風さんは、写真に、額（がく）の様なフチを入れていらっしゃいますね。
テーブル（枠）のタグで、これも出来ますよ。
次回は、その『写真枠』というのをご紹介します。 (2005.10.27 21:38:23)

返事を書く

ほうほう。

marieve さん

これ使えるといいですね。
先日の字の色変えるのと一緒に♪

やっぱり家庭教師ー（Ｔ△Ｔ）！！！ (2005.10.27 22:00:27)

返事を書く

★　masako461さんへ

spiky09 さん

●｢写真の上に、アイコンを乗せる｣
これ、したかったんです！
ありがとうございます、ぜひ使わせていただきます♪

★へ～、そうだったんですか＾＾
私は写真の上にアイコンを乗せるって、どんな時に使うんだろう、と・・・＾＾；
デザインにまったくうといもので＾＾；
masakoさんのページも、とっても可愛く出来てますね。
今回のタグは、どんな風に使われるのでしょう。楽しみです。＾＾
上手く行かなかった時や、もっとこうしたい、という時、ぜひ気軽に声を掛けて下さい。

●画像倉庫がいっぱいになって、infoseekのフォトアルバム使いました。
その画像で昨日日記を書いたんですが、今までのと画質が全然ちがいます。
８枚目はそのまま貼って、１～７枚目はノイズ処理して貼ったけど
何だかいまいちきれいじゃない。
spiky09さんのワンチャンの写真けっこうきれいに写ってますが
何か方法あるんですか？

★う～～～ん、、、、元の画像と見比べないと、
どれくらい変化したかが分からないのですが、
確かに、これまでの写真より、色がハッキリしていない様です。
それと、シャープさに欠けますね。

　今までと同じ鮮明さだったのに、
保存場所を変えたら、画像が変わってしまった、という事でしょうか。
『infoseek』などは、元の画像ではなく、縮小された画像を呼び出して
貼る事になるので、それによって鮮明さが変わる事は有り得ますね。

　ちょっと実験してみます。しばらくお待ち下さい。＾＾； (2005.10.27 22:12:21)

返事を書く

★　猫の机さんへ

spiky09 さん

テーブルとかまだまだ使いこなせないのですが、
今回も勉強になりました～。

★色々できるのですね。
私は文章を整理して書くのに精一杯で、デザインはほとんどしません＾＾；
紹介しておきながら、まったく使ってませんｗ
いつか使う時もあるだろう、という位に思ってます。

　デザインにセンスのある方は、本当に羨ましい。
こればっかりは、本当にセンスですね。
紹介したタグで、見事にデザインされているページを見ると、なんだか、ため息が出ます。
かなり高度な技を紹介しているのですが、みなさん上手く使っていらっしゃいます。

　これは、「こうしたい」、「ああしたい」というコダワリがあるからでしょうね。
振り返って自分のページを見ると、実に質素ですｗｗｗ
「アナログ？」というくらい、技のカケラも存在しません。

　質問に答える、つまり、教えている、様でありながら、
その実、デザインの世界、センスの世界、というのを学ばせて頂いています。 (2005.10.27 22:22:13)

返事を書く

★　marieveさんへ

spiky09 さん

●これ使えるといいですね。
先日の字の色変えるのと一緒に♪

やっぱり家庭教師ー（Ｔ△Ｔ）！！！

★あははｗ
報酬は、猫１時間撫で放題、から応相談、でいかがでせうｗ (2005.10.27 22:26:37)

返事を書く