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

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

ヘッド部分にオリジナル画像を貼り付けたら

画像に合わせてタイトル、概要の位置、サイズ、色の変更です





タイトル(h1)の文字サイズを25px→20px 文字色を#006600→#ffffff(白)表示位置を中央に

概要(h2)の文字サイズを11px→14px 文字色を#000000→#ffffff(白)表示位置を中央に


※位置、サイズ、色、等は下を参考に皆さんの画像に合わせて調整下さい


CSSの最後にコピペ


#header h1,
#header h2{/*位置の初期化*/
margin:0;
padding:0;
}
#header h1{

padding-top:15px;/*表示位置上から15px*/
text-align: center;/*表示位置センター*/

}
#header h1 a,
#header h1{
color:#ffffff;/*文字色*/
font-size:20px;/*文字サイズ*/
}
#header h2{
color:#ffffff;/*文字色*/
font-size:14px;/*文字サイズ*/
text-align: center;/*表示位置センター*/
}






タイトルを25px→20px 文字色を#006600→#ffffff(白)位置を上から370px左から40pxに

概要を11px→14px 文字色を#000000→#ffffff(白)表示位置を左から40pxに

CSSの最後にコピペ

#header h1,
#header h2{/*位置の初期化*/
margin:0;
padding:0;
}
#header h1{
padding :370px 0 0 40px;;/*表示位置上から370px左から40px*/
}
#header h1 a,
#header h1{
color:#ffffff;/*文字色*/
font-size:20px;/*文字サイズ*/
}
#header h2{
color:#ffffff;/*文字色*/
font-size:14px;/*文字サイズ*/
padding-left:40px;/*表示位置左から40px*/
}


※後々を考えて左からの位置をmarginからpaddingに変更しておきます


http://hama-sush-jp.pro/exlink001/


※この中にfont-familyを指定すれば書体も変更できますが・・・・・

 これは見ている方のパソコンにどんなフォントがインストールされているかで

 見え方が違ってきます・・・最悪、文字化けも・・・・


 それならタイトル文字まで含めて画像にして

 タレントブログみたいにクリックしたらトップページに戻るようにしちゃおう・・・って、つづく



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

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


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

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

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


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

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

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