Stinger

Stinger7:サイト全体の横幅を広げる方法

stinger7-thumbnail

こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

今回の記事では、無料WordPressテーマ:Stinger7のサイト全体の横幅を広げる方法を紹介したいと思います。

横幅を広げるカスタマイズというと、テーマによっては手間がかかって本当に大変だったりします。
サイドバーが落ちてしまったり、余白が空きすぎてしまったり。。。

出来れば避けて通りたいものの一つなんですが、Stinger7の場合はそこまで大変な作業なしに横幅を変更することができます。

横幅が広がるとメインコンテンツ部分がゆったりして余裕が出るので、ゴチャつきやすいサイトや写真にこだわっているサイトには特にオススメなカスタマイズです。

カスタマイズ前

↓ インストールしたばかりの状態では、サイト全体の横幅は1060px

stiner7-wrapper-width-before-1

カスタマイズ後

↓ サイト全体の横幅を1280pxに変更

stiner7-wrapper-width-after-1

[ad]

1. style.css を編集

まずはCSSを編集して、サイト全体の横幅を広げましょう。

style.css に以下のコードを追加します。
(ここでは横幅1280pxにしましたが、お好みで変えて下さい)

#wrapper {
    max-width: 1280px;
}

これで横幅が最大1280pxに広がりました。
でも下の画像のように、ヘッダー画像の右側がぽっかり空いてしまっています。

stiner7-wrapper-width-after-2

2. functions.php を編集

先ほどのCSSの編集で、サイト全体の横幅を1280pxにすることができましたが、ヘッダー画像が1060pxのままなので、今度はヘッダー画像の大きさを変更します。

子テーマの functions.php に以下のコードを追加します。
(ヘッダー画像の高さについても、お好みに合わせて変更して下さい)

// カスタムヘッダー
$custom_header = array(
    'random-default' => false,
    'width' => 1280,    // ← ヘッダー画像の横幅
    'height' => 350,    // ← ヘッダー画像の縦幅
    'flex-height' => true,
    'flex-width' => false,
    'default-text-color' => '',
    'header-text' => false,
    'uploads' => true,
    'default-image' => get_stylesheet_directory_uri() . '/images/af.png',
);
add_theme_support( 'custom-header', $custom_header );

これでカスタムヘッダーの画像サイズを変更することができました。

あとは管理画面→外観→カスタマイズ からカスタムヘッダー用の画像を切り抜けば完成です。

stiner7-wrapper-width-after-4

(今回のカスタマイズとは関係ありませんけど、日本語に翻訳せず英語のままにしておくと、管理画面関連の表示が少しだけ早くなります。使用する言語は 管理画面→設定→一般設定 の「サイトの言語」から設定できます)

サイト全体とヘッダー画像が同じ横幅になりました ↓

stiner7-wrapper-width-after-1

今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。