かといって画像リンクにaltを設定するよりはテキストリンクの方が検索エンジンからの評価は高いようですから、SEOを考えるならやっぱりテキストリンクが最善なんだと思います。
テキストリンクだけど少しでも印象を強くしたい方に、今回試してみたスクリプトは結構いいかもしれません＾＾
たくさん並べるとちょっとおもしろいです。
こちらは画像ですがマウスを乗せるとこんな感じになります。
実践ページはこちら
【jQuery】スムーズにアニメーションするテキストリンクを試してみた
jQueryやprototypeなどの外部ライブラリを使えば、今まで大量のコードを書いて表現していたようなものが結構簡単に出来てしまうので本当にありがたいなぁと思います。
今回のものもあまりに簡単なのでPHPで移動速度と移動時間を変更できるようにしてみました。
PHP部分はあくまで実験用ページの為に作成したものなので必要ない人がほとんどでしょうから本来の動き（Javascript）の部分だけ説明します。（PHP部分が知りたい方は別途説明しますｗ）
１．jQueryのダウンロード＆設置
jQueryのjsファイルはこちらからダウンロード。
ダウンロードしたファイルは任意のディレクトリへアップロードしてください。
２．CSSを記述
適用したいテキストリンクの設定を書きます。
<style type="text/css">
.nudge{display:block; margin:5px 0 5px 0; width:400px;}
</style>
設定内容は適宜変更してください。
私はここではブロック要素、上下のマージン、リンク幅を設定しました。（テキストリンクのベースの設定は別のCSSでしてあります）
３．jQueryを読み込むタグと実際の動作部分を記述
jQuery読み込み
<script type="text/javascript" src="（アップロードしたディレクトリ）/jquery-1.2.6.min.js"></script>
動作部分
<script type="text/javascript">
<!--
$(document).ready(function() {
$('a.nudge').hover(function(){ //mouse in
$(this).animate({ paddingLeft: '100px' }, 500);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 500);
});
});
//-->
</script>
動きを変えるために変更する箇所は
・移動距離 100px
・移動速度 500（2箇所）
です。
実際にどう変わるかは
【jQuery】スムーズにアニメーションするテキストリンクを試してみた
こちらで距離と速度を変更してみてください。
４．aタグの設定
通常のテキストリンクにclass="nudge"を追加します。
例：
<a class="nudge" target="_blank" href="http://hoge.com/hogeracho.html">テキストリンク文字列</a>
設定は以上です。
５．最後に
動きを作るものなので動きの感想になりますが、かなりスムーズにうねうねと動きますね。
実践ページはリンクが10個ほどですが、もっとたくさん配置して上下にマウスを動かすともっとおもしろそう（笑）
それと、リンクひとつに対して1回の動きが終わる前にマウスを一回離して再び乗せると次の動きがストックされます。
なのでリンクが並んでいる所でマウスを上下に何回か往復させると、マウスを離してもしばらく動き続けます。
テキストリンクに普通のhoverを設定しただけではつまらない方におすすめです＾＾
何かしら参考になりましたらクリックをよろしくお願いします
いつも的確なアドバイスありがとうございます。
こういった遊び心も入れながら楽しみながらサイト運営するのも楽しそう♪
いつも勉強になります。
リンクなんかに良さそうですね♪
でも、こり出しちゃうと
とことん、やってしまう
タイプなので・・・
導入は見送ります。 m(_ _*)m
また、面白い情報を
楽しみにしています。
アニメーション動きがスムーズでいいですね！
実はわたしの今のブログのトップ絵は
雪が降るアニメーションのはずだったんですが
失敗してしまいアニメになりませんでした。笑
残念！
相変わらずカタツムリ速度であれこれ試行錯誤しています。
これからもよろしくです。
メリークリスマス！
愛美さんのブログを読んでSEOについてするべきことを再確認させていただいています＾＾
こちらこそありがとうございます。
＞遊び心
すごく大切な事だと思います。
このブログの左サイドバー「ウェブ技術の実践」にも実際に組み込んでみました＾＾
>> 葵さん
時間が空いた時にでも試してみてください＾＾
ウェブサイトに使えそうな技術はこれからも実践してレポートしていく予定です。
>> penpenさん
アニメーション動きませんでしたか。
多分ちょっとしたことが原因なんでしょうね。。
いつの日かしんしんと降り積もる雪のアニメーションになっている事を楽しみにしています＾＾