【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(ストーク)カスタマイズ記事をお探しの方はこちらからどうぞ

あらやん公式メルマガはこちら

無料のメルマガに登録して頂くとメルマガ会員限定のメンバーズサイトに無料でご招待しています。

メルマガやメンバーズサイトでは

  • 自由なライフスタイルを実現するための具体的な方法
  • 理想を現実にするための思考法・マインドセット
  • より成果を出すための作業のマネジメント

などなど、自由なライフスタイルを実現するための様々な情報を発信していきます。

あなたも自由なライフスタイルを実現し、家族や恋人、友人などの大切な人とニコニコ笑顔で過ごしていけるようなそんな人生を歩んでいきませんか?もしそんな人生に興味や憧れがあるのなら、ぜひこのメルマガに登録して下さいね。

あなたが理想のライフスタイルを実現できるように私も頑張って情報を発信していきます!