はてなブログのMarkdown記法で好きなタグにページ内リンクできるようにする【JavaScript利用】
はてなブログのMarkdown記法でブログ記事を書いている時、ページ内リンクの部分だけhtmlを直に書かなければならなかったので、Javascriptを利用して簡略化してみました。
具体的には、
- お好みのタグにJavaScriptでidを設置。
- Markdown時にid名をリンク先として記載
という流れになります。
個別のエントリーでのみ動作します。一覧やプレビューでは動作しません
以下のコードを【設定】->【詳細設定】->【headに要素を追加】に追加します。
$(document).ready( function () {
var href = window.location.href;
if (href.indexOf('/entry/') != -1) {
var target = 'h2';
for (var i = 0; i<$(target).length; i++) {
var id = 'id' + i;
$(target).eq(i).attr('id', id);
}
}
})
変数targetには、お好みのタグを指定します。 結果としては、指定されたタグにidが追加されます。 idの値は、id + 0から始まる連番となります。
最初のif文は、個別のエントリーのみに対応させるためにurlを取得して判定しています。
以下は実行テストです。
Markdown側は以下
[h2に飛びます その1](#id0) [h2に飛びます その2](#id1) ## リンクから飛んできました その1 ## リンクから飛んできました その2
リンクから飛んできました その1
リンクから飛んできました その2
はなてブログでリンク先を新しいタブで開く（ページ内リンクは新しいタブで開かない）方法
以下のコードを【設定】->【詳細設定】->【headに要素を追加】に追加する
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="JavaScript">
$(document).ready( function () {
$("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');
})
</script>
以下を参考にさせていただきました。
markdown記法でリンクをtarget="_blank"にする - エンジニアをリングする
コード的には、
1行目で、jQueryを読み込み
3行目で、DOMがロードされて解析などが可能になった時、関数を実行
4行目で、自分のホスト名でない場合、target='_blank'を追加
という感じだと思います。
はなてブログで Markdown 記法を利用する方法 その2
上記で、MarkDown記法の設定はできたのですが、ブログのダッシュボードで
【設定】->【基本設定】
と移動するとMarkdownモードというチェックボックスがありました。
チェックしてしまえば、記事を書く時にMarkDown記法になっているのですね。
ついでに、はなてブログのMarkdown記法でページ内リンクの実装方法も調べてみました。
[移動します](#a) <h2 id="a">ページ内リンクで移動しました。</h2>
のような形になるようです。 Markdown記法ではidを挿入できないようなので、移動先は生のタグを記述してidを設定する必要があるようです。
実際のテストは以下となります。
ページ内リンクで移動しました。
はなてブログで Markdown 記法を利用する方法
Markdown記法に対応しました - はてなブログ開発ブログ とあったので、MarkDown 記法 で記述する方法を確認してみました。
管理画面のメニューにある「編集 見たまま」の右側 三角矢印をクリックすると、Markdownと表示されているので選択します。
問題なく記述する事ができます。
