Project EulerのProfile Imageをはてなブログに表示させる

Project Eulerとは

プロジェクト・オイラー(英: Project Euler、名称はレオンハルト・オイラー由来)は、数学やプログラミングなどに興味を持つ大人や学生が主な利用者であり、プログラミング (コンピュータ)による一連の計算問題の解決を目的としたウェブサイトである。

プロジェクト・オイラー - Wikipedia より引用。 数学的な問題が与えられ、回答を入力すると正誤を判定してくれる。主にプログラミングを利用して解くことを想定されている(ソースコードの提出は必要ないので、手計算など他の方法で解くことも可能)。

回答数に応じてレベルや称号が与えられ、マイページから確認できることも特徴の一つ。プロフィール画像として、ユーザ名とレベルを表示した画像を生成してくれるので、これをはてなブログのサイドバーに表示させたい。

やること

  1. プロフィール欄がサイドバーに表示されるテーマに変更。
  2. サイドバーにHTMLモジュールを追加。
1. テーマ変更

はてなブログのテーマによっては、プロフィール欄がページのボトムに表示されるものがある。ページトップに表示させるためには、プロフィール欄がサイドバーに表示されるようなテーマを選択する必要がある。
変更するには、ブログ管理画面から「デザイン」を開き、表示されたデザインの一覧から選択する。今回は「Neutral」を選択した。

2. HTMLモジュールの追加

Profile Image は各ユーザごとにURLで提供されており(URLは https://projecteuler.net/profile/<Project Eulerのユーザ名>.png )、Project Euler のAccountページから確認できる。このURLをHTMLモジュールで表示させればよい。
HTMLモジュールを追加するには、ブログ管理画面から「デザイン」を開き、「カスタマイズ(🔧のロゴ)」タブに切り替えた後、「モジュールを追加」から「HTML」を選択する。入力欄が表示されるので、タグでURLを指定して「適用」を押すとモジュールが追加される。
追加後、左側に表示されているモジュールの一覧で、表示させたい位置にHTMLモジュールを移動させる。 f:id:gumfum:20210104011123p:plain

これで完了。現在、ブログの右側サイドバーにバッジが表示されているはず。