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

投稿日:2017年6月21日 更新日:

どうもお久しぶりです。

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

いつも勉強させていただいてます。
私も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%;」で構成されています。

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

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

わかりづらい人のための記述方法

コメントでロゴの横幅は変わるけれど高さが変わらないというものを頂いたので、ひとまとめにしたものを記載しておきます。

こちらでは以下の記述方法でロゴの高さおよび横幅が変わったので、変わらない場合は他のCSSやプラグインなどと競合している可能性が考えられます。

※子テーマに追加する場合の方法です。

#s-navi dt.trigger {
  cursor: pointer;
  height: auto;
  overflow:hidden;
}
#st-mobile-logo img {
  height:auto;
  width:auto;min-width:60%;max-width:80%;
  box-sizing:border-box;
}
/* ※注意事項 すべてのmedia Queriesよりも上部に記述 */
/*media Queries タブレットサイズ(960px以下)
----------------------------------------------------*/
@media only screen and (max-width: 960x) {

アフィンガーはCSSの記述方法がモバイルファーストになっていますので、必ずすべての media Queries よりも上部に記述してください。

スポンサーリンク

-AFFINGER
-, ,

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