この記事では、Stork（ストーク）でロゴ画像のサイズを大きくする方法を紹介します。
ストークはデフォルトのままだと、ロゴ画像のサイズを大きくしても一定の高さで表示されるようになっています。紹介する方法では、このロゴ画像を表示する高さを変更し、ロゴ画像を大きく表示します。
デフォルトのロゴ画像サイズ
ロゴ画像サイズを大きくした場合
注意
この記事で対象としているのは、ロゴ画像を中央寄せしている時のサイズになります。事前に、ロゴ画像を中央寄せにしておいてください。
https://fox-wp.com/stork-logo-center/
ロゴ画像のサイズを決めているCSSを確認する
まずロゴ画像の高さを決めているCSSを確認しておこう
style.css
/* パソコン用 2055行目 */
.header.headercenter #logo img {
max-height: 90px;
}
/* タブレット・スマホ用 2610行目 */
#logo a img {
<span class="silver">width: auto;</span>
<span class="silver">margin-top: 1px;</span>
<span class="silver">max-width: 100%;</span>
max-height: 45px;
}
Stork（ストーク）のロゴ画像の高さを決めているのは、style.cssに記載されている上の２つのmax-heightです。
これより優先するCSSを記載しましょう。
ロゴ画像のサイズを大きくする
ロゴ画像のサイズを大きくするには、CSSの編集を行う必要があるよ。詳しいCSSの編集方法は、WordPressでCSSを編集する方法の記事を参考にしてね
次のCSSがロゴ画像のサイズを大きくするものです。
CSS
.header.headercenter #logo a img {
max-height: 200px;
width: auto;
}
max-heightに指定する値は任意です。値が大きければ大きいほどロゴ画像は大きく表示されます。使用するロゴ画像にあった値を指定してください。
次の画像はmax-heightに200pxを指定した場合です。ロゴ画像の高さを決める際の参考にしてください。