賢威7カスタマイズ一覧StingerXeoryお問い合わせHomeStingerStinger7:ヘッダー画像とメインコンテンツの間隔を調整する方法StingerStinger7:ヘッダー画像とメインコンテンツの間隔を調整する方法こんにちは、ぶどうサワーです。サイトの閲覧ありがとうございます。今回は無料WordPressテーマ:Stinger7のヘッダー画像とメインコンテンツの間隔を調整する方法を紹介したいと思います。間隔を調整と言っても、PCサイズとスマホ・タブレットサイズで見やすい間隔は違うと思うので、今回はPCサイズのみ、ヘッダー画像とメインコンテンツの間隔を調整スマホ・タブレットサイズのみ、ヘッダー画像とメインコンテンツの間隔を調整1.と2.を組み合わせてみるという3つのカスタマイズを紹介していきます。最初の状態ではヘッダー画像とメインコンテンツの間隔は10pxに設定されています。PCサイズ:ヘッダー画像とメインコンテンツの間隔を40pxに。スマホ・タブレットサイズ:間隔を20pxから40pxに変更。PCサイズのみ間隔を調整まずはPCサイズのみ、ヘッダー画像とメインコンテンツの間隔を調整していきます。以下のコードを追加します。}}保存・更新すると、ヘッダー画像とメインコンテンツとの間隔が40pxになりました。上のコードは、PCサイズ(781px以上)のときに下の余白を40pxにするというものなので、スマホやタブレットの見た目は変わりません。保存・更新しても、下の画像のようにカスタマイズ前と同じ状態のままです。上と左右の余白を0pxにして、下の余白を40pxにするというコードです。時計回り」と覚えるのがオススメです。今度は先ほどと逆の、スマホ・タブレットサイズのみ間隔を調整して、PCサイズはそのままの状態にしてみます。}}メインビジュアルと記事の最初との間隔が20pxから40pxに広がりました。ここでもpx数を変えれば、ヘッダー画像とメインコンテンツの間隔を調整することができます。時計回りで上下左右のpx数を指定しているので、お好みに応じて調整してみてください。ここまでのコードをまとめると最後にここまでのカスタマイズをまとめると、CSSコードは下のようになります。}}これも先ほどと同じように、px数を編集すればお好みの間隔に調整できるはずです。気になっていたという方、ぜひお試し下さい。今回のカスタマイズは以上です。最後まで閲覧ありがとうございました。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。