FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

新テンプレートをリリースしました。

新テンプレートを共有テンプレートにリリースしました。

standard_monotone

まだ承認中です。明日にはダウンロードできるようになると思います。宜しければどうぞお使いください。
スポンサーサイト
[ 2006/01/22 23:34 ] 雑記 | TB(0) | CM(7)

色を変える

色を変える方法を紹介します。
スタイルシートの次の数値を変えると色が変わります。

/* 画面全体 */
body {

  background-color: #eeeeee; /* 画面背景の色 */

}

/* サイト全体 */
.base_table {

  background-color: #000000; /* 外枠の色 */

}

/* ヘッダーレイアウト */
#header {

  background: #000000; /* ヘッダー背景の色 */

}

/* サイトタイトル */
h1 a:link, h1 a:visited, h1 a:active, h1 a:hover {

  color: #ffffff; /* タイトルの色 */

}

/* サブタイトル(サイト説明) */
h2 {

 color: #ffffff; /* サブタイトルの色 */

}

/* メインボディ */
#main_body {

  background-color: #ffffff; /* ボディ背景の色 */

}

/* エントリー(記事)タイトル */
h3 a:link,h3 a:visited,h3 a:active,h3 a:hover{

  color: #000000; /* 記事タイトルの色 */

}
h3 {

  background: #ffffff; /* 記事タイトル背景の色 */

  border-left: #000000 10px solid; /* 飾りの色(左) */
  border-right: #000000 1px solid; /* 飾りの色(右) */
  border-bottom: #000000 1px solid; /* 飾りの色(下) */

}

/* エントリー(記事)スタイル */
.article {

  color: #000000; /* エントリー(記事)の文字の色 */

}

/* メニュータイトル */
.menu_title {

  color: #ffffff; /* メニュータイトルの色 */

  background: #000000; /* メニュータイトル背景 */

}

/* メニューコンテンツ */
.menu_cont {

  color: #000000; /* メニューコンテンツの文字の色 */

}

/* レフトカラム(左側メニューカラム)の外枠 */
.left_outline {

  border: 1px #000000 solid; /* レフトカラムの外枠の色 */

}

/* ライトカラム(右側メニューカラム)の外枠 */
.right_outline {

  border: 1px #000000 solid; /* ライトカラムの外枠の色 */

}

/* フッター */
#footer {

  background-color: #000000; /* フッターの背景の色 */

  color: #ffffff; /* フッターの文字の色 */

}

/* カレンダー */
.calender {
  color: #000000;

}

リリーステンプレートに定義していないのですが、もしフッターのリンクの色を変えたくなった場合は次をスタイルシートに加えてください。

#footer a{
  color: #ffffff; /* フッターのリンクの色 */
}

一部リリース時期によってクラス名、コメントアウトが違う場合があります。もし解からないところがあれば出来るだけサポート致しますのでブログURLと色を変えたいところを明示してお知らせください。

お好みの色にカスタマイズしてくださいね。

画像間の隙間(マージン)を調節する

(1/18~22)にアップしていたバージョンでは「画像を並べると画像間のマージン(隙間)が少ない。特にFireFox,NetScape,Operaでは画像がくっついてしまう」という問題がありました。

この問題を修正して再アップ致しました。(1/22)
修正箇所を報告します。

スタイルシートに追加

/* 画像 */
img {
  margin: 5px;
}

数値を増やせば隙間も大きくなります。

お騒がせして大変申し訳ありませんでした。

リンクのスタイルを変える

リンクのスタイルや色を変える方法を紹介します。

スタイルシートの次の部分を編集します。スタイルシート上部にありスクロールしなくても見えるところにあるのですぐに見つけられると思います。


/************************************** ▼ リンクの色 ▼ */
a:link { color: #000000; }
a:visited { color: #000000; }
a:hover { color: #000000; }
a:active { color: #000000; }
/************************************** ▲ リンクの色 ▲ */


赤い部分の数値を変えてお好みの色にカスタマイズしてください。
また、リンクの下線を消したい場合は次の赤い文を加えます。


/************************************** ▼ リンクの色 ▼ */
a:link { color: #000000; text-decoration:none; }
a:visited { color: #000000; text-decoration:none; }
a:hover { color: #000000; text-decoration:none; }
a:active { color: #000000; text-decoration:none; }
/************************************** ▲ リンクの色 ▲ */


ちなみに4種類のリンクの意味は次のようになっています。

link   未訪のリンク
visited 訪問済みのリンク
hover  カーソルが上に乗っているリンク
active  アクティブ中のリンク

マウスカーソルを上に乗せたときだけ下線が出る、訪問済みは解かりやすく色を変える等、色々な使い方が出来ます。

お好みの色、スタイルにカスタマイズしてください。


< ここからは追記 (2006/08/09) >
「text-decoration:」の後ろには次のようなものがあります。

none 下線は付きません。

underline テキストに下線が付きます。

overline テキストに上線が付きます。

line-through テキストに打ち消し線が付きます。

blink テキストが点滅します。

例えばカーソルが乗ったときだけ下線を付けたい場合は次のようになります。

/************************************** ▼ リンクの色 ▼ */
a:link { color: #000000; text-decoration:none; }
a:visited { color: #000000; text-decoration:none; }
a:hover { color: #000000; text-decoration:underline; }
a:active { color: #000000; text-decoration:none; }
/************************************** ▲ リンクの色 ▲ */
ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
12 | 2006/01 | 02
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

12 | 2006/01 | 02
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
ユーザータグ


△ ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。