ロゴデザインを一新 擬似要素の画像サイズを変更する方法

旧ロゴ

新ロゴ

ブログを開くと当時適当に作ったロゴが目に飛び込んで来て、その度に「なんか違うなぁ」と思っていたわけですが、今回思い切ってロゴを作り直してみました。SVG手打ちで悪戦苦闘しながら作った甲斐あって、個人的に納得のいくものが出来上がりました。

出来上がったロゴをさっそくサイトトップに配置。サイトアイコン(ファビコン)の設定も済ませました。

※ファビコンについて

SVGをアイコン化するオンラインツールがなかなか見つからなかったので、無料ペイントツールGIMPで変換しました。GIMPによるアイコンファイル作成の手順は動画化してあります。

擬似要素の画像サイズを変更する方法

当ブログでは中見出しの前に擬似要素を設定してロゴを挿入しています。擬似要素で挿入した画像ですが、普通にwidth, heightを設定しただけではサイズが変更されません。

失敗例

h2::before {
 content: url(./icon.svg);
 width: 100px;
 height: 100px;
}

元々の画像サイズは380*380です。widthとheightの設定が効かずにそのままのサイズで表示されてしまっています。

成功例

h2::before {
 content: '';//空のコンテンツを挿入
 display: inline-block;//要素を横並びで表示
 background-image: url(./icon.svg);//背景画像の挿入
 background-size: contain;//背景画像をリピート無しで表示
 width: 100px;
 height: 100px;
}

擬似要素のコンテンツ自体は空にしておいて、背景として画像を挿入すると任意のサイズに変更出来ます。なお、%の指定は効きません。