ストーク(STORK)のロゴ画像を大きいサイズで表示する方法
ストーク(STORK)のロゴ画像を大きいサイズで表示する方法
WordPressテーマ「ストーク」 では、簡単にロゴ画像を変更できるのですが、最大表示サイズが決まっているため、大きな画像を設定しても小さく表示されてしまいます。

例えば、下記のような大きなロゴ画像でも…

ストーク テストサイトロゴ

ストーク テストサイトロゴ

このように小さく表示されてしまいます。

そのままの画像サイズで表示されない

そのままの画像サイズで表示されない

 今回は、このロゴ画像を任意の大きなサイズで表示する方法を解説したいと思います。

気になった方はぜひ試してみてください。

ロゴ画像の大きさを決めているCSSを確認する

まず、ロゴ画像の大きさを決めているCSSを確認しておきましょう。

 ストークのロゴ画像の大きさを決めているのは、style.cssに記載されている上記2つのmax-heightです。

これらのmax-heightの数値よりも大きな値を指定することで、ロゴ画像を大きく表示することができます。

ロゴ画像の大きさを調整する方法

子テーマを準備する

ロゴ画像の大きさを調整するには、style.cssにコードを追記する必要があります。

万が一に備え、カスタマイズの際は必ず子テーマのstyle.cssに追記するようにしましょう。

ストークの子テーマについては、下記の記事も参考にしてみてください。

style.cssにコードを追記する

WordPressダッシュボードのサイドメニューにある『外観』にマウスを合わせ、さらに表示された『テーマエディター』をクリックします。

『外観』にマウスを合わせ、表示された『テーマエディター』をクリック

『外観』にマウスを合わせ、表示された『テーマエディター』をクリック

テーマの編集画面が開きます。

画面右上の「編集するテーマを選択」「stork_custom」になっていることを確認します。

「編集するテーマを選択」が「stork_custom」になっていることを確認

「編集するテーマを選択」が「stork_custom」になっていることを確認

 なっていればstyle.cssに下記のコードを追記しましょう。

 上記は記述例です。

「画像の高さ」の数値は、実際に使用する画像に合わせて変更してください。

例えば、ロゴ画像の高さが「200px」なら、

 という記述になります。

 max-heightに指定する値が大きいほどロゴ画像は大きく表示されます。

コードを追記したら『ファイルを更新』ボタンをクリックしましょう。

『ファイルを更新』ボタンをクリック

『ファイルを更新』ボタンをクリック

ロゴ画像を設定

WordPressダッシュボードのサイドメニューから『外観カスタマイズ』という順にクリックして進みましょう。

サイドメニューから『外観→カスタマイズ』という順にクリックして進む

サイドメニューから『外観→カスタマイズ』という順にクリックして進む

 ストークのカスタマイズページが開きます。

ストークのカスタマイズページ

ストークのカスタマイズページ

 サイドメニューの『サイトロゴ・アイコン』をクリックしましょう。

サイドメニューの『サイトロゴ・アイコン』をクリック

サイドメニューの『サイトロゴ・アイコン』をクリック

「ロゴ画像をアップロード」の『画像を選択』ボタンをクリックし、画像をメディアライブラリから選ぶか、新しくアップロードします。

『画像を選択』ボタンをクリック

『画像を選択』ボタンをクリック

 ストークでの画像の詳しい設定方法は、下記の記事を参考にしてみてください。

ロゴ画像を確認

コードの追記、ロゴ画像のアップロードが完了したら、きちんとサイズの変更がされているか確認しましょう。

CSSで指定した大きさ(高さ)で画像が表示されている

CSSで指定した大きさ(高さ)で画像が表示されている

 CSSで指定した大きさ(高さ)で画像が表示されていればOKです。

作業は以上となります。

まとめ

今回は、WordPressテーマ「ストーク」 のロゴ画像の大きさを調整する方法を解説しました。

ロゴ画像を大きく表示すれば、ブログのインパクトも増し、ユーザーに与える印象も大きく変わります。

簡単に設定できるので、気になった方はぜひ試してみてください。

スポンサーリンク

スポンサーリンク

おすすめの記事