賢威6.1+ワードプレスのヘッダー画像を横幅いっぱいに広げたい
ご訪問有難うございます。前回の記事でヘッダー画像をトップとグローバルへと縦に広げることの説明をいたしましたが
今日は、横に目一杯広げる説明を致します。
私の場合は、賢威6.1をワードプレスにインストールする時点で1200の大きさに設定してありますのであまりわかりづらいと思いますが
下の画像の一番右の赤丸の部分ですこれをなくします。
ワードプレスの管理画面から⇒テーマ編集と進んで
design.cssとlayout.cssを以下のように変更していただく事によって表示ができます。
desegn.cssを以下のように変更
float: left;
width: 59.5%;
}
width: 100%;
}
#header #header-title img {
width: 100%;
}
layout.cssを以下のように変更
.col2 #top,
.col2 #header,
.col2 #global-nav,
.col2 #main,
.col2 #main-image,
.col2 #footer,
.col2 .copyright,
.col2r #container,
.col2r #top,
.col2r #header,
.col2r #global-nav,
.col2r #main,
.col2r #main-image,
.col2r #footer,
.col2r .copyright{
width: 100%;
min-width: 950px;
}
.col2 #top-in,
.col2 #header-in,
.col2 #global-nav-in,
.col2 #main-in,
.col2 #main-image-in,
.col2 #footer-in,
.col2 .copyright p,
.col2r #top-in,
.col2r #header-in,
.col2r #global-nav-in,
.col2r #main-in,
.col2r #main-image-in,
.col2r #footer-in,
.col2r .copyright p{
width: 950px;
margin: auto;
}
.col2 #container,
.col2 #top,
.col2 #global-nav,
.col2 #main,
.col2 #main-image,
.col2 #footer,
.col2 .copyright,
.col2r #container,
.col2r #top,
.col2r #header,
.col2r #global-nav,
.col2r #main,
.col2r #main-image,
.col2r #footer,
.col2r .copyright{
width: 100%;
min-width: 950px;
}
.col2 #top-in,
.col2 #global-nav-in,
.col2 #main-in,
.col2 #main-image-in,
.col2 #footer-in,
.col2 .copyright p,
.col2r #top-in,
.col2r #header-in,
.col2r #global-nav-in,
.col2r #main-in,
.col2r #main-image-in,
.col2r #footer-in,
.col2r .copyright p{
width: 950px;
margin: auto;
}
空いていた部分が完全に埋まりました。以上で設定の完了でございます。
最近のコメント