はてなブログでは、デフォルトのプロフィール画像が少し小さめに表示されます。
そのため、せっかく用意した画像でも「小さい」「スマホでぼやけて見える」と感じることがあります。
そこで今回は、プロフィール画像を大きく表示し、スマホでもくっきり見せる方法を解説します。
設定はとてもシンプル。初心者さんでもすぐにできるよ。
プロフィール画像がぼやけて見える理由
はてなブログのデフォルト設定では、プロフィール画像の表示サイズが小さくなっています。
そのため、スマホなどで表示すると画像が拡大され、ぼやけて見えてしまうことがあります。
そこで、適切なサイズの画像を用意し、サイドバーに直接表示させることで、くっきりとしたプロフィール画像に変更できます。
プロフィール画像を大きく表示する手順
設定は次の3ステップです。
- 画像を準備する
- 画像のURLを取得する
- サイドバーにHTMLを設定する
① 画像を準備する
まず、プロフィール画像を用意します。
おすすめの画像サイズ：
- 幅600px程度
※スマホは高解像度のため、表示したいサイズの約2倍の大きさで画像を用意すると、くっきり表示されます。
あらかじめパソコンやスマホの画像編集アプリで、600px程度にリサイズした画像を用意しておきましょう。
② 画像のURLを取得する
一番簡単な方法は、記事の編集画面を使う方法です。
- はてなブログで「記事を書く」を開く
- 右側のサイドバーから画像を貼り付ける
- 編集モードを「HTML編集」に切り替える
- 表示されたコードの中から、画像URL（src="〜"の部分）をコピーする
例：
<img src="https://cdn-ak.f.st-hatena.com/images/...">
この中の
https://cdn-ak.f.st-hatena.com/images/...
このURL部分だけをコピーして使います。
※コードをコピーしたら、その記事は保存せずに閉じてOKです。
③ サイドバーにHTMLを設定する
次に、はてなブログのサイドバーに画像を設定します。
- ダッシュボードを開く
- 「デザイン」をクリック
- スパナアイコン（設定）をクリック
- 「サイドバー」→「プロフィール」を選択
- 「プロフィール画像を表示」のチェックを外す
- 「自己紹介を追加」の一番上に、次のコードを貼り付ける
<a href="【ここにリンク先URL】">
<img src="【ここに画像URLを貼り付ける】" alt="プロフィール画像" style="max-width: 100%; height: auto;">
</a>※リンクさせたくない場合は、<a>タグを外して画像部分だけ貼り付けてもOKです。
※注意： URLを貼り付けるときは、前後の " （チョンチョン）を消さないように気をつけてください。
- 「適用」をクリック
- 最後に「変更を保存する」をクリック
これでプロフィール画像がくっきり表示されます。
スマホでもきれいに表示するための設定
スマホでもくっきり表示させるには、レスポンシブデザインをオンにしておきましょう。
- デザイン設定画面を開く
- スマホアイコンをクリック
- 「レスポンシブデザイン」にチェックを入れる
まとめ
- プロフィール画像は幅600px程度で用意する
- 画像URL（src部分）をコピーする
- テンプレHTMLに貼り付けてサイドバーに設定する
少しの設定で、プロフィールの印象が大きく変わります。
お気に入りの画像を、くっきり表示させてみてください。
はてなブログで収益化したい方へ
初心者向けに、収益化までの手順をまとめています。
