[Blogger #008] カラーリングに悩む

結局、配置関係については、大部分がコピーみたいになってしまった。中身の整合性とか整理するのに時間がかかりそう。
さて、カラーリングについては、独自性をだしていきたい。ちょこちょこっと色をいじくり始めたら、ハマるハマる。悩みに悩んで投げ出したくなってきたときに見つけたのが、この表題のイラスト。CSSの整合性を整備しながら、色調整しやすい形に整えていくことにします。

色設定のCSSの場所

色調整は、ここのセクションにあって、こうしてあることで、テーマのカスタマイズボタンから調整できます。

<Group description="文字の色">
 <Variable name="font.color" description="普通の文字色" type="color"
  default="#454545" value="#454545"/>
 <Variable name="font.link" description="リンクの色" type="color"
  default="#779cff" value="#779cff"/>
 <Variable name="font.light" description="うす文字の色" type="color"
  default="#999" value="#999999"/>
</Group>

しかし、とっても使いずらく、しっかり決めて埋め込むことにします。

/****************************************
    独自色設定
*****************************************/
:root{
 --background-color: #FBE9D6;
 --background-sub-color: #CD853F;
 --background-dark-color: #AD651F;
 --accent-color:  #f08f00;
 --navi-color: rgba( 240, 143, 0, 0.8 );
 --font-color: #312114;
 --font-accent-color: #4D4136;
 --font-white-color: #EEEEEE;
}

こんな感じにCSSのカスタムプロパティをつかっていきます。

余計なことする Blogger のエディター

調整し始めると、なぜか、変更が効かないところがでます。CSSをいくら変更しても上手くいかない。で、記事のHTMLを確認してみると、なんと、背景色やら色々が自動で付加されてしまってます。cssの設定が効かないのはこのせい。どうやら、エディターでコピペとかイメージ挿入とか、操作によっては、スタイルが埋め込まれてしまうみたい。余計なことをしてくれます。

これ、どうやって外すんだろうと、調べてみると、わかりました。作成ビューで、メニュー右の・・・ボタンの中の一番右、書式をクリア、これをつかいます。

全選択して、これを使えば、書式はきれいさっぱり消えてくれます。

図のサイズとかの設定をやり直さないといけませんから、記事書き終わったあとに、ここで一旦クリアしてから、書式整理をするのがよさそうです。

もっと、クールな色あいにしたいんですが、センスないので諦めました。とりあえず、じじい色で、秋っぽくしてみた。飽きっぽいからではありませんよ。

それでは、次回。