[Blogger] プロフィール画像が歪んでるのを直そう!

ブログを描き始めてからあっという間に115日が経過しました。 設定が初期のままになっているところが多いので、そろそろ改良していきたいなあと思っています。

プロフィールを設定しました!

まずは未設定だったプロフィールから設定しました。
ところがこれ、なんだかプロフィール画像が歪んでいますね。 ということで、歪んで見えるこのプロフィール画像を直すやり方をエンジニア父ちゃんが教えてくれたのでアウトプットしていきます。

画像のアスペクト比を正常にしよう

まずプロフィール画面のデバックコンソールでプロフィール画像をクリック、クラス名をコピー(ダブルクリックで選択)します。
続いて"テーマ"の”カスタマイズ”というオレンジのボタンの▼を押します。
”HTMLを編集”を選択します。
編集画面が開かれるので、クリックして編集を有効にしてから、コマンド+Fを押すとでSearchが出ます。そこへ先ほどコピーしたクラス名をペーストします。
Enterを押すと、その箇所が黄色くなり、検索かけたのがどこにいるのか教えてくれます。
ここに、object-fit: cover;を書き足しましょう。
これで画像のアスペクト比を正常にすることができます。 保存ボタンを押しましょう。
これでプロフィールの画面に戻り、リロードして確認してみると、できました〜

あとがき

今回は、画像のアスペクト比を正常に戻すためには、object-fit: cover;を使うというおはなしでした。 プロフィール画面だけでなく、これからブログをどんどんパワーアップさせていきたいと思っています! おたのしみに!!

コメント

このブログの人気の投稿

免許証の裏面で意思表示してみた

やると決めたことをちゃんとできていない時

思考が滞った時にしたいこと