即日上位表示サービスです
3日以内にトップ・ページに上がってこなければ全額返金致します。 ワードプレスのカスタマイズの 20万円相当のホームページを 全て差し上げます。 ドメイン無料 サーバー代無料 あり得ないサービス

賢威6.1+ワードプレスのヘッダー画像を横幅いっぱいに広げたい

                                        ご訪問有難うございます。

前回の記事でヘッダー画像をトップとグローバルへと縦に広げることの説明をいたしましたが

今日は、横に目一杯広げる説明を致します。

 

私の場合は、賢威6.1をワードプレスにインストールする時点で1200の大きさに設定してありますのであまりわかりづらいと思いますが
下の画像の一番右の赤丸の部分ですこれをなくします。

 

ヘッダー画像の修正部分が表示されています。

 

ワードプレスの管理画面から⇒テーマ編集と進んで

design.cssとlayout.cssを以下のように変更していただく事によって表示ができます。

desegn.cssを以下のように変更

■ design.cssの以下記述を削除 ■
#header #header-title {
float: left;
width: 59.5%;
}

 

■ design.cssの最下部に以下を追記 ■
#header .header-logo img {
width: 100%;
}

 

■ design.cssの最下部に以下を追記 ■

#header #header-title img {
width: 100%;
}

 

 layout.cssを以下のように変更

■ 変更前 ■
.col2 #container,
.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;
}

 

空いていた部分が完全に埋まりました。以上で設定の完了でございます。

 

 

» «

コメントを残す

サブコンテンツ

飯沼祐志

 

 

  飯沼祐志: 株式会社マルク代表

 

あなたの疑問に即時対応致します。

チャットで問い合わせ

お気軽にどうぞ。

 

自己紹介はコチラ

全記事一覧

Twitter でフォロー

変更後

このページの先頭へ