はてなブログのプロフィールに Qiita と Twitter のリンクを追加する

サイドバーのプロフィールを便利にしたかったのでしてみた。サイドバーには任意のリンクを表示する項目も追加できるが、場所を取るので今回は使わなかった。

このようにはてなIDの横に Qiita と Twitter のIDを並べることにした。プロフィール部分はユーザーがカスタマイズできるようになっていないため、 JavaScript でガッと書き換える。

はてなブログのダッシュボードを開き、「設定＞詳細設定＞headに要素を追加」に以下のコードを書いた。

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
// <!--
jQuery.noConflict();
jQuery(function() {
  jQuery('.hatena-module-profile a.hatena-id-link').after(
    ' / <a href="http://qiita.com/uasi">' +
    '<span class="fa-stack" style="font-size: 50%">' +
    '<i class="fa fa-square fa-stack-2x"></i>' +
    '<i class="fa fa-search fa-stack-1x fa-inverse fa-2x"></i>' +
    '</span>' +
    'uasi</a>' +
    ' / <a href="https://twitter.com/uasi">' +
    '<i class="fa fa-twitter"></i>' +
    'uasi</a>'
  );
});
// Qiita icon is adapted from http://qiita.com/hkusu/items/fda8d8178dd693f95f3c
// -->
</script>

うまくいったので満足。

なお Font Awesome の既存アイコンを重ねて Qiita のロゴ風にする技はFontAwesome - Font Awesome で Qiitaロゴっぽいアイコンを表現 - Qiitaを参考にさせていただいた。