ポートフォリオサイト改修!

公開日:2021/7/2 最終更新日:2021/8/8

こんにちは!ナガタロックです!

2021年も下半期に突入ですね〜\(^o^)/

コロナ禍になり久しく、色々と制限のある日々がまだまだ続いておりますが、

少しずつ上昇をして行きたいですね〜!

こういう世の中だからこそ、

自分も新たな事にチャレンジ出来ているし素敵な出会いもあったりで、

悪いことばかりではないというのが私の実感です!

「学ぶ」事の大切さに気付かされた1年でした!

はてさて今回の記事はタイトルの通りなのですが、

このポートフォリオサイトは2021年の2月に公開しました。

※その時の記事はコチラ

その後、有り難いことにいくつか案件をさせていただく機会がありました。

そして

案件をする度に新しい気付き

があり、そんな気づきを自分のサイトにも落とし込もうと

今回のポートフォリオ改修となりました!

今回の記事はその報告も兼ねた内容となっております!



改修内容まとめ

ではでは、改修内容をカンタンにですが

まとめていきたいと思います〜!

これから学習する方の参考にもなればと思います\(^o^)/

トップページにコンテンツを配置

いや、そもそもトップページが画像だけってどうなん?

訪れたお客様にコンテンツを見てもらうのに、

もう1アクションしてもらう必要がある…って本当に見て欲しいのかと!

たった4ヶ月前の自分に説教を食らわせたくなるトップページでした。。

以前のトップページ

というわけで

ヘッダーメニューだけはそのまま残し、コンテンツを

1.メインビジュアル

2.プロフィール

3.ポートフォリオ

4.ブログ

5.コンタクト

とし、トップページに配置していきました。

併せてヘッダメニューをページ内リンクの設定に書き換え

さらにjQueryを実装し、ヌルヌルっと遷移するようにしました!

R3.8.7 更新
メインビジュアル画像をランダム表示から、jQueryでスライダーを自作しました!



コンテンツ幅、間隔を揃える

これも知っている人からしたら、

当たり前じゃん!!

と思われるような事も出来ていなかったんですね〜(^o^;

Adobe XDで再度デザインをし直し、

各コンテンツの幅

各コンテンツの余白

各カードの間隔

をそれぞれ揃うようにコーディングしなおしました。

僕はコーディング作業が結構好きなようで

ついついコーディングしながらデザインをしてしまっていたのですが、

まずはXDなりでしっかりとデザインすること!

これが結果的に効率の良いコーディングが進めれます!



これはチーム開発にて、

デザイナーさんと一緒に案件をさせてもらう中での気づきで

自分一人の学習では、他の人の当たり前に気づくことは出来ない!

と大いに学びました!

デザインに込められる意味についても考えさせられる案件でした。

こちらのサイトはまだ公開されていないので、公開が楽しみです\(^o^)/


PORTFOLIO(実績公開)を実装!

いくつかさせていただいた案件で

1つ公開させていただいた事をキッカケに

実績公開のページを実装しました!

(これからも増えていく!はずなので)

ある程度決まった形式での内容にしたかったのと

ブログ記事とは分けて公開したかったので、

カスタム投稿とカスタムフィールドにて実装しました\(^o^)/

使用したプラグインは

Custom Post Type UI

Advanced Custom Fields

です!

カスタムフィールドメニュー画面です

必須ではない項目は条件分岐をつけて、

入力があった場合のみ出力するようにしています!


こちらもチーム開発案件で、

一緒になったコーダーの方がカスタム投稿に精通しており

実装イメージが固めやすかったです\(^o^)/



終わりに…

もっと細かい部分も手は加えていますが、大まかには以上の内容です!

案件をする度に思うことが

出来ない事

知らない事

はまったく別物で、

知らないから実装出来ていなかった

知らないから提案出来ていなかった

ということが多々見つかりましたΣ(・∀・;)



というわけでこれからも学習や案件をする中で

出てくる

「気づき」

このサイトにアップデートしていきたいと思います\(^o^)/

最後まで読んでいただきありがとうございました!


ABOUT US

この記事を書いた人

ナガタロック

このサイト作成者の写真

アパレルメーカーに勤める30代男
2020年より「RaiseTech」にてプログラミング学習を開始
講義内容の学習記録
副業に関する情報を発信しています

  • カテゴリー