FireBugであれこれやって、変更箇所をコピペする前に、「あれ、こっちのページではどうかな?」とリンクをクリックしてしまい、全ての編集がなかった事になり、うぉおおおおおおおおおとなった事がありますよね?
勉強中の場合は「ああ、神が練習する機会を与えて下さった」と悟りを開くのもアリですが、急ぎの仕事の場合はそうも言ってられません。
そんなFirebugの事故を未然に防ぐ方法を思いつきました。(既に誰かが思いついているでしょうが気にしません。)
方法1:全てのaタグにtarget=”_blank”を書いておく
こんな感じです。
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- 元の記述 --> <ul> <li><a href="example.com">メニュー1</a></li> <li><a href="example.com">メニュー2</a></li> <li><a href="example.com">メニュー3</a></li> </ul> <!-- 以下のようにしておく --> <ul> <li><a href="example.com" target="_blank">メニュー1</a></li> <li><a href="example.com" target="_blank">メニュー2</a></li> <li><a href="example.com" target="_blank">メニュー3</a></li> </ul> |
これで、不用意にリンクをクリックしても、新しいタブが開くので「やっちまった!」事故が防げます。
もちろん、作業が終わった後で、「 target=”_blank” 」は置換して消しておきましょう。
方法2:jQueryで新しいタブでリンクを開くようにしておく
jQueryでちょろっとコードを書いておくと、上記の方法のように、後でaタグを掃除しなくても済みます。
1 2 3 4 5 6 7 8 9 10 |
<!-- jQuery本体は必要なら読み込む --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <!-- 以下を開発時だけ記述しておく --> <script> (function($){ $(function(){ $("a").attr("target","_blank"); }); })(jQuery); </script> |
この場合は、デザイン後に上記のscriptの記述を削除すればOKです。
それでは良いデザインライフを!(なんだそれ?)