スポンサーサイト

一定期間更新がないため広告を表示しています

  • -
  • -
  • -
  • -

ColorSetが付いたテンプレートの色の変え方

簡単に色を変えられるようにしてあるテンプレートについて説明します。 うちでは勝手にColorSetっていう名前をつけてみました。
  1. ColorSetなCSSはこんな見た目になっています
  2. テンプレート『あさがお』を例に説明します。
    あさがおサムネイル
    Colorsetの説明コード1
    この画像はCSSの一番上の部分の画像です。先頭に『@charset "EUC-JP";』と描いてあり、その下から
    /**--------------------------Color Set-----------------------------**/
    /*color1*/


    /*color2*/


    /*color3*/


    /*color4*/


    /*color5*/


    /* CSSの記述順


    となっています。この
    /**--------------------------Color Set-----------------------------**/
    から
    /* CSSの記述順
    が色を入力する場所です。
    ここを押さえておいてください。

  3. 色を変える
  4. 『あさがお』のテンプレートでは、/*color1*/から/*color5*/までありました。これは色を5色設定できるということです。
    さっそく/*color1*/の色を変えてみましょう。変える場所はここです。
    ColorSetの説明2
    background-color:#101c5a
    color:#101c5a
    border-color:#101c5a
    /*color1*/から/*color2*/の間にある、#がついた6けたの英数字
    これが色を表しています。
    ためしにここにgreenと入力してみましょう。
    ColorSetの説明3
    さあ、これをプレビューしてみると?
    color1がgreenのあさがお
    背景色、ブログのタイトル、タイトル横の朝顔の画像の色などが一気に変わりました。
    これと同じようにして、/*color2*/から/*color5*/までの#がついた6けたの英数字を他の色に変えてやればサイドバーのリンクの色などを変えることが出来ます。

    ところで、
    さっき#101c5aとかっていう英数字を色って言ってたけど、これはなに?色じゃなくて変な英語と数字じゃん?
    greenでもいいってどういうこと?#がついた英数字じゃないといけないわけじゃないの?
    そう思われた方もいらっしゃるかと思います。
    簡単に説明すると、
    #101c5aってのは機械語
    greenってのは英語
    ・・・ってことです(乱暴だなぁ・・・)。ホームページで表示できる色はすべて#と6けたの英数字で表せるのですが、よく使う色は英語でもOKな仕組みになっているんです。ちなみに#と6けたで表せる色の数は1600万色ぐらい。英語で表すことができる数は140色です。 green以外の英語で表せる色は、こちらのサイトに掲載されているので参考にしてみてください。Web色見本 原色大事典
  5. 注意点と参考サイト
  6. 注意点

    • 例に使用したテンプレート『あさがお』の画像は記事執筆時のものなので、更新等により現在のものとは違う場合があります。

    参考サイト

    色の組み合わせを探すのにぴったりなサイトです。

スポンサーサイト

  • -
  • -
  • -
  • -

COMMENT

TRACKBACK

この記事のトラックバックURL

▲top