スティンガー5(stinger5) カスタマイズ第8回目「コンテンツ部分の幅を広げる方法」

スティンガー5(stinger5) カスタマイズ
今回紹介するのは、上記画像のコンテンツ部分の幅を広げてめいいっぱいコンテンツを表示する方法を紹介します。

スティンガー5のデフォルトだと、メインコンテンツ部分は両サイド、余白が結構あります。
企業用に変更するとなるとこの余白が、少なめの方がいいと思いますのでカスタムします。

コンテンツ部分の幅を広げる方法

スティンガー5(stinger5) カスタマイズ
最初にワードプレスのダッシュボードの画面から、「外観」→「テーマの編集」を選択して「style.css」ファイルを開きます。

カスタマイズ第8回目「コンテンツ部分の幅を広げる方法」
画面を下のほうまでスクロールしていくと「main」と記載されているタグがあります。この部分の「pading」を両方「0px」にすれば、余白部分がなくなります。

500
上記画像のように「0px」に変更します。

padingとは

「pading」は余白などを作るときに使われます。

pading: 5px 10px 15px 20px; このように記載されている場合は [上に5px] と [右に10px] と [下に15px] と [左に20px] 余白を作ると指示しています。

pading: 5px 10px;このように記載されている場合は[上下]に5px と [左右]に10pxと言う意味です

padding: 5px; このように記載されている場合は[上下左右]すべて5pxと言う意味です。

今回のスティンガー5のテーマの場合は「pading: 20px 40px;」と記載されていたので[上下]に20px と [左右]に40px余白を作っていたということになります。

余白は見栄えをよくしたり、文字を読みやすくするために、必要な部分ですので、今回は0pxにしてしまいましたが、多分あとで他のバランスを考えながら修正すると思います。

最後に

カスタマイズ第8回目「コンテンツ部分の幅を広げる方法」
余白をなくしてこんな感じになりました。

スティンガー5のカスタマイズまとめ記事はこちら

ワードプレスのテーマ「stinger5」をカスタマイズして、企業のホームページとして2015年1月から運用します

stinger5カスタマイズ、今回までの記事

[stinger5]スティンガー5をビジネステンプレートみたいに、カスタマイズする方法 第1回「企業ロゴの追加」

[stinger5]スティンガー5をビジネステンプレートに、カスタマイズする方法 第2回「ヘッダーに企業電話番号の追加」

[stinger5]スティンガー5をビジネステンプレートに、カスタマイズする方法 第3回「グローバルナビの変更」

スティンガー5 カスタマイズ 第4回「グローバルナビの下に「Meta Slider」を使用して、スライド画像の挿入」

スティンガー5 カスタマイズ 第5回「トップページ 新着情報表示の変更」

スティンガー5 カスタマイズ第6回目「サイドバーの変更」企業のホームページみたいに!!

スティンガー5(stinger5) カスタマイズ第7回目「サイドバーの変更」要約文の省略方法

The following two tabs change content below.
AKIRA

AKIRA

上尾市在住の、リサイクルショップで働くサラリーマン。 Twitter・Facebookやってます。 小心者なので、誰か声かけてくれると嬉しいです。
スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサーリンク