リンクがペコッとする カスタマイズ
本日は、めずらしく1日で２つ目の記事更新。わぉ！
なんて、モタモタしてるうちに日付は変わってます^^；
朝、自治会の掃除で、４０分ほど外にいたのですが、あまりの寒さに指先がしびれておりました。megです。
たまには主婦らしい仕事もしております。
お気づきの方、いらっしゃるでしょうか？
このブログのリンクにすこぉし変化があることに。
今日は、お金の泉 人生勝組の法則の大吉さんのところで仕入れてきました、地味にクリック促進しちゃう様にカスタマイズしちゃおう♪ という記事のリンクのカスタマイズのご紹介です。
このネタの大元の仕入先は、ブログアフィリエイトで副業からドーン！のひでまろさんのところのリンクをマウスでポイントすると動くカスタマイズです。
そして、そのさらに元になるのはAllAboutでした^^
ひでまろさんのブログ、最近テンプレートが変わってすごく春らしくてステキなブログになてましたよ^^
私は、背景色は白が好きなので、とっても気に入りました^^
地味ですが、”これはリンクですよ～”とアピールしてくれることでしょう^^
答えはタイトルの通り。
マウスがリンクの上にのると、リンクがペコっとしませんか？
下記のリンクの上にマウスを移動してみてください。
主婦がアフィリエイトで月収６０万円の印税的収入を狙うブログ
ペコっとしました？
このリンクのとび先（別窓で開きます）は・・・
ふふふ^^
このブログです^^；
実は、タイトルの変更を考えているところなのです。
このタイトル、今のところ第一候補です。どうでしょう？
おととと。話がそれてしまいましたが、やり方は、超が付くほどカンタンです。
ＣＳＳ（スタイルシート）の記述の中に、
a:hover{position: relative; top: 1px; left: 1px; }
というのを加えるだけでＯ．Ｋ．！
あなたの使っているブログのテンプレートのＣＳＳの記述の中の、a:hover{ } という部分を探してみてください。
その部分に、position: relative; top: 1px; left: 1px;というのを付け加えればリンクはペコっとしてくれます。
これだけで、”私はリンクですよ～”って、自らアピールしてくれますよ^^
ちなみに 1px の数字を大きくすると、リンクの凹みも、さらに大きくなります。
ブログって、ほんとに色んな情報が、無料で沢山流されてますね～。
最近つくづく感じます。
知識をためるのはすごく大事だけど、それを実行しないでとっておいても、わすれちゃうだけですね。
知識の収集は、自分が実行出来る範囲でしていかないと、パニックに陥ります。私のように（笑）
追記
説明不足で、ご質問をいただいたので、補足しますね。
私のCSSは、こうなってます。
もともとのCSSは
a:hover{color:#FF6666;text-decoration:none;}
上記のように、a:hover（リンクにカーソルがのったときの指示）{color:#FF6666;（色はピンクに）text-decoration:none;（テキストの下線・上線・打ち消し線・点滅はなし）}
という設定になっています。
今回のカスタマイズでは、リンクをペコっとさせたいので、
a:hover{color:#FF6666;text-decoration:none;position: relative; top: 1px; left: 1px; }
というように、最後にposition: relative; top: 1px; left: 1px;を付け加えます。
構う部分は、CSSのbodyから始まる
body< この中にある a:hover{の記述の部分です。 >
簡単に補足しましたが、ご理解いただけましたでしょうか？
これを教訓に、もっと分かりやすい文章の書き方を心がけたいと思いました。
ご質問くださった方。本当にありがとうございましたm(_ _)m
Posted by アフィリエイト主婦 : 00:46 | コメント (24) | トラックバック (1)
テーブルタグを使ってみましょ＾＾
めずらしく こんな時間に投稿してます。（現在時刻 午前１時１５分）
架空請求初体験！してしまったmegです。
しかも、そのハガキ、旧姓で実家に来てました。
私、結婚して もう４年以上経つんですが・・・？
さて、今回は 出来ないことをいつまでもそのままにしててもしょうがないので、テーブルタグを使えるようになろう！と思い立って、やっと出来ました^^；
かかった日数 ２日（一日３時間くらい）です。（時間かかりすぎ）
まだ本を買っていないので、ネットで調べていたんですが、
”私がしたい、「画像を背景に組み込むタグの組み方」を説明してくれているところが全然見つからない！”
と言う感じで １日近く使ってしまいましたが（その間、自己流で組んでみるも、全て失敗。当たり前ですね。）ものすごく、いろんなパターンのテーブルをそれぞれに説明してくれているサイトにめぐり合えました。
ここって、みなさんもう知ってる所なんでしょうか？
タイトル通り、「超初心者」でも、わかるように書かれています。
超初心者のためのホームページ作成講座のおかげで、「背景に画像」を入れたテーブルを作ることが出来ました^^
何だか、テーブルタグって難しそう と勝手に思ってましたけど、コツが分かればいくつでも出来そうです。
キホンは
＜table＞で、書き始めて、
＜tr＞text＜/tr＞で、段を作って、
＜td＞text＜/td＞で、横の分割をして、
＜/table＞で終わる。
というだけのものです。
注意！
＜は、実際には半角の<に変更しないと機能しません。
タグにはさまれてる”text”の部分に入れたい文字などを入れてみれば 完成です^^
ちなみに、ここのブログで使っているものは、記事にのせるにはものすごく長いhtmlになっているので、簡単なものを作ってみますね。
＜table＞
＜tr＞
＜td border cellpadding="1" bgcolor="yellow"＞
＜tr＞＜td＞1＜/td＞＜td＞2＜/td＞＜/tr＞
＜tr＞＜td＞3＜/td＞＜td＞4＜/td＞＜/tr＞
＜/table＞
注意！
＜は、実際には半角の<に変更しないと機能しません。
cellpadding="1"
というのは、セルとセルの中の文章との間隔を１にするということ。
bgcolor="yellow"
というのは、テーブルの背景色を黄色にする、ということです。
と入力するとこうなります。
| 1 | 2 |
| 3 | 4 |
どうですか？
こういう感じで、超初心者のためのホームページ作成講座では、用途別に細かく説明してくれているので、全くの素人でも、簡単にテーブルタグを使って、ブログ（サイト）をカスタマイズすることができますよ^^
cssや、htmlのことで、分からないことがある方は、一度訪れてみてください^^
テーブルだけでなくて、他のことについても勿論、同様に細かく説明されてますのでオススメです。
超初心者のためのホームページ作成講座の存在をもっと早くに知ってたら、もうちょっと時間を掛けずに出来たと思います^^；
カスタマイズしたい方は、ぜひ活用してみてください^^
う～ん。２日。
まだまだ初心者です。
Posted by アフィリエイト主婦 : 02:08 | コメント (12) | トラックバック (1)