今日も、気がついたことを作業メモしておきます。
wordpressテーマ「Simplicity」でサイトを作成していますが、「Simplicity」のサイトロゴは画像を小さくするとロゴ画像がわずかにぼやけてしまいます。
高画質のままロゴ画像だけを小さくしたいと思っていましたが、公式サイトにはやり方が載っていませんね。
画像ロゴだけ小さくするには画像をアップロードするときに小さい画像でアップロードすればいいのですが、それだと画質が悪くなってしまいます。
ロゴ画像を高画質のままサイズだけ小さくする方法は?
ロゴ画像を高画質のままサイズだけ小さくしたいのですが、、、
公式サイトによると、ロゴ画像のサイズ調整はカスタマイザーからは変更できないとあります。画像を変更するにはCSSを指定してくださいとあります。
http://wp-simplicity.com/site-logo-to-picture/
というわけで、自分でCSSを指定してみたいと思います。
毎回、CSSはわからないところはネットで調べながら作業しているので、万が一、間違っている箇所があったりするかもしれませんのでご了承ください。
ロゴ画像を小さくするためCSSで指定する
ロゴ画像のhtmlを最初に調べます。調べ方は、google Chromeの場合は右クリック→検証でhtmlの一覧がでるのでそこからタグを調べます。
ロゴ画像を右クリックしてhtmlを調べてみると以下のようなソースになっています。
<img src="http://画像URL.jpg" alt="" class="site-title-img">
ソースの最後にclass="site-title-img”という風にクラスで指定されているので、CSS側で同じくクラスで指定すればサイズ変更ができます。以下のようにCSSでwidthやheightを指定すれば画像サイズが変更できます。
img.site-title-img {
width: 300px;
height: 60px;
}
上のようにCSSを記述してやればOKです。
例えば、アップロードしたロゴ画像が600×120の場合は、上のようにCSSで指定すれば1/2サイズのロゴ画像サイズに変更できます。
画質も600×120のままの高画質を保ったままサイズだけが小さくなります。
参考にしたサイト
画像の大きさを指定する/TAG index
http://www.tagindex.com/stylesheet/img/width_height.html