WordPressテンプレート制作、ウェブデザイン技能検定に挑戦中

前の記事:ツール等を使わずにEXCELのデータを一括でMySQLのテーブルに移す方法
HOME
次の記事:SVG クリッピングとマスクの使い方 キラキラのパスの打ち方

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

Web知識
古いロゴ旧ロゴ
新しいロゴ新ロゴ

ブログを開くと当時適当に作ったロゴが目に飛び込んで来て、その度に「なんか違うなぁ」と思っていたわけですが、今回思い切ってロゴを作り直してみました。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;
}

ロゴが小さく表示されている

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

||||

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

0件のコメント

コメント

カテゴリ

月別アーカイブ