【STORK(ストーク)】ロゴ画像とテキストロゴのサイズを変更する方法

どうも、あらやんです。

今回はWordPress用テーマ「STORK(ストーク)」でロゴ画像とテキストロゴのサイズを変更する方法を説明します。

STORK(ストーク)では画面最上部にロゴ画像を設定することができます。私のブログで言う所のここですね☟

実はこのロゴ画像のサイズは大きくすることができます。やり方はこれから紹介するCSSを貼り付けるだけなので簡単にできます。

またテキストロゴを設定されている方もフォントサイズを変更することができます。ぜひ参考にしてみて下さい。

 

ロゴ画像を大きくする方法

それではやり方を説明します。

まずはダッシュボード画面左の「外観」より「カスタマイズ」をクリックしましょう。左下の方に「追加CSS」という項目があり、そちらをクリックすると追加CSSを記入する画面になるので以下のCSSを貼り付けて下さい。

@media only screen and (min-width: 768px) {
#container #logo img{
max-height:initial;
}
}

ではどうなったか確認してみましょう。 

  • Before
  • After

どうでしょうか、大きくなったのがお分かりいただけますかね。やり方はとっても簡単なのでロゴ画像を大きくしたい方は一度試してみてデザイン的にどうかチェックしてみてくださいね。

注意事項

この方法でロゴ画像のサイズを大きくする場合は注意事項が2点あります。それは、

  1. 上記CSSを適用するとロゴ画像が元のサイズで表示されるので、好みの大きさに表示させるにはロゴ画像のサイズそのものを調整する必要がある。
  2. 横幅が768px以上のデバイスでないとこの設定は適用されない(=スマホから見た時は大きくならない)。

この2点です。ここを把握したうえで上記の方法をご活用下さい。

 

テキストロゴのサイズを変更する方法(PC)

ここまではロゴ画像を設定している方向けのお話でしたが、次はテキストロゴを設定されている方向けのお話をしていきます。

テキストロゴはサイズを変更することができ、ロゴ画像と違ってフォントサイズを指定することができるのでテキストロゴを設定されている方は参考にしてみて下さい。

テキストロゴのサイズ変更もCSSを貼り付けるだけでできます。追加CSSに以下のCSSを貼り付けて下さい。

/* ロゴサイズ変更(PC用) */
@media only screen and (min-width: 768px) {
#container #logo .h1.text{
font-size:3em;
}
}

ではチェックしてみましょう。

おぉ…でかすぎですね(笑)。次にサイズを調整していきましょう。先ほどのCSSに「font-size:3em」という部分があるのでここの数字をいじってちょうどいい大きさにしてみましょう。

サイズ調整をしてレイアウトを中央配置にしてみました。これはこれでいいかも。

 

テキストロゴのサイズを変更する方法(SP)

これでパソコンから見た場合のテキストロゴのサイズは変更されましたが、実はこれだけではスマホから見た場合には変更されていません。スマホ用の設定も必要になってくるのでもうひと頑張りしましょう。

やり方は下記CSSを追加するだけです。

/* ロゴサイズ変更(スマートフォン用) */
@media only screen and (max-width: 767px) {
#container #logo .h1.text{
font-size:2.5em;
}
}

こちらもスマホの画面を見ながらちょうどいい大きさになるように「font-size:2.5em」の部分の数字を調整してみてくださいね。 

ロゴ画像とテキストロゴのサイズ変更の方法は以上です。お疲れさまでした。

カスタマイズ記事まとめ

他のSTORK(ストーク)カスタマイズ記事をお探しの方はこちらからどうぞ


無料会員制のメールコミュニティへご招待しています

無料で参加できるメールコミュニティ、その名も「ニコニコスマイルコミュニティ」にご招待しています。

このコミュニティではブログでお伝えしきれなかった内容やコミュニティ参加者限定のコンテンツをプレゼントしています。ネットビジネスでお金を稼ぐ力を身に付け、自由なライフスタイルを実現して大切な人とニコニコ笑顔で暮らしていけるような人生を創造していきたいのなら、あなたも無料のコミュニティに参加して仲間になりませんか?