【Nuxt.js】ブログ作成の記録⑦ ~作り直し&改修~

はじめに

ブログ作成の格闘記です。

【Nuxt.js】ブログ作成の記録⑥ ~作り直し&デプロイ~

したいこと

Vuetifyを使いこなす

全体

プロフィールはカードではなくもっとそれっぽく!笑

カルーセルで画像表示をスライドしておしゃれに!

タグ表示

CSSの改善・レスポンシブ対応

カードはHorizontal cardsで!!

ボトムナビゲーション

プロジェクト作り直し&改修。(引き続きv-on実装できない原因検証しながら)

・レスポンシブ対応

挑戦

Vuetifyを使いこなす

・サイドバーのv-listにlinkを付ける。 参考

内部リンクは以下のようにtoを付ければ実装できました。(linkの意味は掴めませんでした。。。)

<v-list-item link to="/inspire">

外部リンクはtoではできず。aタグで囲みました。 公式のリンクに関するガイド

<a href="https://chobimusic.com/" target="_blank" style="text-decoration: none;">
  <v-list-item link>
    <v-list-item-action>
      <v-icon>mdi-email</v-icon>
    </v-list-item-action>
    <v-list-item-content>
      <v-list-item-title>Contact</v-list-item-title>
    </v-list-item-content>
  </v-list-item>
</a>

・サイドバーにプロフィールカードを付ける 参考

文字のサイズ調整参考(タイポグラフィ)

Spacing Helperの参考

最初は画像の上に名前とか入れようとしていろいろ試したけど、最終的にシンプルに画像のみにしました。笑

・CSSのグローバル適用

最初のプロジェクトでは上記赤線のようにとりあえずタグ内にstyleを書いてしまっていたため。よくない

公式参考

nuxt.config.js

  css: [
    // プロジェクト内の CSS ファイル
    '@/assets/css/common.css'
  ],

・アイコンを使う 公式

Vuetifyは初期アイコンがMaterial design iconsになってるけど、使い方がピンとこなかったので全てFont Awesomeを使うことに。(以前実装済み)

・コンテンツ制作 こちらでv-contentなど仕組みを復習。(ESLintオフる)

とりあえずv-flexまで一通りdefault.vueに記述してトライしてみます。

前回実装したものをpages/index.vueへコピペ。ここでなぜかESlintが暴走して起動しなかったのでオフりました。。。笑

レスポンシブ対応はコチラも確認しつつ、スマホの縦画面だけ対応してればいいかなとか思ったり。。。

・記事ページ

画像に関してはマークダウンをHTMLのimgタグに変えてあげれば変わった。 こちら参考

PCで見る用はimgの%で画面全体からの幅感で調整して、スマホでは固定にしてあげるのがいいかもしれない。

あとはPC画面の記事幅をmax-width1166pxででかくなりすぎないように、且つwidth70%でフレキシブルに動くように実装しました。

(参考にWordPress見ていてデザインよくできてるな~と思いました。。。笑)

・Flexboxの実装 参考

参考サイトが例の方のやつでとても参考になる。

今までじぶんのポートフォリオに実装したことなかった(機会がなかっ)けど、使ってみたらとても便利だった。

記事が幅を超えると見えなくなる現象が起きていたので、実装せざるを得なかったけど勉強になった。

・各種ページの実装

これは既に作っていたのでコピペで。

現状

割と完成に近いかもしれない。

PC画面

トップページ

記事ページ

スマホ画面

トップページと記事ページ

 

 

所感・気づき・メモ

所感

あとは細かいところを実装できればいい気がする。

例えばスクロールしたらヘッダーが消えるとか、あとは使いやすさの面でトップページにはどこのボタンで戻れるようにするか、次の記事一覧とかどうするかetc

ここ辺りを次は詰めて完成させよう。

だいぶできてきたし、かなり勉強になってる。いいぞ~✌

気づき&学び

・v-iconのmdi-はMaterial Design Iconsの略。 参考 MDIアイコン一覧

・邪魔だったので今回使わなそうなstore、middlewareディレクトリは消した。

メモ

今後すること

・デプロイ

・デザイン詰める

コメントを残す