当『超入門』コーナーでは、アメブロデザインカスタマイズのいろはのいについて解説したいと思います。初級・中級・上級者へとステップアップしてゆくための基礎の基礎固めに役立つ記事になるように努力します！
『超入門』シリーズも今回から実践編です。
自分が初心者だと考えている方は、「HTMLやCSS」って少しハードルが高いと感じられるかも知れません。ですので、そうした方がアメブロをカスタマイズする際に自信をもってチャレンジしていただけるように、準備編の記事を6回書いてきました。
今回は簡単ですので、どなたでも問題なくできると思いますが、この記事では細かい説明は省略しています。困ったり疑問に思った点があれば、これまでの超入門記事をご一読ください。
本文の文字色・サイズの変更方法
アクセス解析を見ていますと、当ブログで一番多いのが「背景画像」で検索してご訪問いただくケース。その次に多いキーワードのひとつが「文字色」「文字サイズ」です。今回は非常に簡単にできる文字色・サイズの変更について解説したいと思います。
まず、ブログの本文部分。この文字色を変更してみます。まず、以下のCSSコードをコピーしてください。
/* ---記事本文の文字色・文字サイズを変更--- */
.articleText {
font-size: xxx%;
color: #xxxxxx;
}
そして、黄色い文字の部分（xxxとxxxxxx）を編集します。
様々な指定の仕方ができるのですが、文字サイズは“%”で、文字色は頭に“#”をつけたRGB値で指定することにします。
文字サイズの変更
まず文字のサイズ。現在の文字を基準にその大きさを“%”指定します。当ブログの場合指定内容によって次のようになりますのでご参考ください。
- 文字サイズ80％の場合、この文字の大きさになります。
- 文字サイズ90％の場合、この文字の大きさになります。
- 文字サイズ110％の場合、この文字の大きさになります。
- 文字サイズ120％の場合、この文字の大きさになります。
文字色の変更
次に文字色。ここは6桁の数字（0～9）と英字（A～F）の組み合わせで指定します。英字のほうは大文字でも小文字でも構いません。ただ、すべて半角文字で指定してください。
どのような指定にすればどんな色になるかは、「css 色の名前」等で検索すれば解説しているサイトが多く見つかります（左サイドバーのブックマークの「css 色の名前google検索」からも直接検索結果にリンクします）。
では、色の指定によってどんな色になるか例示したいと思います。
- RGB値#000000（色名：Black）の場合はこんな色
- RGB値#006400（色名：DarkGreen）の場合はこんな色
- RGB値#A52A2A（色名：Brown）の場合はこんな色
- RGB値#696969（色名：DimGray）の場合はこんな色
- RGB値#808000（色名：Olive）の場合はこんな色
色を指定する際の注意点は、リンク色と似た色にしないということです。リンク色はたいてい青系の色が使われますので避けるようにします。
色名を指定にそのまま使うこともできます。その場合は、“#”も含めて色名で上書きします。たとえば、color: Black;のようにすればよいわけです。
指定ができたら、「スキンCSSの編集」でいちばん最後に書き加えて［保存］ボタンを押せば完了です。
サイドメニューの文字色・サイズの変更方法
サイドメニューの文字色・サイズの変更方法も記事部分と同じ要領でできます。ただ、サイドメニューはリンク文字が多いですよね。その部分も細かく設定することができます。
まず、下記のCSSコードをコピーして準備しましょう。
/* ---サイドバーの文字色・サイズ変更--- */
.skinMenuHeader { /* サイドメニュータイトルの設定 */
font-size: xxx%;
color: #xxxxxx;
}
.skinMenuBody { /* サイドメニュー本体の設定 */
font-size: xxx%;
color: #xxxxxx;
}
.skinMenuBody a:link { /* リンク色 */
color: #xxxxxx;
}
.skinMenuBody a:hover { /* オンマウス時の色 */
color: #xxxxxx;
}
.skinMenuBody a:active { /* クリックした時の色 */
color: #xxxxxx;
}
.skinMenuBody a:visited { /* 訪問済みリンクの色 */
color: #xxxxxx;
}
すべて文字色・サイズのみの設定ですので、要領は本文の設定とまったく同じです。各リンクの色とサイドメニューのタイトル設定など細かく設定するようになっていますが、変更しない場合は、必ず黄色い文字のある行を削除してください。他の部分は削除しないでくださいね。
もし記事が気に入ったら、クリックいただければうれしいです
またのご訪問、お待ちしております