【文字色変更】カスタマイズ実践編

HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」　と考える方々に分かりやすい解説記事を書きたいと思っています。

さて準備ができたら、早速文字色の変更をしてみましょう。文字色の設定は、次のように行われています。


/* (1-2) ブログタイトル文字
--------------------------------------------*/


/* skinTitle ブログタイトル文字 */
.skinTitle,
.skinTitle:visited,
.skinTitle:hover,
.skinTitle:focus{
color:#000000;
font-weight:bold;
font-size:2.11em;
}


/* skinDescription ブログの説明文字 */
.skinDescription{
color:#333333;
}

CSSを上から順番に見ていくと、同じ部分がみつかると思います。color:#000000;の部分が文字色の設定部分です。#000000を変更するとこで、文字色を変更することができます。#を最初につけるのはお約束ですので（続く数値が16進数であるということを表しています）、消さないようにしてくださいね。

ブログのタイトルと説明文の色変更

いま色は、#000000となっています。これは、「真っ黒」を意味します。どのような数字がどの色に対応するかは、前のエントリーでご紹介したez-HTML でも簡単に取得できますし、たくさんフリーソフトもありますので、「windows RGB値」とかのキーワードでググッてみて自分がいちばんいいと思うものを選ばれたらいいと思います。定番ソフトのColorPicker は、画面の上にカーソルをもっていくとそのRGB値が分かるというソフト。これは直感的で分かりやすいですね。

数字の意味は、最初の2桁が赤（Red）、次の2桁が緑（Green）、最後の2桁が青（Blue）を意味します。値は、00からFFまでで、00ならその色の成分はゼロで、FFならその色の成分はMAXです。ですので、#FF0000なら真っ赤。適当に数字を割り当てて遊んでみてもいいかも知れません（笑）。

CSSファイルで丁寧にどこの色かということが説明されていますので、それぞれ6桁の数字を変更するだけで、ブログタイトルと説明文の変更をすることができます。簡単ですね。

同じ要領でどんどんカスタマイズ！

CSSを見ていけば、同じ要領でどんどんカスタマイズできる場所があることが分かります。


/* (1-4) サイドバー内の文字のスタイル
--------------------------------------------*/

/* skinMenuTitle サイドメニュータイトル文字 */
.skinMenuTitle{}

上記の部分は、「最新の記事」「プロフィール」「テーマ」なんかの文字の色です。いま何も設定されていませんので、共通の色設定になっています。この色を設定することで、サイドバーのメニュータイトルの色を全部いっぺんに変更することができます。


/* (1-4) サイドバー内の文字のスタイル
--------------------------------------------*/

/* skinMenuTitle サイドメニュータイトル文字 */
.skinMenuTitle{
color:#ff0000;
}

という具合に、最初の部分を書き換えれば、#ff000ですから、全部真っ赤になります（笑）。そう、最初、{}となっていましたが、その間にcolor:#ff0000;が付け加えられていますね。CSSの設定はこのように行うのがルールです。また、数値のffは、大文字でFFとしても同じ結果になります。元々が小文字で書かれていますので、統一したければ小文字、自分が変更した場所をわかりやすくしたければ大文字にするなど、お好きに料理してくださいませ^^;

アメブロ編集画面ボタンにスタイル設定！

色の件は、アメブロの記事編集画面の「カラーパレット」ボタンを押して色を選択したときも、RGB値が表示されていますので、ご存知だった方も多いかも知れませんね。

最後に、このボタンの並びにあるBボタンで設定したHTMLタグへの設定方法をご説明します。「カラーパレット」で編集した文字は、残念ながらCSSでは設定できません。これ実は、詳しいことは書きませんが、HTML5（難しいかな？）では文法違反なんですね。使っちゃいけないタグで設定されてますので、CSSでの設定ができないわけです。だけど、誰でも使いやすくということを大切に考えてこのように実装されているわけで、みなさんの使い勝手を考えると、適切なやり方だと思います。

何も設定しない状態では、Bボタンを押すと太字になると思います。たとえば、「太字にする」という文章を選択してBボタンを押すと、HTMLは太字にするというふうになります。

<strong>～</strong>が太字にするというHTMLタグで、このタグに色を設定してみましょう


div.articleText strong {
	color: #ff3333;
	font-size: 1.2em;

はい。これで完了です！

こうした追加の設定は、CSSファイルの最後のほうにある


＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊


 (4) その他、拡張


＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
*/

/* その他、拡張があれば記述 */

の下に追加するようにします。え、見慣れないものがある？

font-size: 1.2em;の部分ですね。この行は、文字の大きさを1.2倍するという命令になっています。1.2の数字を変更することで、大きさを変えられます。不要ならこの行を削除すればいいわけです。

今回はこれで終了です。CSSファイルを見ていると、他にも#ff0000みたいに書かれている部分がたくさんあります。気になりますねぇ。いろいろ試してみてみるのも面白いかもです。背景の色だったり、線の色だったり、いろんな部分の色が変更されるかも知れません。

「このブログの記事通りやったのに、おかしくなった。どうしてくれるんだ！」

申し訳ありませんが、そうした責任は一切お引き受けできませんので、すべて自己責任でお願いいたしますm(__)m

「集客・アフィリエイトに役立つ」アメブロカスタマイズ講座

「HTMLなんて分からないけど、アメブロを好きなデザインにしたい！」そんな方の思いにも答えられるサイトを目指しています

【文字色変更】カスタマイズ実践編

ブログのタイトルと説明文の色変更

同じ要領でどんどんカスタマイズ！

アメブロ編集画面ボタンにスタイル設定！