はてなブログを新設した私は、ココナラでステキなイラストレーターさんにプロフィール画像を描いていただきました。
ココナラで描いていただいたイラストはとても素敵で意気揚々とブログに設定したのですが…
小さいっ！！！
せっかくのイラストが全然映えない！！
そうなんです。はてなブログのプロフィール画像って小さくないですか？しかもスマホだとぼやけます。
これは残念・・・
こだわって準備したプロフ画像がぼやける・・・
というわけで、改善策を見つけてきましたよ。
小さすぎるプロフィール画像を、大きくクッキリと表示させましょう。
今回は、おまけに…
プロフィール画像からあなたのaboutページに飛べる設定も教えちゃう！
この記事を読めばできること・・・
・はてなブログのプロフィール画像のサイズを大きくする。
・スマホでぼやけるプロフィール画像をハッキリ見やすく表示する。
・プロフィール画像からアバウトページに飛べるようにする。←おまけ！
初心者のあなたも大丈夫。
ごく簡単な操作でワンランク上のプロフィール画像をめざしましょう！
はてなブログのプロフィール画像(デフォルト)
はてなブログの設定はシンプルです。もちろんプロフィール画像の設定も簡単にできるんです。
たったこれだけ。シンプルで簡単！
だけどこの設定だとこうなります↓↓
せっかく用意した画像が小さすぎてよく見えませんね。しかもスマホからだとかなりぼやけてします。
プロフィール画像はブログの顔です。小さくてぼやけていては印象が悪いですね。
改善しましょう！
プロフィール画像のサイズを最適化する方法
はてなブログの画像のサイズを大きくしてクッキリ表示する方法。
手順はこの3つです！
- はてなフォトライフで画像を準備
- 画像のHTMLを取得
- はてなブログにHTMLを設定
詳しく説明しますね。一緒に設定してみましょう。
はてなフォトライフで画像を準備
まず、プロフィール画像を準備します。はてなフォトライフを開きましょう。
１．パソコンの右上の方にある9個の四角のアイコンをクリック
２．「利用中のサービス」が出てくるので「はてなフォトライフ」をクリックします
３．はてなフォトライフで画像を選択
はてなフォトライフの画像一覧で使用する画像を選択します。
- はてなフォトのはてなブログに使用された画像は全てはてなフォトライフにの「Hatena blog」のフォルダに保存されています。
- 新しい画像を使いたい方は画面右上の「アップロード」→「ファイルを選択」でアップロードしてくださいね。
４．最適なサイズに編集
画像をクリックすると右下に「画像を編集」とでてきます。
ここをクリックすると、画像のサイズやタイトルを編集できます。
【はてなブログの画像サイズについて】
- プロフィール画像は200px〜350pxがおすすめ
- 吹き出しやアイコンは150px〜200px
私は330pxに設定しました。このサイズだと私のスマホで見た時にぴったりの幅になるからです。
- フォトライフはサイズを編集すると元のサイズと新サイズの両方が保存されます。必要なければ元サイズは削除しましょう。
-
ブログを更新するたびに画像が増えていきますから、わかりやすく用途とサイズを明記したタイトルをつけることをおすすめします。
プロフィール画像のHTMLタグを取得
画像が準備できたら、はてなブログに設定するHTMLを取得しましょう。
はてなフォトライフで画像を選択して「ブログに貼り付ける」をクリックするだけ。簡単だよ。
【はてなフォトライフで画像のHTMLタグを取得する方法】
１．画面右上の「フォルダの写真を編集」←忘れずに
２．再び画像の一覧が表示される
３．選択した画像をクリック
４．画像左の「選択」にチェック
５．「ブログに貼り付ける」をクリック
６．画面に現れたHTMLタグをコピーする
すると画像のHTMLが表示されます↓↓
これをコピーして、メモ帳などに貼っておきます
【省略OK】プロフ画像のリンク先の設定
さて、ここからしばらくはおまけの部分。
「プロフィール画像からアバウトページに飛べるようにする」設定です。HTMLタグを少し編集します。
難しいと感じたら省略しても大丈夫！
先ほど取得したHTMLをそのままはてなブログに設定すると画像のリンク先ははてなフォトライフになります。
↑↑赤字部分がはてなフォトライフのURLになっているからです。
つまりプロフ画像をクリックした時、そのままだと左の画面になりますが、この部分を飛ばしたいURLに置き換えると、右のように設定したページに飛ぶことができます↓↓
左がはてなフォトライフ、右は詳細プロフィールページです。
「はてなフォトライフに飛んでも問題ないよ」という方はこの項はスルーしてください。
aboutページなどに画像のリンク先を設定したい方は…
1.飛ばしたいページのULRをコピー
2.先ほどメモ帳に貼って置いたプロフィール画像HTMLの「<a href="https://～">」赤い部分を削除して飛ばしたいページのurlを貼りつけます。
つまりこういうこと↓↓
これでOKです！
はてなブログにHTMLを設定
はてなブログのダッシュボードから、画像のHTMLタグを設定します。
ここまで来たらあと少しだよ！
頑張ろう！
１．はてなブログダッシュボードを開き「デザイン」をクリックします
２．レンチのアイコン（設定）をクリックして「サイドバー」を選択します
３．「プロフィール」→「編集」をクリック
４．するとサイドバーのプロフィール編集画面が開きます
①．まず、「プロフィール画像」の「表示する」のチェックをはずしてください。
②．その下の「自己紹介を追加」の1番上に先ほどのHTMLを貼りつけます。
③．忘れずに適用をクリックします。
５．すると…プロフィール画像が大きくなりました！
画面左上の「変更を保存する」を忘れずにクリックしてね。
６．スマホでの表示も
レスポンシブ設定をオンにしてあれば、スマホでも大きくくっきり表示されます。
レスポンシブ設定をオンにするには…
- スマホのアイコンをクリック
- 下の方の「レスポンシブデザイン」にチェックを入れます。
これでスマホでもぼやけません。大きくクッキリと表示されます↓↓
できたね〜！！おつかれさまでした！
【まとめ】プロフィール画像のサイズを最適化してする方法
プロフィール画像サイズを大きくはっきり見せる方法の手順です。
- はてなフォトライフで画像を選択
- サイズを編集(200〜350px)←この時にタイトルをつけておくとよい。
- プロフィール画像のHTMLを取得←画像からaboutページなどに飛ばしたい場合はHTMLを編集する
- はてなブログダッシュボードのデザイン設定→サイドバー→プロフィール設定→「プロフィール画像を表示」のチェックを外す→「自己紹介を追加」に貼る→「適用」→「設定を保存する」を忘れずにクリック！
- レスポンシブデザインをオンにすればスマホでも大きく表示されます。
さあこれで、お気に入りのプロフィール画像がはっきりと表示されるようになりました。
私のお気に入りの画像が映えるようになりましたよ。あなたもぜひ設定してみてください。
プロフィール画像はブログの顔です。
妥協せずにステキなものを選びたいですね。ココナラならイラストレーターさんにあなただけのプロフ画を描いてもらえます。私もココナラでお願いしました。
こちらが体験記事です↓↓
※この記事はこちらのサイトを参考にさせていただきました。
ありがとうございました！！
