目次
はじめに
ブログ作成の格闘記です。
したいこと
Vuetifyを使いこなす
全体
プロフィールはカードではなくもっとそれっぽく!笑
CSSの改善・レスポンシブ対応
プロジェクト作り直し&改修。(引き続き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ディレクトリは消した。
メモ
今後すること
・デプロイ
・デザイン詰める
コメントを残す