ブログ

はてなブログ|アイコンとプロフィール画像がぼやけて見えにくいときの対処方法

はてなブログのアイコンやプロフィール画像がぼやけて悩んでいませんか?

アイコンを変えた後に、この問題をどうにかクリアにしたくて試行錯誤しました。

せっかくのお気に入りアイコンが、スターになるとぼやけてしまうことが悔しい。

分かったことと、対処方法をご紹介します。

読んでほしい人

  • はてなブログで書いている
  • スターアイコンをくっきりさせたい
  • プロフィール画像をくっきりさせたい

このサイトは現在WordPressに移行しています。はてなブログでは庭ブログを今も運営中です。

画像の保存形式を変える

超初心者のメモです。知っている方はスルーして下さい。

家の間取り図と外観パースを書いてもらった時に「データ方式はPDFで大丈夫ですか」と聞かれました。

えーと、PDFが分かりません💦

「今後使用されるときに不具合があるといけないので、念のためjpegでもお送りしますね」

蔵のある平屋の間取り図「白い平屋の家を建てました」 - 白い平屋の家を建てましたより

PDFとjpegの違いが分からないまま両方受け取りました。

PDFとは

「Portable Document Format」の略。

すべての環境(ソフトウェアやハードウェア、OSに関係なく)でデータを見ることが出来るファイル形式。

ファイルの作成・保存には専用ソフトウェアが必要なもののネット上で無料配布されているため、パソコンやスマホがあれば誰でもファイルを見ることが出来る。

チラシ作りなどでよく使いますね。ポスターを作ったときはPDFを使いました

jpegとは

風景写真など色合いにグラデーションがある画像に適しているファイル形式。

一度画像を圧縮してしまうと元に戻せない特徴あり。

jpegとjpgは同じ

色数の多い文字や図形などが含まれる画像に適しているファイル形式で、画質が保てるものの画像容量が大きくなってしまうのがデメリット。

pngの画質が変わらないのなら、全部pngにしちゃえばいいのか!って単純に考えちゃダメなのね。

新しいアイコンの画質を上げようと、試したもののよく分からない。

Twitterではなさんがアドバイスをくれました。

はなさんからのアドバイス

  • もしもjpgならpng形式に保存する
  • 普通に使うならjpgのまま使っても問題なし
  • 加工する場合はpng形式にする

jpgからpng形式にする方法

  • パソコンの画像加工フリーソフト(GIMP)を使う←試していない
  • canvaでデータを読み込ませて、ダウンロードするときにpngを選択する←これは出来た!
  • Windowsに入っているペイント機能でデータを貼りつけてpngで保存する←これも出来た!

月来子さんから頂いたデータはpng形式でしたが、わたしが丸く切り抜いたときにjpg形式に変わってしまったみたい。

記事に貼ったものは、どちらの形式も大きな変化はなかったです。

スターやプロフィール画像は、はてなの仕様なのかどちらの形式にしてもぼやけちゃう…ということが分かりました。

読んだ記事にCSSでプロフィール画像の画質が上がるというものもあり、試したけれど変化なし。

スターアイコンをはっきりさせるためにできること

画像を拡大して、らっこのアップに代えてみることにしました。

月来子さんが「はっきりさせたいならとこっちがいいかも」と、濃い目の画像を送ってくれました。

らっこのアイコン

before

アイコン大

after

スターアイコン変更方法

スターアイコン変更は、アカウント設定→プロフィール画像を変更する→画像を指定→変更するをクリックして保存です。

記事に押したスターを比べると…

らっこが小さいアイコン

before

大き目らっこアイコン

after

色合いがはっきりして、らっこだと分かるようになりました。

月来子さんどうもありがとうございます

プロフィール画像をはっきり表示させる

スターを変えるとプロフィール画像も変わってしまうけれど、プロフィール画像は元の画像のままにしたいな。

プロフィール画像だけ変えられないかを検索すると、出来るし大きさも変えられるみたいでした。

色んな記事を参考にはてなフォトライフを使ってあれこれしたものの、なかなか上手く出来ません。

1時間くらいもがいた後に「なんだか前に自分で記事書いた気がする…」と気づきました。

ただ画像を大きくするだけではなく、画像をクリックしてプロフィールが載っている場所に飛ばせるようにしよう。

忘れないために復習~

記事の下書きやワードなどを使ってHTMLを作りから。

step
1
プロフィール写真のサイズを決める

わたしは記事の下書きを使って、プロフィール画像の写真を貼りドラッグで250×250にしました。

大きすぎるとサイドバーに貼りきれなくなるので300以内にするのがお勧めです。

step
2
リンクにジャンプしたいURLを入れる

右クリックをした状態のままリンクボタンを押します。

リンク画像作成

 

プレビューをクリックすると挿入形式を選べるものが出てくるので、選択範囲をクリックします。

これで画像の中に飛びたいURLが入り込みました。

step
3
HTMLを取り出す

HTML編集画面に切り替えると、こんな表示になります。

HTML

これをコピーします。

step
4
プロフィールに反映させる

コピーしたHTMLを設定画面のデザイン→カスタマイズ→サイドバー→HTMLに入れます。

プロフィール設定の中にある「プロフィール画像表示する」のチェックボタンを外します。

プロフィール設定画面

画像が2つになっちゃうので。

適用をクリックするのを忘れずに。

プロフィール画像小

before

プロフィール画像大

after

 

こんなふうにくっきりハッキリしました。やったー。

スターを変えてもすぐには反映されません。

しばらく待つと反映されますが、ブックマークへの反映は時間がかかることもあります。

お気に入りのアイコンだからこそ、はっきり見えるようにこだわりました

同じ悩みを持っているかたの参考になるとうれしいです
にほんブログ村 住まいブログ 一戸建 ミサワホームへ にほんブログ村 住まいブログ 一戸建 平屋住宅へ にほんブログ村 花・園芸ブログ グリーンのある暮らしへ

関連記事・広告



tayorako blog

TAYORAKO KITCHEN:脂質を抑えたヘルシーな料理、パン作りについて

寄り添う子育て:幼児教育20年以上、発達障害自閉症児の加配や子育てから学んだこと

ほどほど庭のtayora koffie:書きたいことを書きたいままに綴るブログ

-ブログ
-,

© 2020 白い平屋の家を建てました Powered by AFFINGER5