「colorfree」の色変更例
Manannan Mac Lir
共有テンプレート「colorfree」は、メニュータイトル背景画像、記事タイトル上ラインを透過png（正式にはアルファチャンネルpng）にしてあります。
スタイルシートをエディター（「メモ帳」など）にコピー＆ペーストし、色コードをお好みの色コードに置換してください。（「メモ帳」の場合は、置換：Ctrl+H）
カレンダーの当日背景色指定のみ、HTML中にあります。
■#222=文字色
■#444=タイトル色
■#969=リンク色
■#c9c=枠線色
■#ede=背景色
一番右のカラーコーディネートは、COLOURloversの「パレット：Jamba!」(by vialed)をお借りしています。（COLOURloversを最初に知ったのはGIGAZINEさんの記事がきっかけでした……１年も前なのか(ｰωｰ;)
スタイルシートをエディター（「メモ帳」など）にコピー＆ペーストし、色コードをお好みの色コードに置換してください。（「メモ帳」の場合は、置換：Ctrl+H）
カレンダーの当日背景色指定のみ、HTML中にあります。
■#222=文字色
■#444=タイトル色
■#969=リンク色
■#c9c=枠線色
■#ede=背景色
 ■#000=文字色 ■#000=タイトル色 ■555=リンク色 ■#c00=枠線色 ■#555=背景色 ■var bgcol='#ccc'; /* 「当日」の背景色 */ |  ■#222=文字色 ■#444=タイトル色 ■#F06=リンク色 ■#0f7=枠線色 ■#fde=背景色 var bgcol='#0f7'; /* 「当日」の背景色 */ |  ■#222=文字色 ■#FEA219=タイトル色 ■#818113=リンク色 ■#B02319=枠線色 ■#FBFAA7=背景色 var bgcol='#FF5734'; /* 「当日」の背景色 */ |
一番右のカラーコーディネートは、COLOURloversの「パレット：Jamba!」(by vialed)をお借りしています。（COLOURloversを最初に知ったのはGIGAZINEさんの記事がきっかけでした……１年も前なのか(ｰωｰ;)
Comment
[73]
一つ教えていただきたいのですが、「リンク（公式）」「Tree-Recent」の後ろにある背景画像の色は変えられますか？
透過pngなっている、と書いてあるんですけど、画像を作らずに（文字を書き換えるだけで）変更する事ができるんでしょうか？
透過pngなっている、と書いてあるんですけど、画像を作らずに（文字を書き換えるだけで）変更する事ができるんでしょうか？
[74] horo1161さん、いらっしゃいませ。
テンプレートのスタイルシートのなかで、
「.menutitle」
を検索(ctrl+f)してください。
.menutitle {
(中略)
background-color:#ede;
(中略)
}
上記部分の色コードを変更すると、「メニューのタイトル」に（全部）反映されます。
それとも、全部個別に違う色にかえる意味でしょうか？だとすると、もうちょっと面倒です。
「.menutitle」
を検索(ctrl+f)してください。
.menutitle {
(中略)
background-color:#ede;
(中略)
}
上記部分の色コードを変更すると、「メニューのタイトル」に（全部）反映されます。
それとも、全部個別に違う色にかえる意味でしょうか？だとすると、もうちょっと面倒です。
[75]
できました!!
ありがとうございます。
こんな感じにしたかったんです。
テンプレート、使わせていただきます。
ありがとうございました。
ありがとうございます。
こんな感じにしたかったんです。
テンプレート、使わせていただきます。
ありがとうございました。
[76] horo1161さん
どんどんお好きな色に塗り替えてしまってください
[77]
素敵なテンプレートですね
色が綺麗で使わせて頂きたいのですが
文字の大きさを変えても良いでしょうか？
その際、どの部分ＨＴＭＬを変えたらよいかアドバイス頂けますか？
変えたい場所は、両サイドと記事部分です
色が綺麗で使わせて頂きたいのですが
文字の大きさを変えても良いでしょうか？
その際、どの部分ＨＴＭＬを変えたらよいかアドバイス頂けますか？
変えたい場所は、両サイドと記事部分です
[79] 沙耶さんいらっしゃいませ。
いろいろ指定したいのであれば、まずテンプレートスタイルシートのなかから、全体設定のファイルサイズ部分を削除してください。
body {（略）
font-size : x-small !important; /* 古いIEの文字サイズ */
voice-family : ""}""; /* おまじない */
voice-family : inherit; /* おまじない */
font-size : small !important; /* CSSを正しく解釈出来るブラウザ用の文字サイズ */
}
●中央カラム関係
/* 記事のタイトル部分 */
.entry-header {(略)
font-size :x-small ; /* 古いIEの文字サイズ ★ここを訂正*/
border-bottom : 0px solid #c9c;
voice-family : ""}""; /* おまじない */
voice-family : inherit; /* おまじない */
font-size : small; /* CSSを正しく解釈出来るブラウザ用の文字サイズ ★ここを訂正*/
color:#444;
}
html>body div.c h2 {
font-size : small; /* Opera用の文字サイズ ★ここを訂正*/
}
/* 記事本体部分 */
div.entry-body {（ここに文字サイズ追加）
}
/* メニュータイトル部分
------------------------------------------------------------ */
.menutitle {（略）
font-size : x-small; /* 古いIEの文字サイズ★ここを訂正 */
voice-family : ""}""; /* おまじない */
voice-family : inherit; /* おまじない */
font-size : small; /* CSSを正しく解釈出来るブラウザ用の文字サイズ★ここを訂正 */
}
両脇部分は、
div#secondary-column {（★ここに文字サイズ追加）
}
div#extra-column {（★ここに文字サイズ追加）
}
/* メニュータイトル部分
------------------------------------------------------------ */
.menutitle {（略）
font-size : x-small; /* 古いIEの文字サイズ ★ここを訂正*/
voice-family : ""}""; /* おまじない */
voice-family : inherit; /* おまじない */
font-size : small; /* CSSを正しく解釈出来るブラウザ用の文字サイズ ★ここを訂正*/
}
けっこう修正箇所多いですね。
body {（略）
font-size : x-small !important; /* 古いIEの文字サイズ */
voice-family : ""}""; /* おまじない */
voice-family : inherit; /* おまじない */
font-size : small !important; /* CSSを正しく解釈出来るブラウザ用の文字サイズ */
}
●中央カラム関係
/* 記事のタイトル部分 */
.entry-header {(略)
font-size :x-small ; /* 古いIEの文字サイズ ★ここを訂正*/
border-bottom : 0px solid #c9c;
voice-family : ""}""; /* おまじない */
voice-family : inherit; /* おまじない */
font-size : small; /* CSSを正しく解釈出来るブラウザ用の文字サイズ ★ここを訂正*/
color:#444;
}
html>body div.c h2 {
font-size : small; /* Opera用の文字サイズ ★ここを訂正*/
}
/* 記事本体部分 */
div.entry-body {（ここに文字サイズ追加）
}
/* メニュータイトル部分
------------------------------------------------------------ */
.menutitle {（略）
font-size : x-small; /* 古いIEの文字サイズ★ここを訂正 */
voice-family : ""}""; /* おまじない */
voice-family : inherit; /* おまじない */
font-size : small; /* CSSを正しく解釈出来るブラウザ用の文字サイズ★ここを訂正 */
}
両脇部分は、
div#secondary-column {（★ここに文字サイズ追加）
}
div#extra-column {（★ここに文字サイズ追加）
}
/* メニュータイトル部分
------------------------------------------------------------ */
.menutitle {（略）
font-size : x-small; /* 古いIEの文字サイズ ★ここを訂正*/
voice-family : ""}""; /* おまじない */
voice-family : inherit; /* おまじない */
font-size : small; /* CSSを正しく解釈出来るブラウザ用の文字サイズ ★ここを訂正*/
}
けっこう修正箇所多いですね。
[80]
早々と、お返事感激です
ご丁寧に書き込んで下さって嬉しいです
今から出掛けるのですが、帰ってから
さっそく、頑張ってやらせていただきます
本当にありがとうございました
ご丁寧に書き込んで下さって嬉しいです
今から出掛けるのですが、帰ってから
さっそく、頑張ってやらせていただきます
本当にありがとうございました
