WordPressテーマ「STORK(ストーク)」のロゴ画像の大きさを調整する方法!

WordPressテーマ「STORK(ストーク)」のロゴ画像の大きさを調整する方法!

こんにちは。とみっちです。

当ブログではWordPressテーマ「STORK(ストーク)」を使っています。

STORKのロゴ画像の大きさを変更する方法を知りたいとよく聞かれるので、今回は記事にしてみます!

STORKテーマでロゴを変更

STORKテーマでは、簡単にロゴ画像を変更できるようになっています。

手順としては、WordPressの管理画面で、

カスタマイズ → サイトロゴ・アイコン → 画像の変更

と進むことでロゴ画像を変更することができます。

STORK ロゴ 小さい

保存」しなくても、プレビュー表示できるのが嬉しいですね。

ところが、親テーマのスタイルの設定により、大きなロゴ画像に変更しても、実際に表示されると小さく表示されてしまいます。

例えば、このような「横幅496px × 高さ85px」のロゴ画像を設定してみることにしましょう。

ロゴテスト

あらら、こんな風に小さく表示されてしまいます...。

STORKテーマ ロゴ小

ロゴ画像が小さく表示されてしまっては、誇り高きサイヤ人の故郷の威厳が損なわれるではありませんか(強奪した星ですけどね)。

それでは、大きく表示させる方法を紹介しましょう!

ロゴ画像のサイズを修正する方法

STORKのカスタマイズに伴う動作不良は当ブログでは責任をもてませんので、バックアップを取るなどして慎重におこなってくださいませ。

STORKのカスタマイズの前に、必ず子テーマを導入するようにしましょうね。

子テーマを導入していないと、STORK本体にアップデートが発生した場合、自分で変更した内容が全て消えてしまいます。

導入方法は公式ページを参考にしてくださいね。

ロゴ画像を大きくする設定方法はスタイルシート(CSS)に追記します。

簡単です!

追記するスタイル

STORKの子テーマのスタイル「style.css」に以下のような設定を記述してください。


#logo .h1.img img {
  max-height: 85px;
  width: 496px;
}

※実際に使用する画像に合わせて、数値は変更してくださいね!

画像の縦の大きさ合わせて「max-height」、横の大きさに合わせて「width」を指定します。

ちょっとスタイルシートが分かる人向けに解説をすると、ここでは「height: 85px;」を指定すれば良さそうに思えるんですが、STORKの親テーマのスタイルで、ロゴ画像に「max-height」が指定されています。

これは、この大きさよりも大きく表示しないでねと指定するものなんですが、親テーマで小さめの値が設定されているんで、子テーマのスタイルでもうちょっと大きな値を指定してあげる必要があるんですよね。

これだけで、ほらこの通り!!!

STORKテーマ ロゴ大

ロゴ画像が堂々としたサイズで表示され、無事にサイヤ人の威厳を取り戻すことができました(惑星の強奪を生業としている種族ですけど)!

ロゴ画像の大きさの設定に困っている人は、是非チャレンジしてみてくださいね。

STORK固定フッタープラグインをリリース

当ブログでも使用している、人気WordPressテーマ「STORK(ストーク)」に関し、スマホで閲覧した際に以下のような固定フッターメニューを表示できるプラグインをリリースしました。

年々大型化するスマホの画面では、もはやページ上部のハンバーガーメニューはイマイチ使いづらくなってきたと言えます。

ページ下部、スマホホームボタンのそばに固定フッターメニューが表示されるとかなり使いやすくなります。

STORKテーマ限定の機能とはなりますが、ユーザービリティの向上やSNSでの拡散、他の記事への誘導などに、このプラグインをぜひ使ってみてください。

WordPressテーマ「STORK(ストーク)」のロゴ画像の大きさを調整する方法!

ABOUTこの記事を書いた人

とみっち

数年前までバンド活動してました。現在はブログを運営して暮らしています。サウンドクリエイター、Webクリエイター。息子は4歳になりました。長野市出身。埼玉県本庄市在住。 【興味】音/Web/車(GolfV GTI等)/田舎/旅/酒 ※自然の音からデスメタルまで聴きます。 @tomicci 詳しいプロフィール 【運営サイト】 ザ サイベース おと風景