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

おかぴーおかぴー

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

プロフィールはこちら。ブログデザインと組み合わせて効果的な収益化が目指せるこちらの記事もおすすめです^^

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

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

 

質問をもらった記事

おかぴー こんにちは、WEBデザイナーのおかぴーです! プロフィールはこちら。ブログデザインと組み合わせて効果的な収益化が目指せるこちらの記事もおすすめです^^ STORKのテーマを使っていると、結構ヘッダ[…]

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

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

 

ー ブログで伸び悩んでいる方へ ー

無料動画

ご相談内容

KさんKさん

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

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

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

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

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

 

stork19 ヘッダー画像 広げる

 

おかぴーおかぴー

Kさん、初めまして。

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

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

 

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

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

関連記事

おかぴー こんにちは、WEBデザイナーのおかぴーです! プロフィールはこちら。ブログデザインと組み合わせて効果的な収益化が目指せるこちらの記事もおすすめです^^   CSSを変更したり、[…]

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

 

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

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

 

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

 

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

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

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

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

 

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

カスタマイズをするときは、子テーマを使って、バックアップをとってから行ってください。カスタマイズについては必ず自己責任でお願いいたします。

 

 

おかぴーおかぴー
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さん

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

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

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

おかぴーおかぴー

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

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

 

まとめ

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

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

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

 

デザイン効果と組み合わせて、最適な収益化方法を見つけよう

あなたに最適な収益化方法を見つけてみませんか?

「ある程度ブログのデザインも納得したものができてきたなぁ」

「次はこのブログを、稼げるブログにしたい!」

と思っている方へ。

 

ブログ収益化において、

デザイン効果と組み合わせることで反応率が高まる効果的な方法があるのですが、

僕が勤めている会社では、とても言えない(というか教えたくないw)内容を、

ここだけの話で公開しようと思います。

 

どんな話かと言うと、

「発信するテーマ(内容)に合わせた最適な収益化方法が分かる」というものです。

 

100人いれば、100個のブログがあり、コンセプトがあります。

それによって収益化の方法も様々です。

 

デザインは視覚的に注目を集める力がありますが、その先の収益化へ進むには間違いなく発信内容に合わせてブログを構築していく必要があります。

 

あなたは最適な収益化方法を選択できていますか?

きっと、今ブログで伸び悩んでいる人には新しい発見になるはず^^

興味がある方は、ぜひ以下からご覧ください〜

 

↓↓↓

 

 

ストレスフリーなブロガーライフを送ろう ブログデザインお悩み解決室WPテーマ「THE THOR」でリニューアル!" width="1280" height="479" >

WPテーマ「THE THOR」でリニューアル!

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

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

CTR IMG