これは、便利!新スキンのブログ記事一覧ページが使いやすくなったんじゃない? | 雷牙@448★のブログ

雷牙@448★のブログ

アメブロのカスタマイズなどのテストなどをおこなっています。

旧ベーシックなどを配布終了にしたのは素直に頷けないですけど、

新スキンではナビゲーションなどのユーザビリティが向上したのも事実です。

記事一覧のページも良くなったんではないでしょうか・・・

ブログ記事一覧

最新の記事一覧・月別記事一覧・テーマ別記事一覧をタブで切り替えて表示します。




今回の、お遊びついでのカスタマイズはこの記事一覧ページからの記事へのリンクを

別のタブ(ブラウザの設定によって違いますがウィンドウの場合もあります。)で開くように、a要素のtarget属性に値を指定してやりました。



別のタブ(もしくはウィンドウ)で開く場合はtarget属性の値に『_blank』を指定してやる以外に任意のウィンドウ名(フレーム名)を指定することでも別のウィンドウ(もしくはタブ)が開きます。

この場合は、『_blank』を指定したときのように次から次へとタブ(もしくはウィンドウ)が開く事は無く名前がつけられたタブ(もしくはウィンドウ)にリンク先のページが表示される事になります。

すでに、名前が付けられたタブ(もしくはウィンドウまたは、フレーム)があれば新たに開く事はないので一覧ページの使い勝手が多少はよくなるかなっと思いました。

名前はなんでも良いのですが『new』にしてあります。(変えたい場合は下記のコード中の該当文字列を変更して下さい。)

jQueryを使いました。

すでにjQueryを使っているばあいは『$(document).ready(function(){』~『});』の間に下記のコードを加えれば、適用されると思います。

  $('.contentTitleArea a.contentTitle').attr("target","new");


追記:2011-08-15
間違いってわけではないですけどイテレーション(繰り返し)の処理の記述はわざわざする必要がないので訂正しました。



このブログでは、他の処理とかかましてるので即席で上記コードを書きましたので実際の稼動テストはまだしていません。
(うまくいかなかった場合はお知らせいただければ幸いです。)

良くわからない場合は、下記のコードをフリープラグインに入れてみてください。
(jQueryのreadyメソッドはかなり便利で他のコードとぶつかる事はほとんどないです・・・私が今まで試したものではですけど・・・)

<script type="text/javascript">
$(document).ready(function(){
$('.contentTitleArea a.contentTitle').attr("target","new");
});
</script>


新スキンで、まだjQueryを使ってなくてこれが初めての場合は下記のコードをフリープラグインの先頭に加えてください。
(jQueryを使うスクリプトを新スキンで使う場合は先頭で読み込む必要があります。)

追記:2011-08-20
システム側の読み込むjQueryに上書きされてしまうので、せっかくGoogle AJAX APIを利用して新しいバージョンのライブラリーを読み込んでも意味をなさなくなります。
(それを気にしなければ問題ないですけど、コードを修正します。)
これは、下記の記事を拝見して考慮しました。

新しいバージョンのjQueryが使えない?新デザイン『CSS編集用デザイン』

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<script type="text/javascript">(myTmp=jQuery)(document).ready(function(){$=jQuery=myTmp;});</script>