※クリックすると該当箇所に移動します
1．文字サイズの変更
CSS の ■文字サイズと行の高さ の次の記述を変更してください。
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■文字サイズと行の高さ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*主要部分1(記事本文など)*/
.article-body,.post-body,.message,.message-board {
font-size: 14px;
line-height: 1.8;
}
/*サイトタイトル*/
.blog-title {
font-size: 26px;
line-height: 1.4;
}
～以下省略～
「 font-size: 14px; 」が文字サイズの指定です。数値を変更してください。
「 line-height: 1.8; 」は行間の指定です。基本的に変更不要です。
※極端に大きい文字サイズにするとブログレイアウトが崩れる場合があります
2．文字色の変更
※参考：カラーコード表 http://www.colordic.org/
文字色ひとつでブログの雰囲気は随分と変わります。
濃い色(#000や#111)にすれば くっきり とした雰囲気になり、
淡い色(#555や#777)にすれば やんわり とした雰囲気になります。
CSS の ■文字色 の次の記述を変更してください。
主要部分
記事本文、記事タイトル、サイトタイトル、グローバルメニューなどの箇所です。
/*----------------------
主要部分 #333
------------------------*/
body,.blog-title a,#globalmenu a,.sidebar-title,.sidetitle,.style03 a,.page-title a,.cat a,.related-articles h3 {
color: #333;
}
※文字色の変更は 5行目の #333 を変更してください。
サイドバー
メインコンテンツのリンクを目立たせるために淡い黒(#777)にしています。
/*----------------------
サイドバー #777
------------------------*/
.sidebar-body,.side,.sidecontent,.ad4,#calendar,.calendarhead,.calbody {
color: #777;
}
/*link*/
.sidebar-body a,.side a,.side-tag a,.sidecontent a,.ad4 a,.side2 a .spa-title,.syndicate a,#calendar a,.calendarhead a {
text-decoration: none; /* none or underline */
color: #777; /* #777 or none */
}
※文字色の変更は 5行目の #777 を変更してください。
※リンク文字（色付）にするときは
11行目を color: none; に変更してください。
※リンク文字にアンダーラインを付けるときは
10行目を text-decoration: underline; に変更してください。
サブ部分
記事のヘッダー・フッター、サイト説明文、記事一覧の概要などの箇所です。
.kensaku-submit,.kensaku-submit2,.blog-intro,.article-header,.article-header a,.article-footer,.article-footer a,.af-body,.kl-date,.kl-cat a,.kl-intro,.date,.kl-info2,.cminfo,.cmbody1,.cmbody2,.cmbody3,.tbbody,.trackback-body,.cm-btn,button,.tb-url,.pankuzu,.pn3,.pagination a,.cm-form dt {
color: #777;
}
/*link*/
#footerinfo a,.af-body a,.pankuzu a,.kl-info2 a,#tag_cloud a,.tag-search a {
text-decoration: none; /* none or underline */
color: #777; /* #777 or none */
}
.kl-list a,.pn3-l a,.pn3-r a {
text-decoration: none; /* none or underline */
}
※文字色の変更は 5行目の #777 を変更してください。
※リンク文字（色付）にするときは
11行目を color: none; に変更してください。
※リンク文字にアンダーラインを付けるときは
10・14行目を text-decoration: underline; に変更してください。
リンク文字（デフォルトは青）
/*----------------------
全体 link 色 #1111cc
------------------------*/
a:link {
color: #1111cc;
}
※5行目の #1111cc をお好みの色に変更してください。
訪問済みリンク文字（デフォルトは紫）
/*----------------------
全体 visited 色 #800080
------------------------*/
a:visited {
color: #800080;
}
※5行目の #800080 をお好みの色に変更してください。
ホバー時リンク文字（デフォルトは赤）
/*----------------------
全体 hover 色 #a00000
------------------------*/
a:hover,.sidebar-body a:hover,.side a:hover,.side-tag a:hover,.sidecontent a:hover,.ad4 a:hover,.side2 a:hover .spa-title,#footerinfo a:hover,#tag_cloud a:hover,.syndicate a:hover,#calendar a:hover {
color: #a00000;
}
※5行目の a00000 をお好みの色に変更してください。
3．文字の太さ・影
太文字を通常文字にするだけで、やんわりとした雰囲気になります。お好みで変更してください。
/*----------------------
文字の太さ・影
------------------------*/
/*主要箇所の文字の太さ*/
.blog-title,#globalmenu,.sidebar-title,.sidetitle,.ftitle,.style03,.page-title,.style04,.style05,.style06,.message-title,.kl-list,.pn3-l a,.pn3-r a,.live-related {
font-weight: bold; /* bold or normal */
}
/*サイト&記事タイトル影*/
.blog-title,.style03,.page-title {
text-shadow: 1px 1px 3px rgba(0,0,0,0.3); /* or none */
}
/*その他タイトル影*/
.ftitle,.style04,.style05,.style06,.message-title {
text-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* or none */
}
※太文字箇所を通常文字にするときは
6行目を font-weight: normal; に変更してください。
※タイトルを影無しにするときは
11・16行目を text-shadow: none; に変更してください。
4．ベースカラー部分
ベースカラーの変更のページで説明しています。こちらをご覧ください。
→ ベースカラーの変更