ポートフォリオサイト

プログラム概要

職業訓練中にWordPress 5.x対応の参考書を2冊勉強しましたので、アウトプットとしてポートフォリオサイトで活用しました。

構成について

誰でも記事を投稿できるようにする

記事を投稿する人が、htmlやcssを理解できていなくても、ブロックを選んで文字を打つだけで形になり、可能な限りソースを触らないで済むように構成しました。
※テーブルでは一部ソースの加工が必要になります

テンプレートパーツを活用する

トップページのカテゴリ別制作物一覧や、各カテゴリ別ページのように、レイアウトやコンテンツが重複する箇所では、テンプレートパーツを用いるように努め、編集箇所が少なくなるように、使い回すことを意識しました。

その他

• レイアウトはブロック単体と各ブロックをグループ化することで変化します
• ソースページへのリンクの生成は [Source] というタグが付与されているかどうかで判定します
  ※Sourceタグは非表示となっています。
• デモページへのリンクの生成は、デモページをまとめているディレクトリ配下に、表示している記事のスラッグ名と同名のディレクトリが存在するか否かで判定します。

制作について

制作目的

Webデザイナーとして従事していた会社では、WordPressのサイトを保有しておりましたが、優先度が低くあまり触れる機会がありませんでした。いつかは使えるようになりたいと考えておりましたので、職業訓練の余裕のある時期に集中的に勉強してポートフォリオサイトを制作しました。
現状、自分にとって必要な機能をかいつまんで利用している程度ですので、幅広く習得し活用できるように、機会があればブログなども制作してみたいと考えています。

工夫したところ

CSS設計ではFLOCSSを参考にカスタマイズして、メンテナンス性が高まるように努めました。
また、GitはSourcetreeをメインに使用しておりましたので、コマンド操作にも慣れておきたいと考えていました。そこで、ソースコードを表示するページとしてGitHubを使用することにしました。最初はつまづくことも多かったのですが、SourcetreeのGUIを頭に描きながらコマンドを打つことで、対処することができました。

開発環境

フロントエンド

言語： HTML5 CSS3, JavaScript
ライブラリ： jQuery 3系
CMS： WordPress 6.8

バックエンド

言語： PHP 7.4

データベース

MariaDB 10.4

インフラ

ローカル環境： XAMPP, Apache

バージョン管理

GitHub

エディタ / ツール

Visual Studio Code, FileZilla

デザインツール

Photoshop CC, Illustrator CC

制作期間

22021年10月～2021年12月 (2カ月)