こんにちは。Webサイトの刷新と銘打ってシリーズで続けていきたいと思っています！
今回はヘッダ編となります。一番簡単に進められそうなところをチョイスしています。(モチベーション上げるために)
現サイトは以下で、当時は頑張って作りましたけど、デザインセンスの欠片が少しだけ感じたい。
https://penta-d-system.com/
環境
- nodejs: 16系
- nuxt: 2.15.6
- @nuxtjs/vuetify: 1.11.2
nuxt2系で、vuetifyでコンポーネントを作成しています。
いまはnuxt3系が主流で、3.11.2が最新バージョンとなっています。技術の進歩は凄まじい。
現状
ロゴ、新着と全記事で構成されています。
<v-btn v-for="item in menu" :key="item.to" text :to="item.to" nuxt>
{{ item.title }}
</v-btn>
各リンクはdataで定義しているので、v-forで作成しています。
やりたいこと
- ボタンからリンク形式に変更
- hover時、ページが表示されている時に下線を引いて強調する
- サイトのイメージカラーを決定
- 色合いも適当なので決定する
ボタンからリンク形式に変更
nuxt-linkに変更して、クラスを適用しました。クラスはvuetifyで用意されているものを基本使うようにして、特殊なことをする時は自前のクラスを実装します。
default.vue
<nuxt-link
v-for="item in menu"
:key="item.to"
:to="item.to"
nuxt
class="black--text font-weight-bold text-decoration-none link"
:class="{ active: isActive(item.to) }"
>
{{ item.title }}
</nuxt-link>
methods: {
isActive(to) {
return this.$route.path === to
},
},
<style scoped>
.active,
.link:hover {
color: var(--v-primary-base) !important;
border-bottom: 2px solid var(--v-primary-base);
}
</style>
var(--v-primary-base)は、後述のvuetifyをカスタムすることで使えます。
サイトのイメージカラーを決定
Adobe Colorでサイトのカラーイメージを決めました
https://color.adobe.com/ja/trends/Ui/ux?page=2
vuetifyのカスタムでprimaryカラーを変更します。
nuxt.config.js
vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true,
theme: {
dark: false,
light: {
primary: '#614BF2',
accent: '#7F6DF2',
secondary: '#B6D93B',
// info: colors.cyan.lighten5,
// warning: colors.amber.base,
// error: colors.deepOrange.accent4,
// success: colors.green.darken2,
// normalWhite: colors.shades.white,
},
// --v-primary-baseなどを使えるようにする設定
options: {
customProperties: true,
},
},
},
とりあえずsecondaryまで変更しました。
完成
クリック、マウスオーバー時にprimaryカラーが変更され、下線が引かれました 😁