ブログで稼ぐ!アフィリエイト入門

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
パソコン初心者でもできる!メールで副収入!

カスタマイズ(CSS)

次は、デザインを大きく左右するスタイルシート(CSS)の部分です。

一番上のほうのものは、ブログ全体に対してのスタイルシートです。

body, h1, h2, h3, form { margin: 0; padding: 0 }
body {
font-family: Verdana, sans-serif;  フォントのタイプ
background: url(http://blog14.fc2.com/template/arrow_o/image/bg.gif)
repeat-y top center #6D7966;  ブログ壁紙の部分
font-size: 83%;  フォントのサイズ
color:#4C4C4C;  フォントカラー
text-align: center;  テキストの表示位置
}

a:link { color:#E57300; text-decoration: none; }  通常のリンクの色
a:active { color: #999; text-decoration: none }  アクティブリンクの色
a:visited { color: #808080; text-decoration: none }  訪問済みリンクの色
a:hover { color: #CC7D3D; text-decoration: underline; }  マウスカーソルが 上に乗ったときの色


/* 全体囲み */
#all { width: 720px;  ページ全体の横幅
margin: 0 auto;
text-align: left;  テキストの表示位置
background: #FFF;  バックグラウンドカラー


H1タグは、サイトタイトルに部分に適応されています。
H1のスタイルシートを変えると、サイトタイトル部分が変化します。

H2タグは、サイト説明文に適応されています。
H2のスタイルシートを変えると、サイト説明文部分が変化します。

H3タグは、記事タイトル、サイドメニュー等に適応されています。
記事タイトル、サイドメニュー等は別々に指定できます。


メニュー部分の幅を変える場合

/* メニュー表示部分 */
#right {
margin: 5px 0;
width: 225px; ここを変える。
float: right;
overflow: hidden;
background: #FFF;


記事部分の幅を変える場合

/* 記事表示部分 */
#left {
width: 485px; ここを変える。
float: left;
overflow: hidden;
margin: 5px 10px 0 0;
background: #FFF;

*メニューの幅+記事の幅=ページ全体の横幅にならないと
テンプレートの形が崩れます。


トップページへ

パソコン初心者でもできる!メールで副収入!
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。