東京で働くWEBディレクター/デザイナーのカナダ ジャスパー旅行記など

【Stinger5カスタマイズ】

【Stinger5カスタマイズ】メイン記事部分のwidth(横幅)を大きくするやり方

2015.06.15

スマホでこのBlogを見ている人にはあまり関係ないかと思いますが、Stinger5のデフォルトだとPCで見た際に全体の左側メイン部分(白背景)の横幅がどうにも小さく感じてしまっていたので、さくっと「style.css」を編集してStinger5テーマのカスタマイズを行いました。

ソースからどこでメイン記事部分のwidth(横幅)を制御しているのか確認する

htmlソースの確認

早速ですがどこで横幅を制御しているの確認をしていきます。
見かけを制御している=cssを修正、だと推測できるので、Blog全体のhtmlソースを見てみます。
すると、下記のdivが怪しそう。

<div id="wrapper">
(中略)
<div id="content" class="clearfix">
(中略)
<div id="contentInner">
(中略)

アタリを付けたところで、それぞれの要素を「style.css」から探してみます。

「style.css」に追記

「ctrl+F」で検索しつつ、それぞれアタリをつけたidやclassを見ていきます。

ちなみに@media only screen and (○○) {と「style.css」に記述されている部分は、スマホやタブレットなどそれぞれ各デバイスの横幅(width)によって、cssレイアウトを制御しているので触っちゃダメですよー。

「max-width: 980px」が指定されている該当箇所を発見しました!
デフォルトの「style.css」だと下記の983行目からの部分ですね。

/*レイアウト スマートフォン
----------------------------------------------------*/
#wrapper {
	max-width: 980px;
	padding: 0 10px;
	margin: 0 auto;
}

「レイアウト スマートフォン」のコメントが挿入されているのが気になりますが・・・。
試してみないとどうレイアウトが変わるのか分からないので、まずは修正してみます!
(※本当はXamppを導入したりローカルにテスト環境を構築してからテーマを修正し、ブラウザチェックをした方が安全です)

あまり「max-width」のpx数が小さすぎるとレイアウトが変更になったのか分かりませんので、現在写真をUPしている横幅(720px)に合わせる形で修正をしてみます。
デフォルトでは白背景部分は「660px」で「padding」等で余白も指定されているようなので、最終的な文字と画像エリアは「580px」となっています。
ですので、「+140px」してみます。

以下のように修正しました。

/*レイアウト スマートフォン
----------------------------------------------------*/
#wrapper {
	max-width: 1120px;
	padding: 0 10px;
	margin: 0 auto;
}

ブラウザで表示を確認

さて、先ほど指定した箇所の横幅(width)が大きくなっているでしょうか・・・?
ブラウザで挙動を確認してみます。

こちらは横幅980pxの状態
こちらは横幅980pxの状態

こちらが横幅1120pxに変更したver
こちらが横幅1120pxに変更したver

無事に白背景の記事が並んでいるエリアの横幅(width)が大きくなりました。
念のためスクリーンショットを撮影し大きさを確認してみますが、問題なさそうですね。

今回のカスタマイズのまとめ

非常にさくっと「style.css」のみを修正して対応をしました。
ブラウザのウィンドウ100%に表示とかされていなければ、widthを指定しているのはほぼ間違いなく「style.css」と推測出来るので、非常にお手軽なカスタマイズでしたね。

スマホやタブレットの見た目等も同一のcssファイルで制御しており、いわゆる「レスポンシブデザイン」を実現しているWEBサイトやBlogテーマが多いので、今回の趣旨であるPC版のメイン記事部分の横幅を変える以外は触らない方が無難です。

細かな修正対応の詳細は下記のブログの記事が参考になりました。

wordpress

RELATED ARTICLES

TOP