stinger3 カスタマイズ サイドバーの幅縮小して、メインコンテンツの幅を広げる方法

今回紹介するのはstinger3のサイドバーの幅を縮小して、メインコンテンツ部分の幅を広げる方法を紹介します。

基本構造部分を変更する

まずワードプレスのダッシュボードから、「外観」→「エディター」→「style.css」を開きます。
下記のコード部分が幅を変更する部分です。コード全体でいうと、真ん中よりちょっと上あたりにあります。

下記のコードだと12行目と16行目にあたります。
下記のコードは変更後のコードでデフォルトだと、12行目が336px、16行目が550pxになっていました。

/*-----------------------------
基本構造
------------------------------*/

#header-in, #wrap-in, #navi-in, #footer-in, #gazou-in {
	width: 986px;
	margin-right: auto;
	margin-left: auto;
}
#wrap #wrap-in #side {
	float: right;
	width: 300px;
}
#wrap #wrap-in #main {
	float: left;
	width: 586px;
	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;
}


他に変更するべき点

メイン構造を変更すると、その他にも変更しないと、おかしい点がでてきます。

・検索バー

検索バーの変更

stinger3 幅を変更すると、検索バーがはみ出てしまう。
基本構造を変更すると、検索バーがはみでてしまいます。

検索バーの変更位置はコード全体の下のほうになります。検索フォームと記載されていますのでわかると思います。
こちらの10行目と16行目を変更します。デフォルトだと10行目が266px、16行目が286pxになっていました。
下記のコードのように、230px 250pxにすればぴったり収まります。

/*-----------------------------
検索フォーム
-----------------------------*/

#container #wrap #wrap-in #search {
	padding-top: 20px;
	padding-bottom: 0px;
}
#s {
	width: 230px;
	height: 24px;
	border: none;
	color: #333;
	padding-top: 4px;
	padding-right: 10px;
	padding-bottom: 4px;
	padding-left: 10px;
	background-color: #CCC;
	font-size: 14px;
	border-radius: 0;
}
#searchsubmit {
	position: absolute;
	top: 0;
	_top: 1px;
	left: 250px;
	border-radius: 0;
}


最後に

今回サイドバーを300pxにしましたが、変更した事により、検索バー以外にもずれがでる部分が多分たくさんあると思いますので、きがついたらその都度更新したいと思います。。

スティンガー5もカスタマイズしています!!

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です