オリジナルスキンCSSの編集 ヘッド・タイトル1
少し基本に戻って・・・・・
オリジナルスキンにしよう！
ペタを付けていただいているサイトの方の中にも
スタンダードでそのまま使われている方が多く居られるようですので
初めからやっていこうと思います
まずは
ヘッド部分、タイトル部分のいじり方を書きたいと思います
・・・・って～か、もっと早くやれって内容ですよね
ここでの説明は
デザインの変更→スキンCSSの編集 がさわれるスキンを前提としています
スタンダードでもベーシックは余計なPRが入ります
スペシャルのスイッチャーはJavaScript部分が、
Flashを使っているスキンはFlash部分がジャマをしますのでうまくいかない場合があります
スタンダードぽっく見えてもFlashでアメーバニュースが流れるスキンもうまくいきません
基本からということで
スキンをスタンダードのグリーンから始めます
初期状態のCSSです(ヘッド・タイトルに関係した部分のみです)
/* -------- header : ブログタイトル部分 ----- */
#header{
height:100px;/*ヘッド部分の縦・・１*/
background-color:#98CB00;/*ヘッド部分の色・・２*/
}
#header h1,
#header h2{/*左上を0、基準を初期化*/
margin:0;
padding:0;
}
#header h1{/*タイトル*/
padding-top:15px;/*上のスキマ・・３*/
margin-left:10px;/*左のスキマ・・４*/
text-decoration:none;/*リンクの下線を消す*/
}
#header h2{/*概要*/
margin-left:10px;/*左のスキマ・・４*/
}
/* -------- font : 文字サイズ・装飾---------- */
#header h1 a,
#header h1{/*タイトル・・５*/
color:#006600;/*文字色*/
font-size:25px;/*文字サイズ*/
font-weight:bold;/*太文字*/
line-height:1.15;/*行間隔*/
}
#header h2{/*概要・・６*/
color:#000000;/*文字色*/
font-size:11px;/*文字サイズ*/
font-weight:normal;/*普通の太さ*/
line-height:1.15;/*行間隔*/
}
ヘッド部分にオリジナル画像を使います
現在のヘッド部分の横幅にあわせて画像を用意します（今回は760px）
高さはあとで設定しますので横幅だけピッタリの画像を作成してください
横幅の調べ方
CSSの編集で#frameを探してください（スキンによっては違う場合もあります）
width:***px; が横幅になります
#frame{
width:760px;
margin-left:auto;
margin-right:auto;
}
#frame{
width: 800px;
margin:0 auto;
background-color: #FFFFFF;
text-align:left;
}
#frame {
width: 760px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#frame {
width: 781px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
今回用意した画像（760px×420px）
もうだいぶ前に飼っていたTONOの写真です
古い写真ですのでぼけていてすみません
CSSの最後にコピペしてください
#header{
height:420px;/*画像の高さ*/
background-color: #ffffff;
background-image: url(画像のURL);
background-repeat:no-repeat;/*繰り返さない*/
}
http://ameblo.jp/exlink001/
※横幅が800px以上の画像をアップする方法
※基本的に青字で書かれているCSSを
自分のサイトに合わせサイズ、色、等を変更してから
CSSの1番最後に付け加えてください
最後に付け加えた部分を削除するだけで元に戻せます
タイトル・概要の文字、表示位置の変更につづく・・・
スクロールバー ・・2
※スクロールバーの色が適用されるのはIEだけです
スクロールバーの色を全体的に指定
ＣＳＳの最後に追加
html,body {
scrollbar-base-color: #ff0000; /*スクロールバーの色系*/
}
スクロールバーの各部分を細かく指定
ＣＳＳの最後にコピペ
html,body {
scrollbar-face-color: #33ffff; /* 1 表面の色 */
scrollbar-track-color: #ccffff; /* 2 バーの背景の色 */
scrollbar-arrow-color: #ffffff; /* 3 矢印の色 */
scrollbar-highlight-color: #99ff99; /* 4 ハイライトの色 */
scrollbar-3dlight-color: #ffff99; /* 5 外側のハイライトの色 */
scrollbar-shadow-color: #0099ff; /* 6 影の色 */
scrollbar-darkshadow-color: #0000ff; /* 7 外側の影の色 */
}
スクロールバー ・・1
これもよく、というか問い合わせのあった全部の女子中生から聞かれるスクロールバーの設定方法です
こん中にバナーを入れるのはやっているんでしょうか・・・・？
/* スクロール */
.scroll{
width:160px;/* A 横幅 */
height:200px;/* B 縦 */
background:#fff0f5;/* C バックの色、ちょっとピンク 白なら #ffffff あるいはこの行削除*/
overflow:auto;
}
※この中、全部の文字の色を変える場合は
color:#ff1493;/* 文字の色*/
を加えてください
※バナー画像とか入れる場合はこの中に
text-align:center;/* 真ん中に寄せるんなら*/
を加えてください
※枠で囲む場合はこの中に
border: solid 1px #000000;/* 枠*/
を加えてください***色を変えたり、枠を点線にしたり・・・
記事、フリースペース、概要等に
<div class="scroll">
ココに文章とかバナーとか
</div>
もし・・・フリースペース全体をスクロールさせるには・・
#freespace{
height:100px;
overflow:auto;
}
フリースペースの中でもバナーとか1部分だけスクロールさせる場合は上のやり方をして下さい
コメント欄をスクロールさせる場合
/* コメント欄スクロール */
#comment_module{
height:300px;/* 縦 */
background:#FFF0F5;/* バックの色 */
overflow:auto;
padding:10px;
}
この中に文章を書いたり
バナー画像を貼り付けてください
次はバーの色を変えます