●掲載ソースを追加して正しく表示されないときは次を確認ください。
・ソースが文字化けしている可能性があります。一旦テキストエディタに貼り付けて確認してください。
・ご自身で全角スペースを入力している可能性があります。全角スペースを削除してください。
●画像は説明用のイメージサンプル画像です。
実際のブログや管理画面とは細部の表示が異なる部分がありますので予めご了承ください。
●CSS/HTMLソースの行数の番号/色は説明用です。
実施のブログでは、行数が違う・行数表示が無い・色が無い、となりますので予めご了承ください。
文字サイズと文字色の変更
ブログ主要部分の文字サイズと文字色の変更が、
簡単にできるようにメインCSSを記述しています。
この説明はアップデート版（2015-12-10以降のリリース分）から適用します
文字サイズの変更方法
書き替えした メイン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; は行間の指定です。基本的に変更不要です。
※極端に大きい文字サイズにするとブログレイアウトが崩れる場合があります
※数値の後にある ; を削除しないでください
文字色の変更方法
書き替えした メインCSSの■文字色 で変更します。※参考：カラーコード表 http://www.colordic.org/
※カラーコードの後にある ; を削除しないでください。
※文字色ひとつでブログの雰囲気は随分と変わります。
濃い色(#000や#111)にすれば｢くっきり｣とした雰囲気になり、
淡い色(#555や#777)にすれば｢やんわり｣とした雰囲気になります。
主要部分
記事本文、記事タイトル、サイトタイトル、グローバルメニューなどの箇所です。
/*----------------------
主要部分 #333
------------------------*/
body,.blog-title a,#globalmenu a,.sidebar-title,.sidetitle,.style03 a,.page-title a,.relatetitle a,.cmtitle a {
color: #333;
}
※文字色の変更は 5行目の #333 を変更します。
サイドバー
メインコンテンツのリンクを目立たせるために、わざと、淡い黒(#007)にしています。
/*----------------------
サイドバー #777
------------------------*/
#sidebarbody-l,#sidebarbody-r {
color: #777;
}
/*link*/
#sidebarbody-l a,#sidebarbody-r a {
text-decoration: none; /* none or underline */
color: #777; /* #777 or none */
}
※文字色の変更は 5行目の #777 を変更します。
※リンク文字（色付）にするときは
11行目を color: none; に変更します。
※リンク文字にアンダーラインを付けるときは
10行目を text-decoration: underline; に変更します。
サブ部分
記事のヘッダー・フッター、サイト説明文、記事一覧の概要などの箇所です。
/*----------------------
サブ部分 #777
------------------------*/
.kensaku-submit,.style02,.blog-intro,.article-header,.article-footer,.article-header a,.article-footer a,.kl-info,.kl-info1,.kl-info2,.kl-date,.kl-info a,.kl-info1 a,.kl-info2 a,.kl-cat a,.kb-l,.kb-l a,.noimage-in a,.cminfo,.cminfo a,.comment-input2,.cmbody1,.cmbody2,.pankuzu,.page-navi3,.pn3-c a,.pagination a {
color: #777;
}
/*link*/
#footerinfo a,.relatebody a,.pankuzu 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,#sidebarbody-l a:hover,#sidebarbody-r a:hover,#footerinfo a:hover,#tag_cloud a:hover {
color: #a00000;
}
※5行目の a00000 をお好みの色に変更してください。
文字の太さ・影
太文字にしている箇所を通常文字にするだけで、やんわりとした雰囲気になります。お好みで変更してください。
/*----------------------
文字の太さ・影
------------------------*/
/*主要箇所の文字の太さ*/
.blog-title,#globalmenu,.sidebar-title,.sidetitle,.ftitle,.style03,.page-title,.relatetitle,.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; に変更します。
ベースカラー部分
ベースカラーの変更のページで説明しています。こちらをご覧ください。→ ベースカラーの変更