[`yahoo` not found]
Pocket

1カラム画面の場合の横幅変更方法


賢威7のテンプレートでは横幅のピクセルはデフォルトで
1200pxに設定されています。

しかし、1カラムの画面の場合、横幅がやや大き過ぎという印象を受けます。
そこで横幅のピクセルを調整して画面を見やすくします。

ワードプレスのダッシュボードを開きます。
画面左側のメニューバーから、
「外観」⇒「テーマの編集」⇒「base.css」のページを開きます。

画面を少し下げると、「テンプレートレイアウト」という項目があります。

もし見つからない場合は、
「Ctrl」キー+「F」キーを押し、画面右上に検索窓が表示されたら、
「テンプレートレイアウト」と入力します。


これで「テンプレートレイアウト」という言葉が着色され、
見つかりやすくなります。

デフォルトでは、「テンプレートレイアウト」の項目は
以下のように表示されます。
画像の赤枠の部分を書き換えて横幅を任意のpxに調整していきます。



横幅は貴方が見やすいと思うpxで構いません。
今回は分かりやすく1000pxにします。

赤枠の部分をmax-width: 1000px; と書き換えると以下のようになります。

/*——————————————————–
テンプレートレイアウト
——————————————————–*/

.container{
position: relative;
}
.site-header-in,
.global-nav-in,
.main-image-in,
.main-image-in-text,
.main-image-in-text-cont,
.main-copy,
.sub-copy,
.main-image-in-text-box,
.main-body-in,
.site-footer-in{
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 1000px;
margin: auto;
}

最後に画面左下にある「ファイルを更新」ボタンをクリックして、
設定変更を反映させて下さい。


style="display:block"
data-ad-client="ca-pub-3394893532037391"
data-ad-slot="6131453662"
data-ad-format="auto">


2カラム以上の画面の場合の横幅変更方法


2カラム以上の画面の場合、CSSの記述が変わります。
以下のように記述します。

/*——————————————————–
テンプレートレイアウト
——————————————————–*/

.container{
position: relative;
}
.site-header-in,
.global-nav-in,
.main-image-in,
.main-image-in-text,
.main-image-in-text-cont,
.main-copy,
.sub-copy,
.main-image-in-text-box,
.main-body-in,
.site-footer-in{
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 1000px; /*サイトの横幅。これより小さければレスポンシブ*/
margin: auto;
}

width: 1200px;の部分のみwidth: 1000px;に変更します。

/*サイトの横幅。これより小さければレスポンシブ*/の部分は
変更せずに残しておいて下さい。

最後に画面左下にある「ファイルを更新」ボタンをクリックして、
設定変更を反映させて下さい。

因みに私の画面は2カラムなので以下の画像のようになります。
上の画像は横幅変更前、下は変更後です。

比較するとかなり印象が違います。
どちらでも見やすいほうに設定して下さい。






[`yahoo` not found]
Pocket