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です。
それでは良いデザインライフを！（なんだそれ？）
これをやると、別のページにジャンプしてもFireBugで変更したcssはリセットされないんですね～。
これで「うおおおおおおおお」が無くなるのですね。やったー。
試しにjQueryの方でやってみました。http://nobu-69.com/test_site/nolimits201304/nyukaigo.html
こちらの方が楽でいいですね。別ページに行こうとしてクリックすると
別タブが開くので、Firebugで編集したページはそのまま残ります。
でも、CSSになれてない人は、何度か「うおおおおおおおお」を経験するのも色んな意味でアリだと思います。ｗ