【STORK19】ヘッダーのロゴ画像を横幅いっぱいに広げるカスタマイズ

おかぴーおかぴー

こんにちは、WEBデザイナーのおかぴーです!

絵を描く仕事をしたかった僕が、WEBデザイナーになった理由はこちらのプロフィールへ。稼げるブログを作りたい人はこちらへ。

以前書いた「STORK」のヘッダー画像を横幅にめいいっぱい広げるカスタマイズ記事があるのですが、

それを読んでくれた「Kさん」からご質問をもらいました^^

 

質問をもらった記事

おかぴー こんにちは、WEBデザイナーのおかぴーです! 絵を描く仕事をしたかった僕が、WEBデザイナーになった理由はこちらのプロフィールへ。稼げるブログを作りたい人はこちらへ。 STORKのテーマを使ってい[…]

ロゴ画像 ストーク 横幅いっぱいに広げる方法

前の記事のCSSコードだけだと、新しい「STORK19」のテーマではうまく反映されなかったので、今回記事にしてみました。

 

ご相談内容

KさんKさん

初めましてWordPress初心者です。

「アプまと」というアプリレビューブログを運営しています。

タイトルロゴを画面一杯に広げて自然な感じにしたいのですが、おかぴーさんの記事で書かれていたコードを入力してもロゴ画像を広げることが出来ず悩んでいます。

ロゴサイズは1536×368です。

現在は「アプまと」という文字の透過PNGロゴを使っていてこのロゴ画像は別のブログで使っている物なので関係ありませんが、いずれカラフルなイラストのロゴ画像を表示したいと思い相談しました。

 

stork19 ヘッダー画像 広げる

 

おかぴーおかぴー

Kさん、初めまして。

ブログ拝見しましたが、お使いになっているテーマは「STROK19」でしょうか?

自分の記事に載っているコードはSTORK(古いテーマ)なので、それでうまく反映されない可能性があります。その場合は、新しくコードを調整しますね(o^^o)なので、希望のロゴ画像を下書きで適用して、プレビューリンクを送って欲しいです。

 

プレビューリンクとは、「外観>カスタマイズ」で変更した内容を一旦下書きとして保存して、一般公開前のブログのURLを他の人に共有できる便利な確認方法!

変更前のチェックとしておすすめです^^↓

関連記事

おかぴー こんにちは、WEBデザイナーのおかぴーです! 絵を描く仕事をしたかった僕が、WEBデザイナーになった理由はこちらのプロフィールへ。稼げるブログを作りたい人はこちらへ。   CS[…]

WordPress 下書き保存 プレビューリンク

 

今回はこちらの方法で依頼しました↓

①まずは、カスタマイズ画面から、同じようにロゴ画像を設定してください。

WordPress 下書き保存

 

②次に、赤枠のボタンの右にある歯車を押して、

WordPress 下書き保存

 

③プレビューリンクの共有にURLが表示されます。

WordPress 下書き保存

おかぴーおかぴー
このリンクを送ってもらって、実際にどんなカスタマイズにすれば良いかをアドバイスしました!

カスタマイズするファイル

今回カスタマイズするのは「CSS」ファイルです。

 

『カスタマイズする前に』

カスタマイズをするときは、子テーマを使って、バックアップをとってから行ってください。functions.phpも必ず子テーマにインストールして、そちらを作業で使用してください。

 

 

おかぴーおかぴー
Kさん、プレビューリンクありがとうございます!
微調整は必要になりそうですが、こんな感じはどうでしょうか?^^↓

#site__logo.fs_l img{
max-height:initial;
}

 

まずパソコンから、

<カスタマイズ前>

stork19 ヘッダー画像 広げる

 

↓↓↓

<カスタマイズ後>

stork19 ヘッダー画像 広げる

パソコンがここまで大きく広がっているのは、画像が横幅1536pxで作成されているからで、

もし画像自体を横幅900pxで作成している場合は、こんな感じで余白ができます↓

stork19 ヘッダー画像 広げる

 

#site__logo.fs_l img{
max-height:initial;
}

このコードの、「initial」というのは、画像の最大値をそのまま反映させる意味のコードです。

つまり、画像を900pxで作れば、その横幅900px(最大値)で表示されるということになりますので、気になる場合は画像を微調整して作成すると良いと思います。

 

次にスマホのサイズです。

<カスタマイズ前>

stork19 ヘッダー画像 広げる

 

↓↓↓

<カスタマイズ後>

stork19 ヘッダー画像 広げる

 

スマホは、このコードだけだと若干大きくなるだけなので、下のコードも追加すると・・・

 

media only screen and (max-width:767px){
#site__logo{
max-width:calc(100%);
}
}

stork19 ヘッダー画像 広げる

 

もしスマホの上に見える余白を消す微調整をする場合は、今のコードを下のコードに差し替えます↓

 

@media only screen and (max-width:767px){
#site__logo{
max-width:calc(100%);
}
#inner-header{
padding: 0em 0 0.2em;
}
#site__logo img{
margin: 0 0 5px;
}
}
stork19 ヘッダー画像 広げる
こんな感じでうまくヘッダー画像の大きさを広げることができます!

Kさんの感想

KさんKさん

コードを入力すると綺麗に余白が埋まりました!

ワードプレス関連で何度もサイトには訪問させていただいてましたがここまで親切な方で感動しています。

休日の貴重なお時間を頂戴いたしまして、ありがとうございました!
また何かありましたらよろしくお願いいたします。

おかぴーおかぴー

おぉぉ、きれいにピタッとハマりましたね!

よかったです^^
また、そう言っていただけてこちらも嬉しいです。
何かあればまたご連絡ください〜

 

Kさんの感想

「STORK19」のご相談が最近3件続けて来て、STORKシリーズの人気の高さが伝わってきました(o^^o)

今回も希望通りの結果になってよかったです。

他にもSTORK19シリーズのカスタマイズ内容もありますので、よければご覧ください。

 

>2020/4/5 テーマ「THE THOR」でリニューアル!

2020/4/5 テーマ「THE THOR」でリニューアル!

2年近く「STORK」を愛用してきた当ブログは、これから「THE THOR」でデザインも新たに生まれ変わりました。(STORK、今までありがとう!)

これからも当ブログではブログ作りに役立つ情報を発信していきます。よろしくお願いします(o^^o)

CTR IMG