読者です 読者をやめる 読者になる 読者になる

あのぉ.. そゆのは別なとこでやって欲しいんだけど

tech

はてなブログのコンテンツ上のリンクは、別タブ/ウィンドウで展開してもらうようにした、と言う話です。

Pissed off
Pissed off / Niklas Hellerstedt

jquery を挿し込むことで、これを実現することにしました。 あと、いつもの得意技、実は jquery、わかってません。間違っていたら誤ります、ご指摘を。

各々のブログに入り、左メニュー[設定] > [詳細設定]シート の [headに要素を追加] ボックスに、こんな感じのを挿し込み、[変更する]。;

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
    $('.entry-content p a').not('[href^="#f"]').attr({'target':'_blank'});
    $('.entry-content blockquote .via a').attr({'target':'_blank'});
});
</script>

Document が Ready 状態になったタイミングでa タグに target="_blank" をババッと挿し込む、と言うストーリーでしょうか。

ちなみにこのブログは全て markdown で書いてきています。
だから、の話かもしれません。*1

背景

はてなブログいじっていて「くそっ」って思う事のひとつに、リンク先ページが、"必ず" 同じページに展開されるところがありました。

まぁ個人的な話なのですが、一回移動すると、もりもり潜っていく悪い癖あって元の位置を見失い、キッとなることがしばしば。
元居た場所が "どこか分かっている" だけに、サッと戻れることができないことが何気にストレスフルだったりするのです。

勿論はてなブログだけの話に限った事ではないのですが、
この度、自分のページでは「ソレ止めよう」考えて、勉強がてら、模索して見る事に。

で、同じような事を感じている方は、多くは無いですが幾人かいらっしゃるようで。 ;

それを、こんな風に「target="blank"」を入れてやる。

うんうん、そうだよね、と読み進むと...

すると、新しいウィンドウでリンクが開かれるようになる。これで完了。

って。お、おいっ! お、終わり? www

いやいやいや。毎度手で、"ピチっ" てのは心折れるわー、どうしたら良いのかしら、なんて悶々としながら酒を取りにいく途中で思い出したのです。
随分と前の出来事になってしまったけど、仕事でモックアップやらサンプルを用意するのに数回使った jquery のことを。

確か、こう言うのはお手のモノだったような気が。

jquery 使ってサボらせていただく

結構さっくりと色々見つかります。最初からこう探せばよかったと... そんなん中で。 ;

» markdown記法でリンクをtarget= _blank にする - エンジニアをリングする
» k note BloggerでのjQueryの使い方

この辺りを見ればほぼ答えが、まるまる出てました。
感謝です。

で、上述のようなコードに。

取りかかる前に気になっていたのは、
ページ上のすべての <a> 要素が target="_blank" を挿し込む対象でないと言う事にはちょっと注意しなくては、と。 ;

  1. コンテンツ以外のエリア
  2. "続きを読む" のリンク
  3. 脚注のリンク

このリンクは別ウィンドウ/タブで開いて欲しくないアイテム。
1 つ目は、気にしない、これは良いかなと思った、と言った方が正しいかも。

生成される html をボーっと見ていると、;

  • メインのコンテンツ全体は entry-content と言うクラスを張っているみたい。
    → と言う事は、1 の問題は解決。
  • コンテンツの各パラグラフは p 要素なので、.entry-content p
    → "続きを読む" は、幸い p タグで囲まれていないので 2 は回避。
  • 脚注については、今回は href 属性をみることに*2.not('[href^="#f"]') を入れ "#f" で始まるのは無視するようにしました。
    → これで 3 は解決。

と言うことで、
各人のダッシュボードから、ターゲットのブログのポータルページ ? へ入り、左メニュー [設定] > [詳細設定] シート の下の方にある [headに要素を追加] を当該のスクリプトを記載する、となります。

これが正解かどうかは、本当のところはよく分かっていません...
とりあえず、思い通りのことは出来ている、という事で終わっています。

何か問題が発生しましたら、個人の責任で。と一応。

途中で、何かこういうの見つけて気になってきたんですけど。;

» hatena blogで実行しているjQueryが動かなくなっていた(のを直した) - rochefort's blog

言っていること何となく理解はできていると思っているのですが、自分の解釈が果たして正しいのかは不安。

で。このケースでは特に気にしなくても良いみたいです。
と言うか、動いているから、と言うだけの根拠なのですが。
もしかして悪い事やっていたりしたりして...

でしたら、ごめんなさいします。

おしまい。

*1:もし他の編集モード、[設定] > [基本設定]シート の [編集モード] でしょうか、で書いているのならば、こんな障害には遭遇しないみたいです。実際に試した事ないので本当のところは分かっていません。

*2:name 属性も考えたのですが、呼び元は 'fn{番号}'、呼び先の脚注側は 'f{番号}'、と "f" ひと文字では心もとないので、href 属性を捉える事に。
あと、href 属性でとらえる場合、ハッシュ "#" だけの方が汎用的かも、とは思ったのですが。今回は止めとくことに。