小粋空間テーマを弄る
デフォルトだと大分狭いので幅を広げる
自分はブラウザを丁度画面半分の幅で開いた状態で
サイトを閲覧することが多いのでフルHDの半分
960pxを基準にサイト全体の幅を設定することにした
まず小粋空間公式サイトの
という幅変更を支援してくれるページに行く
使用方法は同じページに書いてあるのでそれを参考に
左右両方のサイドバーはなるべく同じ幅が良い？
んで調整後にGet CSSを押して出たcssコマンドをコピー
WordPressの外観→テーマの編集で
style.cssを開きcssの一番下部に
コピーしたcssコマンドを貼り付け
ただしそのままではレイアウトが崩れるので修正する
参考までに当ブログのcssは
/* 3カラム固定レイアウト(ブログ記事全体) */
/* 記事部分の内側余白の調整(padding) */
.layout-three-column-right .blog,
.layout-three-column .blog {
padding: 10px 10px;
}
/* ページ全体の幅 */
/* (記事部分の幅)+(左サイドバーの幅)+(右サイドバーの幅)+2pxの合計を入力 */
.layout-three-column #box {
width: 936px;
}
/* 記事部分の幅 */
.layout-three-column #content {
width: 530px;
}
/* 左サイドバーの幅 */
.layout-three-column #links-left-box {
width: 202px;
}
/* 右サイドバーの幅 */
.layout-three-column #links-right-box {
width: 202px;
}
/* ページ末尾の幅 */
/* (ページ全体の幅)と同じpx数を入力 */
.layout-three-column #footer {
width: 936px;
}
/* レイアウト崩れの修正 */
/* margin-leftに左サイドバー widthに記事部分の幅を入力 */
html > body.layout-three-column #content {
margin-left: 202px;
width: 530px;
}
/* margin-leftに-{(左サイドバーの幅)+(記事部分の幅)+2px}の合計を入力 */
html > body.layout-three-column #links-left-box {
margin-left: -734px; /* ←マイナスを付けること！ */
}
以上を追記している
*表示がおかしくなったり元に戻したい場合は
追記した部分を削除する
*追記する理由は重複したコマンドがある場合は
上から順に処理されるため
デフォルトの設定を保存しておく意味で追記する
できればstyle.cssをバックアップしてから編集が望ましい
これでページ全体の幅を広げることに成功した
次はブログタイトル部分に画像を張る方法
コメントを残す