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

望月いちろうのREADME.md

書き溜めておいた技術記事や旅行記のバックアップです。

はてなブログにGitHubのウィジェットを埋め込む方法

はてなブログ GitHub

f:id:mochizuki_p:20161019164452p:plain

GitHubでの活動状況を一目で確認できるようなウィジェットを利用したいと思っている方は実は多いのではないでしょうか?

有志が便利なウィジェットを作成してくれたようです。

github.com

注:GitHub公式ではなくAPIを利用してデータを取得しているのでアクセス数が多いサイトでは表示が止まってしまう可能性があります。

使い方

とても簡単です。

GitHubアカウントのユーザー名を取得する

あなたのGitHubアカウントのuser_nameをあらかじめ用意してください。

埋め込みコードにユーザー名を指定してWebページの埋め込みたい箇所に設置する

以下の埋め込みコードをウィジェットを表示させたい箇所に設置します。data-userにはあなたのGitHubアカウントのユーザー名を指定する必要があります。 僕の場合、user_nameはmochizuki-ichiroですので、これをdata-userの値として指定します。ここは環境に合わせて適宜変更してください。

<div class="github-card" data-user="mochizuki-ichiro"></div>
<script src="http://cdn.jsdelivr.net/github-cards/latest/widget.js"></script>

そしてあなたのはてなブログの管理画面に移動してデザインをクリックします。

モジュールで新規作成をクリック

f:id:mochizuki_p:20161012222638p:plain

画面左側にある2番のアイコン(工具)をクリックして、メニュー中程にあるサイドバーをクリックします。 そしてメニューからモジュールを選択して新規作成をクリックします。

HTMLを選択して任意の名前をつけて先ほど保存した埋め込みコードを貼り付け適用をクリック

f:id:mochizuki_p:20161012222646p:plain

モジュールを追加のポップアップが表示されたら下部にスクロールしてHTMLをクリックします。そして大きな方のテキストボックスに先ほど取得したウィジェットの埋め込みコードをペースト、小さい方のテキストボックスには任意の名前をつけて下さい。ここではGitHubとしておきました。

f:id:mochizuki_p:20161019164056p:plain

デフォルトのデザインは無機質すぎるような気がしますので僕はdata-theme="medium"を追加してデザインを変更しました。

f:id:mochizuki_p:20161019164044p:plain

<div class="github-card" data-theme="medium"
 data-user="mochizuki-ichiro"></div>
<script src="http://cdn.jsdelivr.net/github-cards/latest/widget.js"></script>