[Blogger #009] カラー調整その２、ホーム画面の記事一覧を一列に。

その２となってしまうぐらい、あれこれ調整中の色合い。いくら適当でセンスなくても、視認性ぐらいはよくしておかないと、見るのが嫌になってしまう。そこで、配色をプレビューとかできるところないかと探したところ、ありました。こちらです。

カラー調整

配色パターン見本40選：ベストな色の組み合わせ確認ツール

有名な”さるわかさん”のところですね。ここの一番下、黄土色っぽい感じが、じじぃにはあってるので、ここの色を使ってみました。あと、こちらに、おしゃれなデザインのカラーコードが載っていますので便利かも。

ナビバーは、スクロールしたときに、残る設定をしましたので、ちょっと透過するとカッコいいかなってので、こうしました。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にリストバージョンがあるわけですが、今さら、最初からやり直す気にもなれません。一つ一つ見なきゃダメか？と、ググってみると、またもや素晴らしいサイトに出会いました。ここ。

【 QooQ カスタマイズ 】 トップページの記事一覧をリスト表示にしてみたよ！

この記事の前に、ホバーアニメーションが追加されているようなので、そいつも一気に追加しました。

【 QooQ カスタマイズ 】 トップページの記事リンクのカスタマイズ 【 ホバーアニメーション 他 】

で、とりあえず、配置のバランス調整はおいといて、こんな感じにリストとなりました。

中身もそろそろ、なにか揃えていかないとな、と思いながら、今日も形と見た目をゴニョゴニョしてしまいましたとさ。

ではまた、次回。