un

un

はてなブログの使い方をメインに書いています

「はてなブログ」のプロフィール画像を、好きなサイズで表示させる方法。

【スポンサーリンク】

アイキャッチ画像

前回 、作製したプロフィール画像を 「アカウント設定」より、ブログに載せた処、下の画像のように64×64pxで表示され、小さすぎて物足りない。

プロフィール画像

プロフィール画像(64×64px)

せっかく作ったのに・・・

という事で、今回はプロフィール画像を、好みのサイズで表示させる方法について、記しました。

 

 

プロフィール画像のサイズ変更

プロフィール画像を好きなサイズで表示するには、まずコチラのサイトで、画像を好きなサイズに変更し、保存します。

画像のサイズ変更・保存方法については、サイト内の説明を参照してください。

 

www.peko-step.com

 

今回は画像を、以下のように200×200pxへサイズ変更し、PC内に保存しました。

 

プロフィール画像

プロフィール画像(200×200px)

 

サイズ変更後の画像を、ブログに載せる手順。

はてなブログの上部メニューバー右 をクリックし、メニューから「はてなフォトライフ」へ移動します。

はてなフォトライフに関する画像

 

画面右上「アップロード」クリックします。

はてなフォトライフ

 

「画像をアップロード」画面にて、サイズ変更済みの画像をアップロードします。

はてなフォトライフ

 

画面右上「フォルダを編集」をクリックします。

はてなフォトライフ

 

アップロードした画像を選択し「ブログに張り付ける」をクリックします。

表示された「HTMLタグ」内のコードをコピー します。

はてなフォトライフ

 

POINT

先程コピーしたHTMLコードの<a href=”〇〇”>の〇部分を変更します。

 

<a href="https://自分のブログのアドレス/about">に変更します。

 

自分のブログのアドレスは、ダッシュボード>設定からも確認できます。

PCの「メモ帳」ソフトに、コーピーしたHTMLコードを貼付けると編集し易いです。

 

下の例は、私のブログの場合です。

例:<a href="https://un-machi.hatenablog.com/about">

 

これで初期設定通りに、プロフィール画像をクリック後「aboutページ」へ飛ぶようになります。

この変更をされない場合は、プロフィール画像をクリック後「はてなフォトライフ」へ飛びます。

 

ダッシュボード」に戻ります。

デザイン>カスタマイズ>サイドバーより、プロフィールの「編集」をクリックします。

プロフィール画像に関する画像

 

「モジュールを編集」画面のプロフィール画像 から を外します。
「自己紹介」の入力欄内に、編集したHTMLコードを貼ります。

「適用」をクリックします。

プロフィール画像に関する画像

 

「変更を保存する」をクリックします。

プロフィール画像変更に関する画像

 

200×200pxに変更されました!お疲れ様です。

プロフィール画像変更に関する画像

 

サイズ変更前との比較

変更前と比較すると「プロフィール画像」が、かなり見やすくなりました。

画像の上に有る「プロフィール」の文字と見比べると、解り易いです。

 

プロフィール画像に関する画像

 

プロフィール画像に関する画像

 

まとめ

プロフィール画像」は、自分のブログを読者に覚えてもらう為に「ある程度、大きい方が良いんじゃないかな。」と個人的には思っています。

それでは、この辺で失礼します。