[Blogger #009] カラー調整その2、ホーム画面の記事一覧を一列に。
その2となってしまうぐらい、あれこれ調整中の色合い。いくら適当でセンスなくても、視認性ぐらいはよくしておかないと、見るのが嫌になってしまう。そこで、配色をプレビューとかできるところないかと探したところ、ありました。こちらです。
カラー調整
有名な”さるわかさん”のところですね。ここの一番下、黄土色っぽい感じが、じじぃにはあってるので、ここの色を使ってみました。あと、こちらに、おしゃれなデザインのカラーコードが載っていますので便利かも。
ナビバーは、スクロールしたときに、残る設定をしましたので、ちょっと透過するとカッコいいかなってので、こうしました。0.8の透過設定です。
:root{
// その他の色は省略
--navi-back-color: RGBA( 240, 143, 0, 0.8 );
--navi-font-color: #EEE;
}
あとヘッダーの下には、ふじろじっくさんとこのを真似たので、ラインが入ってますが、この色もオレンジにしてます。フッターの上にはこのラインがないのですが、色合い的に区切ったほうがよい気がしたので、フッターの上にもライン追加です。ヘッダーセクションの border-bottom の色をいじって、フッターセクションへ、border-top を追加しました。
#footer{
// この辺りは、ふじろじっくさんとこの真似
font-size: 1.5rem;
margin-top: 5em;
// 色は独自
background: var(--font-color);
color: #FFF;
// ここに区切りのラインを追加
border-top: 3px solid var(--accent-color);
}
まだまだ、目次やら、コメント欄、見出しの色やラインをいじくってないのですが、まあ、全体の雰囲気はだいたいできたかな。
ホームでの記事一覧をリスト表示化
ホームでの記事リスト。箱型です。
ふじろじっくさんとこみたいに、横長でのリスト表示にしたいなぁと、これも真似です。もともと、QooQにリストバージョンがあるわけですが、今さら、最初からやり直す気にもなれません。一つ一つ見なきゃダメか?と、ググってみると、またもや素晴らしいサイトに出会いました。ここ。
この記事の前に、ホバーアニメーションが追加されているようなので、そいつも一気に追加しました。
で、とりあえず、配置のバランス調整はおいといて、こんな感じにリストとなりました。
中身もそろそろ、なにか揃えていかないとな、と思いながら、今日も形と見た目をゴニョゴニョしてしまいましたとさ。
ではまた、次回。
この記事が気に入ったらサポートをしてみませんか?