オリジナルスキンCSSの編集 ヘッド・タイトル1 | アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

オリジナルスキン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以上の画像をアップする方法


画像のURLって・・・?

※基本的に青字で書かれているCSSを

 自分のサイトに合わせサイズ、色、等を変更してから

 CSSの1番最後に付け加えてください

 最後に付け加えた部分を削除するだけで元に戻せます


タイトル・概要の文字、表示位置の変更につづく・・・



オリジナルスキンCSSの編集 ヘッド・タイトル2

オリジナルスキンCSSの編集 ヘッド・タイトル3


オリジナルスキンCSSの編集 サイドメニュータイトル1

オリジナルスキンCSSの編集 サイドメニュータイトル2

オリジナルスキンCSSの編集 サイドメニュータイトル3


CSS タイトル画像のロールオーバー・・・・

CSS タイトル画像のロールオーバー2

CSS タイトル画像のロールオーバー3