週末ライダーの朝は早い

週末ライダーのバイク以外のメモ

はてなブログで複数ブログを作ったときに、各ブログで自分のアイコン画像を変える

はてなブログではブログを複数作ることができて、それぞれで独立したドメイン、デザインにすることができます。
ただし書いている人ははてなIDに紐づくので、/about で表示されるプロフィールページや、ウィジェット内のアイコン画像、コメント欄、はてなスターのアイコンは同じものになります。
ブログを別にするということは、書いてる人を表すアイコンも別々にしたいものです。中の人は同じでも。

実際、自分の場合はバイクブログがメイン(一応)なので、はてなIDのアイコンはヘルメット姿のバックショットです。しかしながらこのブログではバイク以外のことを書くので、できればアイコンは別にしたいな と思うわけです。
統一しました。

現状ではブログごとにアイコンを変えるような設定はできないようなので、無理やり変更してしまいます。

上のソースの

  • var icon = 'https://path-to-icon'; の部分を、使いたいアイコン画像のパスに
  • var hatenaid = 'michimani'; の部分を、自分のはてなIDに

それぞれ書き換えて、 ダッシュボード > デザイン > フッター に貼り付ければ、既存のアイコン画像を指定した画像で置き換えることができます。(<script>タグで囲う)

3つブロックがありますが、それぞれで プロフィール欄、コメント欄、はてなスター 部分の自分のアイコンを置き換えています。

コメント欄とはてなスターに関しては、読み込み・レンダリングにタイムラグがあるので、 var toc; var tos; でそれぞれ書き換えまでの時間を設定しています。
正直ここの値はページの読み込み速度とかに影響するので、適当な値を入れてちょうど良さそうな時間を探ってください。(単位はミリセカンド)
ちなみに、コメント欄の描画のほうが、はてなスターの描画より速いっぽいです。

サイズ調整とかはデフォルトのスタイルシート内で設定されているので、指定する画像のサイズは気にしなくても良さそうです。が、最低でも 100px × 100px くらいの大きさはあったほうが良いかもしれません。

あと、将来的にはてなブログがSSL化したときのために、指定する画像へのパスは http~ ではなく https~ にしておいたほうがいいです。
(早くSSL化してくださいお願いします)

当たり前ですが、これは自分のブログ内での表示の話です。
他の人のブログのコメント欄表示されるアイコンは、はてなIDに紐付くアイコンのままです。

Twitterフォローお願いします

Twitterのアカウントを分けたので、よかったらフォローお願いします。

twitter.com