RawGitとGithub wegetを使ってはてなブログでGithubリポジトリへのリンクを素敵に表示する

ブログを少しずついい感じにカスタマイズしていこうと思います！
こんにちは、新年のみぃむ( id:ml_myme )です！ｗ

はてなブログは元々リンクを貼り付けると上手く展開して埋め込めるようになっています。
中でもみぃむが良く利用するのがGithubになっているので、はてなの埋め込み機能ではなく、Githubのリンクは特別に素敵に表示してみようと思います。

ウィジットを利用してみる

github.com

上記jQueryのGithubリポジトリ用ウィジットを利用しようと思います。
これを利用するにはjQueryを読み込む必要があります。

はてなブログはデフォルトで入っているのかな？順番とかどんな感じかな？というのがわからなかったので、jqueryはCDNにあがっているものを利用しようと思います。

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

そして、GitHub-jQuery-Repo-Widgetを利用したいのですが、このJavaScriptをそのまま書いてもいいのですが・・・・今回はRawGitを使います！
RawGitにアクセスして、先ほどのウィジットのmin.jsを入力します。

するとアクセス用のCDNが用意されるので、そちらを埋め込みます。

<script type="text/javascript" src="https://cdn.rawgit.com/JoelSutherland/GitHub-jQuery-Repo-Widget/master/jquery.githubRepoWidget.min.js"></script>

これで準備完了。

利用する時はこんなふうにリポジトリの名前を記載してあげればいいです！

<div class="github-widget" data-repo="[ユーザー名]/[リポジトリ名]"></div>

実際に埋め込んでみます。

<div class="github-widget" data-repo="JoelSutherland/GitHub-jQuery-Repo-Widget"></div>

はてなの埋め込み機能を使うと

github.com

こう表示されていたものが・・・・・

素敵！

まとめ

はてなブログのデザインカスタマイズから、フッターに下記の２行を追加するだけでウィジットが利用できるようになるよ！！

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/JoelSutherland/GitHub-jQuery-Repo-Widget/master/jquery.githubRepoWidget.min.js"></script>