HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」 と考える方々に分かりやすい解説記事を書きたいと思っています。
今回は小ネタです。CSS編集可能デザインで、2カラムにしている方は特に感じないと思いますが、3カラムデザインの場合、記事表示部分の幅が狭いと思われている方は多いんじゃないかと思います。
2カラムにはしたいけど、3カラムのよさも捨てがたい。なので私は今のところ3カラムにしているのですが、少し記事表示部分を広げています。
50ピクセル分広げています！
CSS編集可能デザインの元々の記事部分の幅は410ピクセル。これを約50ピクセル広げて幅460ピクセルにする方法です。
ページ幅を規定しているCSSは下記の部分です。
/* (3-6) 記事
--------------------------------------------*/
/* skinArticle 記事エリア */
.skinArticle{
/* 注 ベースのcssに margin-bottom の記述有り */
padding:16px 0;
border:1px solid #dddddd;
background:#ffffff;/* ←記事に背景を敷きたいとき */
}
.skinArticle2{}
.skinArticle3{}
/* skinArticleHeader 記事タイトルエリア */
.skinArticleHeader{
margin:0 29px;
padding:2px 10px;
border-left:5px solid #e4e4e4;
}
.skinArticleHeader2{}
/* skinArticleBody 記事本文エリア */
.skinArticleBody{}
.skinArticleBody2{
margin:0 29px;
}
/* skinArticleFooter 記事フッターエリア */
.skinArticleFooter{
margin:10px 29px 0;
border-top:1px dotted #949494;
}
上のソースコードの黄色くなった部分に手を入れます。
手を入れた後は、下記のようになります。
/* (3-6) 記事
--------------------------------------------*/
/* skinArticle 記事エリア */
.skinArticle{
/* 注 ベースのcssに margin-bottom の記述有り */
padding:16px 0;
border-style:hidden;
background:#ffffff;/* ←記事に背景を敷きたいとき */
}
.skinArticle2{}
.skinArticle3{}
/* skinArticleHeader 記事タイトルエリア */
.skinArticleHeader{
margin:0 5px;
padding:2px 10px;
border-left:5px solid #e4e4e4;
}
.skinArticleHeader2{}
/* skinArticleBody 記事本文エリア */
.skinArticleBody{}
.skinArticleBody2{
margin:0 5px;
}
/* skinArticleFooter 記事フッターエリア */
.skinArticleFooter{
margin:10px 5px 0;
border-top:1px dotted #949494;
}
やっていることは、記事の周りの罫線を消去して、記事タイトル、記事、記事フッターの両側の空きスペースを、29px→5pxに変更するということです。
最初の29ピクセルと、罫線の1ピクセルを足して30ピクセル。両側のこの空きを5ピクセルに変更しますので、25×2＝50。合計50ピクセル幅が広がることになるわけです！