ストーク(STORK)のロゴ画像を大きいサイズで表示する方法

ストーク(STORK)のロゴ画像を大きいサイズで表示する方法

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

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

ストーク テストサイトロゴ
 
 
このように小さく表示されてしまいます。

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

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

 
 
今回は、このロゴ画像を任意の大きなサイズで表示する方法を解説したいと思います。
気になった方はぜひ試してみてください。
 
 


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

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

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

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

スポンサーリンク

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

子テーマを準備する

ロゴ画像の大きさを調整するには、style.cssにコードを追記する必要があります。
万が一に備え、カスタマイズの際は必ず子テーマのstyle.cssに追記するようにしましょう。

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

ストーク(STORK)をWordPressにインストールし子テーマを有効化する方法

2017.12.13
 
 

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

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

『外観』にマウスを合わせ、表示された『テーマの編集』をクリック

『外観』にマウスを合わせ、表示された『テーマの編集』をクリック

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

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

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

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

 
 
上記は記述例です。
「画像の高さ」の数値は、実際に使用する画像に合わせて変更してください。
例えば、ロゴ画像の高さが「200px」なら、

 
 
という記述になります。

リンゴ
max-heightに指定する値が大きいほどロゴ画像は大きく表示されます。
 
 
コードを追記したら『ファイルを更新』ボタンをクリックしましょう。

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

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

 
 

ロゴ画像を設定

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

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

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

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

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

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

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

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

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

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

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

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

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

ストーク(STORK)導入後に絶対やっておきたい8つの画像設定

2017.12.17
 
 

ロゴ画像を確認

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

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

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

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

作業は以上となります。

リンゴ
おつかれさまでした!
 
 

スポンサーリンク

ロゴ画像を作成するなら

ロゴ画像はもちろん自分で作成したものでも良いですが、ブログの顔になる部分なのでどうせならキレイでカッコイイものを設定したいですよね。

そこでオススメなのが、様々な職人さんが自分の技術を売るココナラです。
ココナラを活用すれば、オシャレでカッコいいロゴを安くで作れるかもしれません。



  • 自分で作ったりするのは苦手…
  • 安くでカッコいいロゴが欲しい!

という方は、試しに使ってみるのもアリだと思います。
 
 

まとめ

今回は、ストーク(STORK)のロゴ画像の大きさを調整する方法を解説しました。

ロゴ画像を大きく表示すれば、ブログのインパクトも増し、ユーザーに与える印象も大きく変わります。
簡単に設定できるので、気になった方はぜひ試してみてください。
 
 

ストーク完全マニュアル

ストークの魅力・使い方・カスタマイズ方法を余すことなく詰め込んだ完全マニュアルです。

ストーク完全マニュアルへ

 
STORK(ストーク)の魅力・使い方・カスタマイズ完全マニュアル

スポンサーリンク








ストーク(STORK)のロゴ画像を大きいサイズで表示する方法