#ChiroruLab

趣味と日々の雑記録

はてなブログの「プロフィール画像」を変更する簡単な方法。

f:id:chiroru_27:20131217164834p:plain
カスタマイズ第3弾。今回はデフォルトの小さいプロフィール画像を、見やすい別の画像に変更するカスタマイズです。
「ブログ毎にアイコンを変更したい」「サイドバーに合うように大きいアイコンにしたい」なんて時に便利かも?

※プロフィールアイコンを別のものにしたいだけなら、Myはてなのプロフィール設定より変更できます。



どうも、@chiroru_27 です。
今回は、サイドバーのプロフィールアイコンを変更する方法をまとめますよー。

プロフィールアイコンの変更

f:id:chiroru_27:20131217164834p:plain
こんな感じにブログにあった好きなアイコンに変更できます。
複数のブログを作っている場合は、ブログ毎に切り替えても面白いかもしれませんね。

コード&設置方法

今回は少しだけ手順が増えますが、10分程度あれば終わると思います。

下準備:新しい画像の準備

HatenaFotolifeなどに画像をアップロードして、画像URLを準備します。
f:id:chiroru_27:20131217172018j:plain
このサイトの場合では、右上の「リンク」から取得できます。

下準備:プロフィールのモジュールを開く

まずは、ダッシュボードに移動してデザイン管理画面を開きます。
f:id:chiroru_27:20131011185123j:plain
そうしたら、カスタマイズに切り替え「サイドバー」を押して下さい。
f:id:chiroru_27:20131217181917j:plain
あとはプロフィールのモジュールを選んで下さい。

作成:HTMLとCSS

簡単に作れるようにこんなものを用意しました。よかったらどうぞ!
プロフィールアイコンを変更する時に便利なやつ。 - #ChiroruNote
chiroru_27 2 hours ago名前:chiroru (ちろる)ブログを書く時に便利な小物でも。Hatena Blog / Hatena::Diary

HTML

まずはHTMLを用意します。リンク先の「HTML」の入力欄に必要な情報をいれてGet Codeを押してコードを取得して下さい。
その後、さっき開いたプロフィールの「ブログの説明」の先頭に貼り付ければ、こちらは完了です。

追記(2014年1月9日)
設定から画像を非表示にすることで、ムダな読み込み時間を減らせます。
f:id:chiroru_27:20140109222428j:plain

プロフィール画像」の「表示する」のチェックを外す。

リンク先のコードも修正したので、設定しておいて下さい。

CSS

次にCSSです。まずはサイドバーの横幅を測ります。
chromefirefoxを使っている場合は、サイドバーの上で右クリックし「要素の検証」を開き、以下の行を選択して下さい。

<div id="box2-inner">

その後、chromeは「Computed」を、firefoxは「ボックスモデル」を表示させればサイズが確認出来ます。

f:id:chiroru_27:20131217183822p:plain f:id:chiroru_27:20131217183830p:plain
chrome firefox

次に、リンク先の「CSS」の入力欄に必要な情報をいれてGet Codeを押してコードを取得して下さい。
f:id:chiroru_27:20131011191631j:plain
後は、カスタマイズ>デザインCSSに貼り付けて以下を調整して完了です。

.hatena-module-profile .id {
  /* この中の一番下にあるtopを表示に合わせて調整。 */
  top: 220px;
}

デザインは好みに合わせて好きにイジっちゃって下さいね!

確認と保存。

CSSの入力が終わったら、ブログを確認してみましょう
おかしいところがなければ、変更を保存するを押して終了です。
f:id:chiroru_27:20130816213341j:plain



ブログ毎にアイコン変えるのはなかなかいいアイディアかも。

今までより少し面倒な作業が出来てしまいましたが、参考になれば嬉しいです!
以上、@chiroru_27 でした!

これまでのカスタマイズ