読書とプログラミングを中心とした覚書ブログ

読書とプログラミングについて、日々経験したことを忘れないようにするため、極力ブログに記録を残すように頑張る。

記事の幅を広げるカスタマイズ(V3用)

公開日 2014/06/29 更新日 2014/11/22

CSS STINGER v3 カスタマイズ

STINGERをインストールした状態だと、記事の幅が550pxになっています。
550pxだとあっという間に改行してしまうので、この幅を今のうちに650pxに広げておきます。

Information

この記事はSTINGER v3用です。STINGER v5に対する修正はこちらの記事(V5用)にあります。

変更方法

変更方法はスタイルファイル(style.css)だけの変更で簡単にカスタマイズできました。
変更箇所は、次の3箇所です。

#header-in, #wrap-in, #navi-in, #footer-in, #gazou-in {
	width: 1086px; //★変更前986px;
	margin-right: auto;
	margin-left: auto;
}
#wrap #wrap-in #main {
	float: left;
	width: 650px; //★変更前550px;
	padding-right: 39px;
	padding-left: 39px;
	padding-top: 20px;
	border: 1px solid #ccc;
	background-color: #FFF;
	border-radius: 4px 4px 4px 4px;
	padding-bottom: 20px;
}
.post .entry .entry-content {
	float: right;
	width: 480px; //★変更前380px;
	padding-left: 20px;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

#header-in, #wrap-in, #navi-in, #footer-in, #gazou-in {

width: 1086px; //★変更前986px;

margin-right: auto;

margin-left: auto;

}

#wrap #wrap-in #main {

float: left;

width: 650px; //★変更前550px;

padding-right: 39px;

padding-left: 39px;

padding-top: 20px;

border: 1px solid #ccc;

background-color: #FFF;

border-radius: 4px 4px 4px 4px;

padding-bottom: 20px;

}

.post .entry .entry-content {

float: right;

width: 480px; //★変更前380px;

padding-left: 20px;

}

元々の値に+100pxした値にしました。
これを保存してあげて、サイトを更新すれば記事の横幅が広がっているかと思います。

その他注意点

スタイルファイルを使って幅を広げるということは、既に書いてあった過去の記事も改行位置をずらすことになります。
変な位置で改行されてしまう場合は逆に読みづらくなりますので、一度横幅を変更したら、過去の記事について全体の見直しをしたほうが良いかもしれません。

Message コメントをキャンセル

関連記事

: スクロールしても記事タイトルをずっと画面に固定表示するカスタマイズ(V5用)

はじめに STINGER V3からV5にバージョンアップしたのが2014/9/ …

: スクロールしても記事タイトルをずっと画面に固定表示するカスタマイズ(V3用)

WordPressのSTINGERテンプレートに対して、記事タイト …

: パンくずリストをもっとカッコよくする

STINGERテンプレートは、WordPressサイトのテーマとし …

: 記事に設定したカテゴリが複数ある場合「パンくず」を全件表示させる

WordPressのSTINGERテンプレートでは、パンくずリスト(ブレッドクラ …

: 記事一覧に表示する各記事の概要を「続きを読む」タグまでにする

Information この記事はSTINGER v3用のカスタマイズ方法です。 …

: 記事の幅を広げるカスタマイズ(V5用)

以前STINGER v3にて、こちらの記事(記事の幅を広げるカスタマイズ)で記事 …

: 広告フロートの動きがおかしい問題の回避方法

WordPressテーマSTINGERのサイドバーにある「スクロール広告用」は …

: CSSファイル数を減らしてページ表示時間を最適化

STINGERテンプレートの場合、ダウンロード対象のCSSファイルは2つあります …

: 「続きを読む」ボタンのデザインをカスタマイズ

WordPressの醍醐味の一つ？であるだろうカスタマイズに着手しました。巷で …

: WordPressテーマをSTINGER5にバージョンアップ

STINGER配布サイトにて、STINGERのV5メジャーアップのアナウンスを発 …

PREV: AngularJS アプリケーション開発ガイド
NEXT: 記事一覧に表示する各記事の概要を「続きを読む」タグまでにする

記事の幅を広げるカスタマイズ(V3用)