先日、当ブログを「緑化運動中」ってお話ししました。

▼

▼

▼

▼

▼

▼

現在の様子です(o^－^o)

緑好きとは言え、緑ばかりじゃクドイので、ひなまつりカラーにしました。

あの、菱餅とか、三色団子の色合いです

ところで、色を変える方法ってご存知ですか

カラーコードのこと、知らない方もいらっしゃるかなぁ～と思ったので、今日はそのお話を。

例えば、「読者になる」ボタン。

私が選んだテンプレートでは、グレーのボタンでした。

そして今はピンク。

さらに枠線をドットにして、ちょっと切手っぽい四角にしています。

/* サイド強調ボタン */
.skin-btnSidePrimary {
border:4px #ffe2ec dotted;
background-color: #f99bbb;
color: #fff;
}

「background-color: #f99bbb;」

この部分がボタンの背景色の設定部分です。

ピンク色のカラーコード「#f99bbb」を好きな色のカラーコードにするだけで、ボタンの色を変えることができます。

カラーコード表は、ネットで検索するとたくさん見つかると思います。

ひとつ紹介しておきますね。

そこにある「#」から始まるコードがカラーコードです。

先ほどのピンクの枠線。

<div style="padding:15px; border-radius: 10px; border:5px double #febccb;">ピンクの枠線です。</div>

太字の「#febccb」の部分をdimgrayのカラーコード「#696969」にすると

<div style="padding:15px; border-radius: 10px; border:5px double #696969;">グレー枠線になりました。</div>

見出しとか囲み枠とか、いろんなデザインのCSSを公開してくださってるサイトは沢山あって、私も参考にさせていただくことよくあります。

このカラーチェンジの方法を知っていれば、紹介されている囲み枠とかが何色でも、気に入ったデザインさえ見つければ、カラーは自分でアレンジできます。

記事の飾りつけ、好みのデザインにできたら、ブログを書くのも見るのも楽しくなりますよね

読んでもらう方にもわかりやすい記事になりそうですよね

「やりたいけどわからなーい」という方は、私にサポートさせてくださいね

「Happy Clover」って

「Happy Clover」の

「パソコン操作個別レッスン」

つながってくださる方、募集中
よろしくお願いします

アメブロカスタム「色を変えてみよう」