LoginSignup
0
0

こんにちは。Webサイトの刷新と銘打ってシリーズで続けていきたいと思っています!
今回はヘッダ編となります。一番簡単に進められそうなところをチョイスしています。(モチベーション上げるために)

現サイトは以下で、当時は頑張って作りましたけど、デザインセンスの欠片が少しだけ感じたい。
https://penta-d-system.com/
site_before.png

環境

  • nodejs: 16系
  • nuxt: 2.15.6
  • @nuxtjs/vuetify: 1.11.2

nuxt2系で、vuetifyでコンポーネントを作成しています。
いまはnuxt3系が主流で、3.11.2が最新バージョンとなっています。技術の進歩は凄まじい。

現状

site_header_before.png

ロゴ、新着と全記事で構成されています。

<v-btn v-for="item in menu" :key="item.to" text :to="item.to" nuxt>
    {{ item.title }}
</v-btn>

各リンクはdataで定義しているので、v-forで作成しています。

やりたいこと

  1. ボタンからリンク形式に変更
    • hover時、ページが表示されている時に下線を引いて強調する
  2. サイトのイメージカラーを決定
    • 色合いも適当なので決定する

ボタンからリンク形式に変更

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

site_image_color.png

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まで変更しました。

完成

site_header_after.png

クリック、マウスオーバー時にprimaryカラーが変更され、下線が引かれました 😁

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0