の まとめ

デジタルガジェットレビュー、Mac ・ iPhone・ WordPressのコード、食レポなどをまとめて比較してお届けします。

【WordPress】テーマ「Stinger3」の本文widthを修正する方法

      2015/01/15

WordPressテーマ「Stinger3」の本文が少し狭く感じたので修正してみました。

ここでは本文のwidthを550pxから600pxに変更する方法を紹介します。

1.環境

  • WordPress 4.0
  • stinger3ver20140327

2.手順

WordPressにログイン→「外観」→「テーマ編集」→「スタイルシート(style.css)」をクリックします。

次の箇所クラス名のプロパティを変更します。

クラス名をコピーして、ソース内をブラウザの検索すると修正箇所がわかりやすいです。

1).shadow:before, .shadow:after

修正前

max-width: 500px;

修正後

max-width: 550px;

2).post blockquote

修正前

padding-left: 40px;
margin-left: -40px;

修正後

padding-left: 20px;
margin-left: -20px;

3)#header-in, #wrap-in, #navi-in, #footer-in, #gazou-in

修正前

width: 986px;

修正後

width: 998px;

4)#wrap #wrap-in #main

修正前

width: 550px;
padding-right: 39px;
padding-left: 39px;

修正後

width: 600px;
padding-right: 20px;
padding-left: 20px;

5).post .entry .entry-content

修正前

width: 380px;

修正後

width: 430px;

6).sumbun

修正前

width: 430px;

修正後

width: 450px;

7)#comments

修正前

margin-left: -40px;
padding-left: 50px;

修正後

margin-left: -21px;
padding-left: 31px;

8)h2

修正前

padding-left: 35px
margin-left: -40px;

修正後

padding-left: 16px
margin-left: -20px;

まとめ

本文の幅を広げるための修正箇所をまとめてみました。

修正前はCSSの内容をコピーしてテキストファイルに保存するなどのバックアップを忘れずに行ってください。

 - WordPress , ,

336-280

  関連記事

【WordPress】stinger3のSNSボタンをフラットな感じに変更する方法

ここではWordPressのテーマ「stinger3」のSNS用ボタンをフラット …

【WordPress】テーマ「stinger3」の自動追尾するSNSボタンを非表示にする方法

WordPressのテーマ「stinger3」では、画面のスクロールに追尾するフ …

ベスト20
【WP】プラグイン「WordPress Popular Posts」で、カテゴリーの人気記事を表示する方法

WordPressの定番プラグイン「WordPress Popular Post …

WordPressのパーマリンク設定を変更してSEOに失敗した実例と対策

素人が思いつきでSEO対策をすると失敗するよ、というお話です。 はじめに 本ブロ …

【WordPress】テーマ「Stinger5」のSNSシェアボタンをフラットにしてシェア数を表示する方法

Stinger5のSNSシェアボタンを変更して、フラットにしてシェア数を表示する …