画面横幅の全体に広げたい事があります。
デバイスに影響されず、常に横幅全体に指定した背景を付ける方法。
横幅を広げる時、まずはCSSをチェックしてみる
お使いのテーマやテンプレートのコードを見ます。
既に背景色を横幅に広げられるようになっている事も多いでしょう。
私はWordPressのStinger5を使用していて、
ヘッダーとフッターが横幅全体には広がらなかったので
カスタマイズしました。
では始めましょう。
お使いのCSSに、コードを付け足します。
他のコードと影響しあって、
うまく横幅全体に背景が付かない場合もあるかもしれません。
その際は、まぁ、ググッて乗り切って下さい。
フッターに背景をつけ、横幅全体に広げる方法
ではCSSのコードをお知らせします。
（このままコピーしないで下さい。UTF-8Nに変換して下さい。）
まずは下準備から。
html {
overflow: auto;
}
body{
overflow: hidden; /*はみ出た部分をどうするか*/
}
をCSSに追加します。
サイト全体を指す箇所で構いません。
では次に…
フッターのCSSのを追加しましょう。
サイト全体のCSS
footer{
margin: 0 -200%; /* マージンを追記 */
padding: 0 200% 0 200%;/* マージンで横にはみ出した部分を戻す */
background: #fff;
height: auto;
}
スマホのCSS
footer{
clear: both;
text-align: center;
margin: 0 -100%;
padding: 0 100%;
}
以上です。
こちらのサイトを参考にしました。
フッターに背景色をつけてブラウザ画面いっぱいに広げる方法
http://www.memorou.com/2013/10/blog-post_4.html
Stingerでは、サイト全体に効かせるCSSと、
スマホだけに効かせるCSSを入力する箇所が別になっています。
それぞれの場所に、追加しました。
テーマによりますが、サイト全体を指定するCSSの箇所に
footer
CSSが無い場合もあります。
その場合は作って下さい。
height: auto;
は付けてみると、適度に余白を持たせつつ
背景が仕上がったので、私の場合は追加しました。
スマホ用のCSSについて。
こちらについては100%で指定しています。
よく分かりませんが、100%でちゃんと背景色が横幅全体に広がっていたから。
PCでは100%ではうまくいかず、
200%にしました。
別に300でも良いです。
ヘッダーの横幅を画面いっぱいに広げる方法
まずはフッターをご紹介しました。
ヘッダーも同じ要領です。
サイト全体を指すCSS
header{
margin: 0 -200%; /* マージンを追記 */
padding: 0 200%;/* マージンで横にはみ出した部分を戻す */
background: #fff;
}
スマホを指すCSS
header{
text-align: center;
width: 100%;
margin: 0 -100%;
padding: 0 100%;
}
以上です。
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク