■simple_xxx 共有テンプレートカスタマイズ(7/27更新以降)

共有テンプレートの
ちょっとしたテンプレのカスタマイズ方法を載せていきます。

■背景色を変えたい場合。

html {scrollbar-track-color:#000000;
scrollbar-face-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-highlight-color:#000000;

/* body要素以下全てに適用されます */
body {margin : 15px 20px 0px 20px;
background-color:#000000;

/* 管理者だけにコメント */

input#himitu {
margin-right : 0.5em;
border:0px;background-color:#000000;
}

↑赤字部分を好きな色のコードに変えてください。全部同じ色になるようにして下さい。

■文字色を変えたい場合。

/* body要素以下全てに適用されます */
body {margin : 15px 20px 0px 20px;
background-color:#FFFFFF;
color:#000000;

textarea,input,select{
border:1px solid #0066CC;
background-color:#FFFFFF;
color:#000000;
font-size:12px;
}

/* フッター部分の設定
----------------------------------- */
div#siteinfo-legal {text-align : center;}
div#siteinfo-legal p {
padding :0;/* パディング */
border-top : 1px solid #0066CC;/* 上線 */
text-align : center;/* センタリング */
}
div#siteinfo-legal p a{color:#000000;}

↑赤字部分を好きな色のコードに変えてください。全部同じ色になるようにして下さい。

■リンク色を変えたい場合。

/* リンクの設定
----------------------------------- */
a {text-decoration : none;color:#000000;cursor:help;}
a:link {color : #000000;}
a:visited {color : #000000;}
a:hover {color : #111111;text-decoration:underline;}
a:active {color : #111111;}

↑赤字部分を好きな色のコードに変えてください。
a /リンクの色
a:link /未訪問リンクの色
a:visited /訪問済みリンクの色
a:hover /マウスを乗せたときのリンクの色
a:active /クリックしたときのリンクの色

■ブログタイトル上部の余白をなくしたい場合。

/* body要素以下全てに適用されます */
body {margin : 15px 20px 0px 20px;

↑この部分を

/* body要素以下全てに適用されます */
body {margin : 0px 20px;

↑このように書きかえてください。

■記事とサイドバーを左右入れ換えたい場合｡

/* 本文部分ブロック */
div#primary-column {
float : left;/* 左側に回り込む */

/* サイドバーブロック */
div#secondary-column {
float : right;/* 右側に回り込む */

↑この部分を

/* 本文部分ブロック */
div#primary-column {
float : right;/* 右側に回り込む */

/* サイドバーブロック */
div#secondary-column {
float : left;/* 左側に回り込む */

↑このように書きかえてください。

■記事の幅を変えたい場合。
　※7/26以前にダウンロードした方はこちら。

↓ブログの幅

/* レイアウト用ブロックの設定
----------------------------------- */
div#container {
width : 600px;/* コンテナの幅 */

↓本文と、サイドバーの幅

/* 本文部分ブロック */
width : 405px;/* コンテンツ幅 */

/* サイドバーブロック */
width : 180px;/* サイドバー幅 */

↑赤字部分を増やしたり減らしたりしてみてください。本文部分ブロックとサイドバーブロックの合計が、コンテナの幅以下になるようにして下さい。
本文部分ブロック+サイドバーブロック+15=コンテナの幅
くらいが丁度よいかと思います。

■プロフィール画像の枠を消したい場合。

/* プロフィール画像 */

p.plugin-myimage img {
display : block;/* ブロックレベルで表示 */
margin : 5px 0px 10px 0px;/* マージン */
border : 1px solid #000000;/* 枠線 */
}

↑赤字部分を消してください。

■サイドバーが落ちる。

記事内の画像やテーブルが、下記のコンテンツ幅より大きかったり、
同じくサイドバー内の画像やテーブルが、
サイドバー幅より大きい場合に、サイドバーが落ちます。
ブログ自体の幅を広げる場合は、
上記の｢■記事の幅を変えたい場合。｣を参考にして下さい。
幅はそのままで、はみ出した部分を表示しないようにするには、
下記のよう追加してください。

/* 本文部分ブロック */
div#primary-column {
float : left;/* 左側に回り込む */
width : 405px;/* コンテンツ幅 */
voice-family : "\"}\"";/* おまじない */
voice-family : inherit;/* おまじない */
overflow: hidden;
}

/* サイドバーブロック */
div#secondary-column {
float : right;/* 右側に回り込む */
width : 180px;/* サイドバー幅 */
overflow: hidden;
}

↑赤字部分を書き加えてください。

■コンテナの背景色。

/* レイアウト用ブロックの設定
----------------------------------- */
div#container {
width : 600px;/* コンテナの幅 */
margin-left : auto;/* 左側のマージンを自動計算 */
margin-right : auto;/* 右側のマージンを自動計算 */
background-color : transparent;/* 背景を透過（bodyで指定した値が有効になります） */
text-align : left;/* 古いIE用にセンタリングした部分を元に戻す */
}

↑赤字部分を好きな色のコードに変えてください。

■記事の背景色。

/* Primary-Columnの設定
----------------------------------- */
/* 各記事毎のブロック */

div.section {background-color :#000000;
margin-bottom : 15px;/* 記事と記事の間隔 */
border:1px solid #999999;
}

↑赤字部分を書き加えて、#000000部分を好きな色のコードに変えてください。

■サイドバーの背景色。

/* Secondary-Columnの設定
----------------------------------- */
div#plugin_content {background-color :#000000;
border:1px solid #999999;
margin-bottom:15px;
padding:8px;}

↑赤字部分を書き加えて、#000000部分を好きな色のコードに変えてください。

■コメントとコメントの編集の背景色。

input#himitu {
margin-right : 0.5em;
border:0px;background-color:#FFFFFF;
}

↑これはチェックボックスの背景色です。赤字部分を好きな色のコードに変えてください。

/* コメント全体 */
.comment {background-color :#000000;
margin-bottom : 15px;
border:1px solid #999999;
}

↑赤字部分を書き加えて、#000000部分を好きな色のコードに変えてください。

■トラックバックの背景色。

/* トラックバックトップ+URL */
#trackback{background-color :#000000;
margin-bottom : 15px;
border:1px solid #999999;
}

↑赤字部分を書き加えて、#000000部分を好きな色のコードに変えてください。

■ベースカラーを好きな色に変えたい場合。

ブログタイトルの背景色、日付の背景色、記事の枠など、
ブログのベースカラーを丸ごと変えたい場合、
メモ帳などにスタイルシートをコピーして、
置換を使うと楽に出来ます。

置換する文字:ベースカラーのコード
置換後の文字:好きなカラーコード

↓ベースカラーはこの辺にあります。赤字部分がベースカラーです。
　(全部同じ色のはずなのでどれでもいいです。)

scrollbar-darkshadow-color:#000000;

/* タイトル部分 */
div#branding {width:100%;
padding:20px 0px;
background-color:#000000;}

/* 記事の日付部分 */

div.section h2 {padding : 0 3px;
margin-bottom :0;
background-color:#000000;

■タイトル部分の背景を画像にする場合。

例)タイトル部分に高さ250pxの背景画像を左上に固定して表示したい場合。

/* タイトル部分 */
div#branding {width:100%;
padding:20px 0px;
background-color:#000000;}

↑の赤字部分を消して、
↓青、赤、緑部分を必要に応じて書き加えてください。

/* タイトル部分 */
div#branding {width:100%;
height : 250px;
padding:20px 0px;
background : url("画像のURL") top left no-repeat;}

青字部分:高さの指定
画像に合わせて、タイトル部分の縦幅を変えたいときは
青字部分の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(縦方向に繰り返し)

■追記部分を折りたたみにしたい場合。

思いつき次第増やしていきます。