こんにちは。とみっちです。
当ブログではWordPressテーマ「STORK(ストーク)」を使っています。
STORKのロゴ画像の大きさを変更する方法を知りたいとよく聞かれるので、今回は記事にしてみます！
STORKテーマでロゴを変更
STORKテーマでは、簡単にロゴ画像を変更できるようになっています。
手順としては、WordPressの管理画面で、
と進むことでロゴ画像を変更することができます。
「保存」しなくても、プレビュー表示できるのが嬉しいですね。
ところが、親テーマのスタイルの設定により、大きなロゴ画像に変更しても、実際に表示されると小さく表示されてしまいます。
例えば、このような「横幅496px × 高さ85px」のロゴ画像を設定してみることにしましょう。
あらら、こんな風に小さく表示されてしまいます…。
ロゴ画像が小さく表示されてしまっては、誇り高きサイヤ人の故郷の威厳が損なわれるではありませんか(強奪した星ですけどね)。
それでは、大きく表示させる方法を紹介しましょう！
ロゴ画像のサイズを修正する方法
STORKのカスタマイズの前に、必ず子テーマを導入するようにしましょうね。
子テーマを導入していないと、STORK本体にアップデートが発生した場合、自分で変更した内容が全て消えてしまいます。
導入方法は公式ページを参考にしてくださいね。
ロゴ画像を大きくする設定方法はスタイルシート(CSS)に追記します。
簡単です！
追記するスタイル
STORKの子テーマのスタイル「style.css」に以下のような設定を記述してください。
#logo .h1.img img {
max-height: 85px;
width: 496px;
}
※実際に使用する画像に合わせて、数値は変更してくださいね！
画像の縦の大きさ合わせて「max-height」、横の大きさに合わせて「width」を指定します。
ちょっとスタイルシートが分かる人向けに解説をすると、ここでは「height: 85px;」を指定すれば良さそうに思えるんですが、STORKの親テーマのスタイルで、ロゴ画像に「max-height」が指定されています。
これは、この大きさよりも大きく表示しないでねと指定するものなんですが、親テーマで小さめの値が設定されているんで、子テーマのスタイルでもうちょっと大きな値を指定してあげる必要があるんですよね。
これだけで、ほらこの通り！！！
ロゴ画像が堂々としたサイズで表示され、無事にサイヤ人の威厳を取り戻すことができました(惑星の強奪を生業としている種族ですけど)！
ロゴ画像の大きさの設定に困っている人は、是非チャレンジしてみてくださいね。
STORK固定フッタープラグインをリリース
当ブログでも使用している、人気WordPressテーマ「STORK（ストーク）」に関し、スマホで閲覧した際に以下のような固定フッターメニューを表示できるプラグインをリリースしました。
年々大型化するスマホの画面では、もはやページ上部のハンバーガーメニューはイマイチ使いづらくなってきたと言えます。
ページ下部、スマホホームボタンのそばに固定フッターメニューが表示されるとかなり使いやすくなります。
STORKテーマ限定の機能とはなりますが、ユーザービリティの向上やSNSでの拡散、他の記事への誘導などに、このプラグインをぜひ使ってみてください。
