【AFFINGER】モバイルロゴの高さを変更して大きめのロゴを使う方法

投稿日:

どうもお久しぶりです。

今現在構築しているサイトがなんとなーく完成に近づいてきたので、久しぶりにこちらのブログにログインしてみたところ……

いつも勉強させていただいてます。
私もAFFINGER4を使っているのですが、最近バージョンアップされた
スマホ(タブレット)閲覧時のデザインにモバイルロゴを設定出来るのですが、その場所の高さ変更を行う方法がどうしても分かりません。
少し大きめのロゴを使いたいのです。
もし、宜しければご教授いただけないでしょうか?
どうぞ、よろしくお願いいたします。

というコメントを頂いていたので、アフィンガーを更新しモバイルロゴを設定する時の高さを調節する方法をやってみたいと思います(´ω`)

コメントをくれたJUNさんありがとうございます。

スポンサーリンク

モバイルロゴの設定をしている場所を探す

とりあえず、私は自分でカスタムしまくっているので通常のアフィンガーに戻さねばテストをすることが出来ません。

よって、使用しているテーマを一時的にaffinger4-childからaffinger4へと変更。

で、とりあえず大きめの画像でモバイルロゴを設定してみると……

いや、実に小さいですね!

とりあえずソースを見てみると、

#s-navi dt.trigger {
	cursor: pointer;
	height: 50px;
	overflow:hidden;
}

この部分でロゴのサイズを決めているようです。
なので、こんな風に変更してやります。

#s-navi dt.trigger {
	cursor: pointer;
	height: auto;
	overflow:hidden;
}

見てもらうとわかるように、上下に余白ができました。

これで大きな画像を入れられるぞー! と思うでしょうが、少し考えてみましょう。

AFFINGER公式での推奨ロゴ画像サイズは40px(縦)×250~300px(幅)です

つまり、他の部分も調整しないと横幅がおかしなことになり小さな画像しか使えないということになります。

横幅の表示領域を調節してロゴをキレイに表示させる

画像を表示させるのに使うタグは img ですので、そこを調節すれば大きめの画像も横長になってくれるはずです。

なので、下記の部分を

#st-mobile-logo img {
	height:40px;
	width:auto;
	box-sizing:border-box;
}
#st-mobile-logo img {
	height:auto;
	width:auto;min-width:60%;max-width:80%;
	box-sizing:border-box;
}

に書き換えてやりましょう。

するとこんな感じに表示されるようになります。

これで少し大きめの画像を使っても横長の画像であればキレイに表示されるようになると思います。

とはいえ、どうして横幅の設定が「width:auto;min-width:60%;max-width:80%;」なのか理解できない方もいると思うので補足をしておきます。

このロゴの部分は、

<dl>  
  <dt>ここにロゴ</dt>  
  <dd>ここにアコーディオンナビ</dd>
</dl>

という形で整形されており、アコーディオンナビの方が「max-width:20%; と max-width:40%;」で構成されています。

ですので、それらを超えて画像の横幅が伸びないようにしてやらないと表示が崩れて最悪ロゴが見えなくなったりします(;´Д`)

アコーディオンの位置や余白なんかもこのあたりで設定できるので、試してみると面白いかもしれませんね!

スポンサーリンク

-AFFINGER
-, ,

Copyright© ビブリオテーク , 2017 All Rights Reserved.