色を選んでコピペするだけで、文字や背景の色を変更できる【超簡単！】

概要

今回はこのように、背景や文字に設定したい色を選んで、コピペするだけで簡単に変更できる方法を説明します。

使い方の簡易説明

【最初のみ設定が必要】使用するために必要なCSSをコピペする(詳細は下記にて)

1. 「(step2)どの色にするか、リストから選ぶ」より、設定したい色を選ぶ
2. 「(step3)下記をコピーする」より、色に応じて出力された文章をコピーする
3. 「(step4)色を反映したい場所に貼り付ける」より、色変えしたい箇所にHTMLタグを入力し、手順２でコピーした文章を挿入する

 

完成！

 

簡単に出来そうですよね？それでは具体的に説明していきます

サンダー

 

 

 

step
1下準備をする

step
4色を反映したい場所に貼り付ける

詳細はのちほど説明します

使い方の詳しい説明

【step1】下準備をする

下記のCSSから必要な色のコードをコピーします。（CSSとは、Webページの見た目や文字色などを変更するための言語です。）

一度この作業を行えば、次からは別の記事でも利用できます。

WordPressを例にして説明します。

.fg-black{color:black;}
.fg-grey{color:grey;}
.fg-silver{color:silver;}
.fg-pink{color:pink;}
.fg-lightpink{color:lightpink;}
.fg-red{color:red;}
.fg-brown{color:brown;}
.fg-yellow{color:yellow;}
.fg-gold{color:gold;}
.fg-orange{color:orange;}
.fg-greenyellow{color:greenyellow;}
.fg-mediumspringgreen{color:mediumspringgreen;}
.fg-springgreen{color:springgreen;}
.fg-lime{color:lime;}
.fg-green{color:green;}
.fg-cyan{color:cyan;}
.fg-skyblue{color:skyblue;}
.fg-royalblue{color:royalblue;}
.fg-blue{color:blue;}
.fg-mediumblue{color:mediumblue;}
.fg-darkblue{color:darkblue;}
.fg-navy{color:navy;}
.fg-magenta{color:magenta;}
.fg-purple{color:purple;}
.fg-indigo{color:indigo;}
.fg-white{color:white;}
.fg-bold{font-weight: bold;}
.bg-black{background-color:black;}
.bg-grey{background-color:grey;}
.bg-silver{background-color:silver;}
.bg-pink{background-color:pink;}
.bg-lightpink{background-color:lightpink;}
.bg-red{background-color:red;}
.bg-brown{background-color:brown;}
.bg-yellow{background-color:yellow;}
.bg-gold{background-color:gold;}
.bg-orange{background-color:orange;}
.bg-greenyellow{background-color:greenyellow;}
.bg-mediumspringgreen{background-color:mediumspringgreen;}
.bg-springgreen{background-color:springgreen;}
.bg-lime{background-color:lime;}
.bg-green{background-color:green;}
.bg-cyan{background-color:cyan;}
.bg-skyblue{background-color:skyblue;}
.bg-royalblue{background-color:royalblue;}
.bg-blue{background-color:blue;}
.bg-mediumblue{background-color:mediumblue;}
.bg-darkblue{background-color:darkblue;}
.bg-navy{background-color:navy;}
.bg-magenta{background-color:magenta;}
.bg-purple{background-color:purple;}
.bg-indigo{background-color:indigo;}
.bg-white{background-color: white;}

次に【追加CSS】を選択し、先ほどコピーしたCSSを貼り付けます。

【step2】どのカラーにするか選択する

概要で説明した、リストからどのカラーにするか選びます

カラーを選択するリストへ移動する（上部）

【step3】表示された文字をコピーする

選んだ色に応じて、出力されたCSSをコピーします。

例えば【red】を選択した場合、文字色は「class="fg-red"」、背景色は「class="bg-red"」と出力されます。

【step4】色を反映したい場所に貼り付ける

step3でコピーした内容を文字色や背景色を変更したい場所に貼り付けます。

貼り付ける場所は下記を例にして説明します。

1. 文章の一部の色を変更する（＝<span></span>)　⇒　【例】一部の文字を赤にする
2. グループ化されたブロック全体の色を変更する(=<div></div>)　⇒【例】
   ブロック全体を赤にする

まず編集モードを「テキスト」モードに変更します。

文章の一部を変更するならば<span></span>で囲います。

グループ化されたブロック全体を変更したい場合は<div></div>で囲います。

ここまで出来たら「プレビュー」を押して、設定した箇所が下記のように赤になっているか確認してください。

【１．文章の一部を変更する】

一部の文字を赤にする

【2．グループ化されたブロック全体の色を変更する】

<span>や<div>がそのまま表示されてしまう場合は、「テキスト」モードに変更してからもう一度試してください。

【応用編１】文字色と背景色を異なる色に設定

今回使って頂く方法は文字色と背景色を異なる色に設定できます。

先ほどの例の後に、背景に設定したい色を【bg-△△△】の△△△部分入れてください。

このように設定すると、下記のように背景と文字の色を別々に設定する事が可能です。

【１．文章の一部を変更する】

一部の文字を文字は赤（背景はオレンジ）にする

【2．グループ化されたブロック全体の色を変更する】

【応用編２】文字を太字にする

【step1】で貼り付けてもらったCSSに「文字を太くする」ための対応をいれてあります。

下のように文字を太くしたい箇所に「fg-bold」と記入してもらうと、文字が太くなります。

文字を<span class="fg-red fg-bold">赤にして太字</span>にする

↓このように文字が赤色、フォントがボールドになります。

文字を赤にして太字にする

これらの色変更は<span>や<div>だけでなく、その他のHTMLタグにも使用できるので、色々試してみてください。

まとめ

サンダー

このページを活用して、Webページやブログのデザインを変更してみてください