子テーマのカスタマイズ(配色)

次にサイトの全体的な雰囲気を決める配色を決定していきます。
Lightningの無料版では文字通り全体の色とごく一部の色を変更することしかできないので子テーマのCSSで色を設定していきます。

配色を決めるのには「COLOR SUPPLY」というサイトを使用しました。
このサイトは2色、3色、4色と色の数を変えて選ぶことができ、類似の色や対称の色など条件を変えて色の見本を見ることができます。
自分は背景は薄い青にしようと思っていたのでこうなりました。

対称的な3色の一例

基本的にこの3色の青をベースカラー、赤をメインカラー、黄色をアクセントカラーにしてバランスを見て明度を変えて設定していきます。

サイズの微調整や配置変更をした結果こんな感じになりました。

本当はリンク範囲を広げたり、もっと立体的なデザインにしたりしたいのですが、それにはマテリアルデザインやJavaScriptの知識も必要になるのでとりあえずおいていきます。

メニューが下りてくるのを何とかする

このテーマは画面を下にスクロールすると、メニューが下りてきて常に上に表示されて邪魔なのでスクロールしても表示しないようにします。

調べたらLightningの公式ページにメニュー固定の解除方法が乗っていました。(https://lightning.nagoya/ja/archives/remove-header-fixed
ここに書いてあるコードを子テーマに書き加えたらメニューが上に固定されることがなくなりました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です