ブログデザインを少し調整しました

So-netブログを開設して、デザインは用意されている
テンプレートを使用していましたが、
いくつか不満があったので、少し調整してみました。
私はあまりWEBサイト関連は詳しくはないので、
たいした事はやっていないですが、テンプレートでは物足りなく、
自分で調整したい方の参考になればと思います。
　
　
以下、やった事を書いていきます。
※So-netブログである事を前提に記載しています。
※どんなテンプレートでも上手くいくかわからない事と、
　編集に失敗しておかしくなっちゃった場合などに備え、
　スタイルシートのバックアップを取得される事をお勧めします。
　また、責任も取れませんので、すみませんが自己責任でお願いします。
　なんかおかしくなったら「初期値に戻す」ボタンで戻してください。

まず、この見出しを作りました

↑この見出しのCSS設定を作りました。
なんだ、そんな事か、と言わないで下さい。
どうやってるんだろうと日々思っていた事を実現できたのでちょっと嬉しい。

この見出しの作り方ですが、
管理ページ　＞　デザインタブ　＞　テンプレート選択 & CSS編集
の適用されているテンプレート名の横の「編集」リンクをクリックして
スタイルシート編集ページに行き、
一番下あたりにでも、以下のコードを貼ります。
※⇒部分は説明なので、抜いてください^^;

.articles-body h3{　　　　　　⇒　記事本体に使用する想定のタグに、h3というタグを追加
border-left:10px solid #BAD3FF;　　　⇒　左側の帯を長さ(6px)、線の種類(solid)、色(#BAD3FF)、で設定
padding-left:10px;　　　　　　　　　⇒　左側の帯と文字列の空き幅を設定
font-weight:bold;　　　　　　　　　⇒　フォントを太字に設定
font-size: 130%;　　　　　　　　　⇒　フォントの大きさを1.3倍に設定
border-bottom: 1px solid #BAD3FF;　⇒　1pxの太さの下線を引く
}

※PC用のテンプレートの修正ですので、モバイル用の表示は考慮できていません。

上記コードを貼り付け後、保存を押します。
これでスタイルシートの修正が完了しましたので、
あとは記事作成の時に、この見出しを適用したい箇所に
＜h3＞文字列＜／h3＞ を記載すれば適用できます。
（＜＞＜／＞は実際は半角で。）
設定項目は他にも色々あるので、好みの見出しになるまで調整してみて下さい。
結構楽しいですよ。

テンプレートだと、ページ全体の幅がせまいので少し広げた

この調整もスタイルシートを修正して調整します。
私が適用しているワイドレッドのテンプレートは
幅が900pxとなっていたので、100px足して1000pxに拡げました。

具体的には、スタイルシートの以下の部分を修正しています。

#banner h1{
width: 900px　⇒　1000px;
margin: 0 auto;
font-size: 28px;
}

#lead{
width: 900px　⇒　1000px;
margin: 0 auto;
color: #ffffff;
}

#content{
width: 900px　⇒　1000px;
margin: 0 auto;
text-align: left;
}

これで、ページ全体の幅が少し広がったかと思います。

ただ、私のテンプレートの場合、左サイド、中央、右サイド、
の３分割されているページになりますので、
全体の幅に合わせて、３つの部分も少しずつ広げました。

■中央部分

/* Articles */
#main {
float: left;
width: 480px　⇒　540px;
margin-left: 20px;
overflow: hidden;
}

.articles {
width: 480px　⇒　540px;
margin-bottom: 20px;
overflow: hidden;
background: url(/_common/skins/22/images/dotline.gif) repeat-x left bottom;
}

■両サイド
※フォントも少し大きくする修正（90%⇒100%）をしています。

/* Side */
#side-a {
float: left;
width: 170px　⇒　190px;
padding-right: 20px;
overflow: hidden;
font-size: 90%　⇒　100%;
background: url(/_common/skins/22/images/dotline_tate.gif) repeat-y right top;
}

#side-b {
float: right;
width: 170px　⇒　190px;
padding-left: 20px;
overflow: hidden;
font-size: 90%　⇒　100%;
background: url(/_common/skins/22/images/dotline_tate.gif) repeat-y left top;
}

.sidebar {
width: 170px　⇒　190px;
margin-bottom: 18px;
overflow: hidden;
}

これでページ全体の幅、左サイド、中央、右サイド、
の全てが広がったページになるかと思います。

記事中の文字のフォントと大きさを変えた

最初から思っていたのですが、テンプレートを適用した初期状態だと、
全体的に文字が小さく、フォントも見づらかったので、
なんとかしたいなと思っていて、今日やっと、
記事のフォント、サイズ、行間の間隔を調整しました。

具体的には、スタイルシートの以下の部分を修正しています。

/* Articles */
#main {
float: left;
width: 540px;
margin-left: 20px;
overflow: hidden;
font-family : 'メイリオ';　⇒　フォントにメイリオを指定する設定を追加
}

.articles-body {
margin-bottom: 20px;
line-height: 1.6　⇒　1.9;
font-size: 110%;　⇒　フォントのサイズを110%に指定する設定を追加
}

※両サイドも同様の要領で文字のサイズを調整しています。

これで少し見やすくなり、なんだかそれっぽいブログになって満足です。
もしかしたらもっとちゃんとしたやり方もあるのかもしれないので、
他に良い方法があればまた記事にしたいと思います。

それでは今日はこのへんで。