ブログアフィリエイト

• シェア
• 
• 
• 
• 

こんにちは、トリでございます。

 

最近の記事を見て頂けるとわかると思うのですが、

ちょっとしたギミックとか加工にハマり気味の管理人です。

 

他の方のブログを見ていると、

 

「ん？これはどうなってるんだ！？」

 

とか

 

「おぉっ！これ、私もやりたい！」

 

となって、すぐカタカタと検索してしまうんです。

で、その方法を見つけて、うまく出来た時はガッツポーズ。

すぐみなさんとシェアモードになります。

 

たまにどうしてもわからなくて、

 

「すみませ～ん・・・お宅のそれ、どうされてるんですかねぇ？」

 

なんて、ドアを叩くこともあります。

もしみなさんのドアもノックされましたら、

生暖かく迎え入れて下さると嬉しいです（笑）

 

 

ロールオーバーの方法

今回ご紹介する技その１は、「ロールオーバー」と呼ばれるものです。

みなさんも一度は目にしたことがある、カーソルを乗せると画像が変わる技です。

 

 

↓これです。カーソルを乗せてみて下さい。

 

 

 

どうでしょう？見たことあると思います。

実はこれ、画像タグにある属性を足すだけで可能なんですよ。

 

そのタグとは、こちら。

 

 

簡単にいうと、画像タグの中で、

カーソルを乗せていない時と乗せた時、それぞれの画像を指定してあげる感じですね。

 

ちなみにタグとは、サイトやブログを構成している骨組みみたいなもので、

属性とはそのタグに付加するオプションのようなものです。

このタグは一つでも記号が抜けると機能しませんので、ご注意下さいね。

 

私は " と ' がよく見えてなくて、何度やっても上手くいかなくて、

「おっかしぃなぁ～」と1時間くらい唸っていたんですが、

ようやく画像URLの後の ' が一つ抜けていることに気づきましてf^_^;

どんな些細な記号さえも落としてはならぬという、タグ界の厳しさを学びました。

 

 

コメント表示の方法

その２の技は、カーソルを乗せた時にコメント（補足説明）が出る方法です。

 

 

↓こんなのです。

 

 

これもタグをちょちょいといじれば表示可能です。

そのタグとは、こちら。

 

 

とってもシンプルです。

画像タグの中にコメントを入れるためのtitle属性を挿入するだけです。

 

ちなみに、画像が表示されない時に、代わりに文字が表示されるようにする時は、

alt属性（代替テキスト）というものを使います。

 

 

↓こんな感じです。

 

 

 

参考までにタグは下記の通り。

 

 

画像のコメントや補足説明にはtitle要素を、

画像のタイトルや名称にはalt要素を使うと覚えておきましょう。

 

 

ちなみに、title属性は文章にも付けることができますよ。

試しに書き文章にカーソルを置いてみてください。

 

 

カーソルを置いてみてね♪

 

 

title属性は何かのタグに付属する形で使うものなので、

それ単体で使うとtitleタグとしてまた別の機能になってしまうので、ご注意下さいね。

 

ちょっと後半ややこしい話になっちゃいましたが、

サイトやブログはタグと呼ばれるもので構成されていて、

そこに属性を足せば機能が追加出来るんだよ～くらいに思っておいて下さい＾＾

 

 

• シェア
• 
• 
• 
•