【Stinger Plus】パソコン&スマホで!簡単にロゴ画像を横幅いっぱいに広げる方法

2017/07/30

ちょっとしたコードをstyle.cssに入力するだけでロゴ画像を画面いっぱいに広げることができたのでご紹介します。

ヘッダー部分はサイトの顔だし、ある程度の完成度が欲しい!
と、記事数を充実させる前に少しだけこだわろうと思ったら・・・上手く行かずつまずいてしましました(>_<)

WordPressカスタマイズ方法はネット上にあるたくさんの先輩方達の説明記事をいつも利用させていただいています。
ただ、今回はなかなかの苦戦でした。

苦戦していたカスタマイズ状況は下記の2点です。

苦戦① ヘッダー部分を幅いっぱいに広げる設定 をして、「メニュー」バーは横幅いっぱいに広がったけれどタイトル替わりのロゴ画像は広がらなかった。
苦戦② スマホ上でロゴ画像が横幅いっぱいに広がってくれない。
この2点について解決方法を綴っていきます。

 


スポンサーリンク

 

パソコンで横幅いっぱいに広げる方法

まず、ロゴ画像が左右に広がらなかったのは使用していた画像幅が960ピクセルだったからでした。(´∇`;)
なんともお恥ずかしい原因です。ヘッダー部分を幅いっぱいに広げる設定をすれば画像も自動的に広がってくれるものだと思っていたのです。なかなかの初心者っぷりでしょ?(笑)

画像自体のピクセル幅が小さければそれ以上は広がらない

ということで、ロゴ画像の横幅を960を超える大きな数値で作り直したことで問題解決!メディアの画像編集では縮小は出来ても拡大は出来ないのでphotoshopで画像解像度を拡大し作り直して再度サイトにアップロードし直しました。
パソコン上ではこれでOK!

しかーし、スマホ上では中途半端に小さいままでした。チーン・・・

スマホで横幅いっぱいに広げる方法

パソコン上で設定が上手くいってもスマホ上では何にも反応はしてくれず・・・

style.cssにimg・・・を設定では失敗に終わりました

そこで、このサイトを参考にスマホで画像が最適サイズになるよ!とのことで試しに下記のコードを子テーマstyle.cssの最下部に入力。

img {
max-width: 100%;
height:auto;
}

でも私の場合はこれを入力してもスマホ上で何も変化は起きずで・・・なんでだろ・・・

成功コードはこれ!!

この通り横幅いっぱいに広がってくれました!

いろいろ試した結果、下記のコードを子テーマstyle.cssの最下部に入力したらスマホでも解決!

/* ロゴ画像の最大サイズ */
.sitename img {
max-width: 100%;
height:auto;
}

この「height:auto;」の入力は“縦横比もそのままで縮小されるよ!”という設定なのですが、私はこれを記入しなくてもちゃんと縦横比はそのままで綺麗に表示されていました。
ただ、携帯機種が違う人が見たらどうなるかは分からないので一応「height:auto;」は記入しておきました。

参考にしたサイトはこちらhttp://netbiz-kigyo.com/3184.html
ありがとうございました( ´▽`*)

※但し現在のロゴ画像はパソコン上では横幅を少し狭く設定しています。猫ちゃんのお顔がビックで圧迫感があったので☆

まだまだ初心者ですが、めげずに楽しんでサイト作りを覚えて行きたいと思います。

 

 

日本で一番簡単にビットコインが買える取引所 coincheck bitcoin


スポンサーリンク

-ブログ運営