共有テンプレート、simple_2、simple_3の
ちょっとしたテンプレのカスタマイズ方法を載せていきます。
■背景色を変えたい場合。↓スクロールバーの色
html {
scrollbar-track-color:#FFFFFF;
scrollbar-face-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
↓背景色
body {
margin :15px;
background-color :#FFFFFF;
text-align :center;
color :#666666;
font-size :10pt;
}
↑赤字部分を好きな色のコードに変えてください。全部同じ色になるようにして下さい。
■文字色を変えたい場合。body {
margin :15px;
background-color :#FFFFFF;
text-align :center;
color :#000000;
font-size :10pt;
}
textarea,input,select {
background-color :#FFFFFF;
font-size :10pt;
color :#000000;
border :1px #000000 solid;
}
↑赤字部分を好きな色のコードに変えてください。全部同じ色になるようにして下さい。
■リンク色を変えたい場合。/* リンクの設定
------------------------------------------------------ */
a {
text-decoration:none;
color : #000000;
}
a:hover {
text-decoration:underline;
color : #000000;
}
↑赤字部分を好きな色のコードに変えてください。
a /リンクの色
a:hover /マウスを乗せたときのリンクの色
■ページの上下左右の余白の幅を変えたい、無くしたい場合。body {
margin :15px;
background-color :#FFFFFF;
text-align :center;
color :#000000;
font-size :10pt;
}
↑赤字部分を書き換えてください。
余白を無くしたい場合は
0pxにしてください。
■2カラム版の記事とサイドバーを左右入れ換えたい場合。/* 本文部分の設定
------------------------------------------------------ */
div#primary-column {
float : right;
width : 445px;/* コンテンツ幅 */
}
/* サイドバー部分の設定
------------------------------------------------------ */
div#secondary-column {
float : left;
width : 190px;
}
↑の赤字部分を↓のように書き換えてください。
/* 本文部分の設定
------------------------------------------------------ */
div#primary-column {
float : left;
width : 445px;/* コンテンツ幅 */
}
/* サイドバー部分の設定
------------------------------------------------------ */
div#secondary-column {
float : right;
width : 190px;
}
↑このように
floatの
rightと
leftを逆にしてください。
■2カラム版の記事の幅を変えたい場合。↓
コンテナの幅/* コンテナ部分の設定
------------------------------------------------------ */
div#container {
width : 650px;
margin-left : auto;/* 左側のマージンを自動計算 */
margin-right : auto;/* 右側のマージンを自動計算 */
background-color : transparent;/* 背景を透過(bodyで指定した値が有効になります) */
text-align : left;
}
↓
本文の幅(3箇所とも同じ数値になるようにしてください。)
/* 本文部分の設定
------------------------------------------------------ */
div#primary-column {
float : right;
width : 445px;/* コンテンツ幅 */
}
div.section{
margin-bottom :15px;
width : 445px;/* コンテンツ幅 */
border : 1px #000000 solid;
}
/* 全記事表示部分の設定
------------------------------------------------------ */
div#titlelist {
padding :10px;
width : 445px;/* コンテンツ幅 */
margin-bottom :14px;
border : 1px #000000 solid;
}
↓
サイドバーの幅/* サイドバー部分の設定
------------------------------------------------------ */
div#secondary-column {
float : left;
width : 190px;
}
↑赤字部分を増やしたり減らしたりしてみてください。
本文部分とサイドバー部分の合計が、コンテナの幅以下になるようにして下さい。
本文部分+
サイドバー部分+15=
コンテナの幅くらいが丁度よいかと思います。
元のテンプレだと、
本文445px +
サイド190px + 余白15px =
コンテナ650pxという感じです。
■3カラム版の記事の幅を変えたい場合。3カラム版はちょっと面倒です。
↓
コンテナの幅/* コンテナ部分の設定
------------------------------------------------------ */
div#container {
width : 850px;
margin-left : auto;/* 左側のマージンを自動計算 */
margin-right : auto;/* 右側のマージンを自動計算 */
background-color : transparent;/* 背景を透過(bodyで指定した値が有効になります) */
text-align : left;
}
↓
本文と左サイドバーの幅div#wrap {
float : left;
width : 645px;
}
↓
本文の幅(3箇所とも同じ数値になるようにしてください。)
/* 本文部分の設定
------------------------------------------------------ */
div#primary-column {
float : right;
width : 440px;/* コンテンツ幅 */
}
div.section{
margin-bottom :15px;
width : 440px;/* コンテンツ幅 */
background-color :#FFFFFF;
border : 1px #000000 solid;
}
/* 全記事表示部分の設定
------------------------------------------------------ */
div#titlelist {
padding :10px;
width : 440px;/* コンテンツ幅 */
margin-bottom :14px;
border : 1px #000000 solid;
}
↓
左サイドバーの幅/* 左サイドバー部分の設定
------------------------------------------------------ */
div#secondary-column {
float : left;
width : 190px;
}
↓
右サイドバーの幅/* 右サイドバー部分の設定
------------------------------------------------------ */
div#secondary-column2 {
float : right;
width : 190px;
}
↑赤字部分を増やしたり減らしたりしてみてください。
本文部分ブロックと左右のサイドバーブロックの合計が、コンテナの幅以下になるようにして下さい。
左サイドバー+余白15px+
本文部分+余白15px+
右サイドバー=
コンテナの幅くらいが丁度よいかと思います。
この際、
左サイドバー+余白15px+
本文部分の幅を
#wrap部分に指定してください。
元のテンプレだと、
左サイド190px + 余白15px +
本文440px =
#wrap 645px#wrap 645px + 余白15px +
右サイド190px =
コンテナ850pxとなります。
…分かりにくいですね…。
■サイドバーが落ちる。記事内の画像やテーブルが、下記のコンテンツ幅より大きかったり、
同じくサイドバー内の画像やテーブルが、
サイドバー幅より大きい場合に、サイドバーが落ちます。
ブログ自体の幅を広げる場合は、
上記の「■記事の幅を変えたい場合。」を参考にして下さい。
幅はそのままで、はみ出した部分を表示しないようにするには、
下記のよう追加してください。
2カラムの場合
/* 本文部分の設定
------------------------------------------------------ */
div#primary-column {
float : right;
width : 440px;/* コンテンツ幅 */
overflow: hidden;
}
/* サイドバー部分の設定
------------------------------------------------------ */
div#secondary-column {
float : left;
width : 190px;
overflow: hidden;
}
↑赤字部分を書き加えてください。
3カラムの場合
/* 本文部分の設定
------------------------------------------------------ */
div#primary-column {
float : right;
width : 440px;/* コンテンツ幅 */
overflow: hidden;
}
/* 左サイドバー部分の設定
------------------------------------------------------ */
div#secondary-column {
float : left;
width : 190px;
overflow: hidden;
}
/* 右サイドバー部分の設定
------------------------------------------------------ */
div#secondary-column2 {
float : right;
width : 190px;
overflow: hidden;
}
↑赤字部分を書き加えてください。
■コンテナの背景色。/* コンテナ部分の設定
------------------------------------------------------ */
div#container {
width : 850px;
margin-left : auto;/* 左側のマージンを自動計算 */
margin-right : auto;/* 右側のマージンを自動計算 */
background-color : transparent;/* 背景を透過(bodyで指定した値が有効になります) */
text-align : left;
}
↑赤字部分を好きな色のコードに変えてください。
■記事の背景色。div.section{
margin-bottom :15px;
width : 440px;/* コンテンツ幅 */
background-color :#FFFFFF;
border : 1px #000000 solid;
}
#himitu {
background-color :#FFFFFF;
border :0px;
}
↑赤字部分を好きな色のコードに変えてください。
■サイドバーの背景色。.plugin {
margin-bottom :15px;
background-color :#FFFFFF;
border : 1px #000000 solid;
}
↑赤字部分を好きな色のコードに変えてください。
■全記事一覧の背景色。/* 全記事表示部分の設定
------------------------------------------------------ */
div#titlelist {
padding :10px;
width : 440px;/* コンテンツ幅 */
margin-bottom :14px;
background-color :#FFFFFF;
border : 1px #000000 solid;
}
↑赤字部分を好きな色のコードに変えてください。
■ベースカラーを好きな色に変えたい場合。ブログタイトルの背景色、日付の背景色、記事の枠など、
ブログのベースカラーを丸ごと変えたい場合、
メモ帳などにスタイルシートをコピーして、
置換を使うと楽に出来ます。
置換する文字:
ベースカラーのコード置換後の文字:
好きなカラーコード↓ベースカラーはこの辺にあります。赤字部分がベースカラーです。
(全部同じ色のはずなのでどれでもいいです。)
scrollbar-darkshadow-color:#000000;
/* ヘッダー部分の設定
------------------------------------------------------ */
div#header {
margin-bottom:15px;
padding:20px;
background-color:#000000;
div.entry-date{
padding :3px 5px;
background-color :#000000;
text-align : right;
font-weight :bold;
color :#FFFFFF;
}
■コメント、トラバ、アーカイブ等のタイトルの背景色。/* コメント、トラックバックの設定
------------------------------------------------------- */
h3 {
margin-bottom:0px;
padding :3px 5px;
background-color :#000000;
border-bottom : 1px #000000 solid;
font-size :10pt;
font-weight :bold;
}
/* 検索、月別、カテゴリ別タイトルの設定
------------------------------------------------------ */
h5 {
margin-bottom:15px;
padding :3px 5px;
background-color :#000000;
border : 1px #000000 solid;
font-size :12pt;
font-weight :bold;
}
↑赤字部分を好きな色のコードに変えてください。
■タイトル部分の背景を画像にする場合。例)タイトル部分に高さ250pxの背景画像を左上に固定して表示したい場合。
/* ヘッダー部分の設定
------------------------------------------------------ */
div#header {
margin-bottom:15px;
padding:20px;
background-color : #000000;
color : #FFFFFF;
}
↑の赤字部分を消して、
↓青、赤、緑、オレンジ部分を必要に応じて書き加えてください。
/* ヘッダー部分の設定
------------------------------------------------------ */
div#header {
margin-bottom:15px;
padding:20px;
height : 250px;
background : url("画像のURL") top left no-repeat;
color : #FFFFFF;
}
青字部分:高さの指定
画像に合わせて、タイトル部分の縦幅を変えたいときは
青字部分のheight(高さ)も追加してください。
赤字部分:画像の指定
緑字部分:表示位置の指定
繰り返し等の表示の指定例
★左上固定、繰り返し無し。
background : url("画像のURL") top left no-repeat;
★右下固定、繰り返しあり。
background : url("画像のURL") bottom right repeat;
★中央固定、横方向に繰り返し。
background : url("画像のURL") center repeat-x;
画像の配置は以下の要素を組み合わせて指定してください。
何も指定しない場合は左上から繰り返し表示になります。
top(上)
bottom(下)
center(中央)
right(右)
left(左)
repeat、もしくは指定無し(繰り返し)
no-repeat(繰り返し無し)
repeat-x(横方向に繰り返し)
repeat-y(縦方向に繰り返し)
ピンク部分:文字色の指定
※因みに幅はコンテナの幅になります。
/* コンテナ部分の設定
------------------------------------------------------ */
div#container {
width : xxxpx;
xxx部分がコンテナの幅になります。
デフォルトでは
2カラム
650px3カラム
850pxになっています。
■フォームのカスタマイズ。textarea,input,select {
background-color :#FFFFFF;
font-size :10pt;
color :#000000;
border :1px #000000 solid;
}
background-color : 背景色
color : 文字色
border : 枠線の太さ、色、種類
■追記部分を折りたたみにしたい場合。■記事の上にフリーエリアを設けたい場合。思いつき次第増やしていきます。
※質問をされる場合はまずこちらをお読みください。http://box01.blog106.fc2.com/blog-entry-13.html