だがそれがいい

だがそれがいい

気になったことを気ままに書いていきます。

はてなブログ内に表示されるプロフアイコン画像サイズと形を変更する方法

スポンサーリンク

f:id:dagasoregae:20160603084026j:plain

はてなブログのサイドバーに表示されているプロフィール画像に飽きたのでちょっと変更してみました。

f:id:dagasoregae:20160603084755j:plain

すると友人からこんなクレームが

「なんか画像ボケてて見にくいよ」

確認してみると

f:id:dagasoregae:20160603085527j:plain

ん〜微妙だけど確かに・・・

JPGでそこそこ綺麗な写真をアップしたんだけどな〜おかしいな〜

不思議に思いソースコードを見てみると

小ちゃ!
f:id:dagasoregae:20160603103520j:plain

しかもGIFだし。


これはたしかにイマイチなのでカスタマイズして、アイコン画像を大きく形も変更してみました。

プロフアイコン画像を綺麗にして、サイズも変更する方法

サイドバーに表示されているプロフィールはモジュールとして組み込まれているもので、細かい変更などはできません。
f:id:dagasoregae:20160603090605j:plain

なので、プロフィールに使われているHTMLソースコードを丸ごとHTMLモジュールにコピペして変更する方法で対応します。

ソースコードをコピーする

まずは、現状表示されているプロフィールとまったく同じものをHTMLのみで複製するために、ソースコードをコピーします。

1.ソースコードを表示する

f:id:dagasoregae:20160603091235j:plain

Google Chrome,IE,Firefoxはブログ上で右クリックすればソースを表示する的なメニューが表示されると思います。
safariは下記記事の通りにやればできます。

wayohoo.com

2.「プロフィール」で検索をかける

macの場合はcommand+f、windowsの場合はctrl+fキーをおして検索ウィンドウを表示させ、「プロフィール」と入力して検索します。

3.該当箇所をコピーする。

元のプロフィールをどういう風にしているかで違ってくるのでここからここまでというのはちょっと難しいですが、
<div class="hatena-module hatena-module-profile">から少しはなれた</div> </div>のところまでをコピーします。

ここから

f:id:dagasoregae:20160603092704j:plain

ここまで

f:id:dagasoregae:20160603093308j:plain

モジュールを追加し、コピーしたコードをペーストする

1.はてなブログのデザイン変更画面に行き、「カスタマイズ」→「サイドバー」→「+モジュール追加」をクリックし、 </ >HTMLを選ぶ。

HTMLf:id:dagasoregae:20160603093957j:plain

2.右側2段目のテキストボックスに先ほどコピーしたコードをペーストする。

f:id:dagasoregae:20160603094323j:plain

3.編集するまえに適用を押し、変更を保存しておく。

あとで編集するので、この時点で一度保存しておきましょう。


フォトライフに画像をアップロードし、画像URLを取得する

アイコン画像を準備します。
表示速度が遅くなるのでファイルサイズが大きすぎないほうが良いのと、正方形であらかじめつくっておいたほうが見た目が良いです。
アップロードと画像取得については下の過去記事を参照してください。(テストでは500px X 500pxを使いました。)
www.dagasorega-e.net


画像URLを差し替え、サイズを変更する

先ほど作ったHTMLモジュールを開き、画像URLを変更し、サイズを指定します。

1.<img src="~">のURLを差し替える

f:id:dagasoregae:20160603095723j:plain

該当箇所を選択したら、フォトライフで取得した画像URLを貼り付けます。

2.画像サイズを指定する
<img src="http://www.aaaabbbbbcccc.jp/" width="150" height="150">

width(幅)とheight(高さ)を上記のような形で追加します。
数値はサイドバーの幅、好みで変更して大丈夫です。

3.適用をおして変更を保存します。

アイコン画像が大きく、そして綺麗になりました。

f:id:dagasoregae:20160603100504j:plain

追加したモジュールを移動させ、元々表示されていたプロフィールを削除する

無事追加できたので、古いプロフは削除します。

サイドバー編集画面で、追加したモジュールをドラッグし、古いプロフィールの位置にドロップしましょう。
f:id:dagasoregae:20160603100754j:plain

こんな感じに変わっていることを確認したら、古いほうは削除しましょう。
f:id:dagasoregae:20160603101133j:plain

これで、ブログ内のサイドバーに表示されるプロフィールアイコン画像のサイズ変更は完了です。

【おまけ】画像の形を角丸四角形に変更する方法

じつは前々から円形のプログ画像が気に入らなかったので、これを角丸の四角に変更したいと思います。

ブログ内に表示されるプロフ画像の形は、選択したデザインテーマのCSS設定に依存しています。
なので、「デザイン」→「カスタマイズ」の「{}デザインCSSを編集すれば変更することができます。

.hatena-module-profile .profile-icon {
  float: left;
  margin: 0 10px 10px 0;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-radius: 10px;
  background-clip: padding-box;
}

今回は角丸にしたかったので、上記CSSコードを追記しました。

f:id:dagasoregae:20160603102440j:plain
こんな感じに。

おわりに

デフォルトでもシンプルなイラストならまったく問題なく綺麗に見えるんですが、色が多い写真などはかなり見難くなってしまします。
こだわりの写真があって、綺麗に表示させたいという人は是非変更してみてください。