ポートフォリオサイト制作で勉強したことを紹介します【jQueryプラグイン/WordPress/参考サイト等】

こんにちは。まさかずです。

2020年2月にポートフォリオサイトをWordPressで作成しました（https://masakazu.work/）

下は制作したページの全体動画になります。

今回はポートフォリオサイトを制作する中で勉強したことを紹介します。

特にjQueryプラグイン/WordPressプラグインなどが中心です。

僕のサイトを見ながら、是非参考にしてみてくださいね。

ポートフォリオサイト制作で勉強したことを紹介します【jQueryプラグイン/WordPress/参考サイト等】

公開しているWebサイトで「何を実装したか」という観点から技術について紹介します。

上記リンクは、CSS/JavaScript/jQueryプラグインの技術を使っています。

さらに、使用したWordPressのプラグインについて紹介します。

プラグインは全て紹介ではなく、機能的に必要だったもの&ぜひ知ってほしいもの2点を紹介します。

合計7つの技術について紹介です。

参考までにポートフォリオサイトの実行環境について紹介します。

ポートフォリオサイトの実行環境

ポートフォリオサイトの実行環境を簡単に示しておきます。

この様な感じです。

サイトの作成ではWordPressのスターターテーマ「UNDERSCORES （アンダースコア）」を使用しました。

エックスサーバであればWordPressのインストールやSSL設定も簡単にできます。

ポートフォリオサイトで実装した内容

それでは、ポートフォリオサイトで実装した内容から使用した技術をご紹介します。

動画を背景にする

動画の背景は、著作権がフリーで雰囲気の良さそうな海外サイトを探しました。

実際の動画はVimeoという動画サイトに投稿されています。

実際の動画から「共有」→「埋め込み」でiframeのコードを取得できます。

あとはiframeを背景として使うように設定すれば完成です。

実装方法については下記サイトを参考にしました。

背景の動画もスマホ表示にすると高さが足りず、インパクトが減ります。

ですので、540px以下の場合、固定の画像を表示するようにしました。

文字をタイピングアニメーションで表示させる

「HTML　タイピングアニメーション」などとググると、色々な実装方法が出てきました。

今回は2行を時間差で表示させたかったので、CSSのanimation要素とkeyframes要素を使用して実装しました。

主に参考にした記事はこちらです。

こちらの記事をベースにわからないところをググりながら実装して調整しました。

ソースコードはこちら。

<div class="typing">
  <p>Masakazu.work</p>
  <p>Web制作で未来の元気をお手伝い。<span>|</span></p>
</div>

	# １行目の設定
  .typing p {
		font-size: 1rem;
		color: #444;
		margin: 10px 0 0 10px;
		white-space: nowrap;
		overflow: hidden;
		width: 30em;
		animation: type 10s steps(60, end);
	}
  # １行目のフォント
	.typing p:first-child {
		font-size: 3rem;
		font-weight: bold;
	}
  # ２行目の設定
	.typing p:nth-child(2) {
		animation: type2 10s steps(30, end);
	}
  # 縦線
	.typing span {
		animation: blink 1s infinite;
	}
  # 1行目のタイミング
	@keyframes type {
		0% {
			width: 0;
		}

		20% {
			width: 0;
		}

		100% {
			width: 100;
		}
	}
  # ２行目のタイミング
	@keyframes type2 {
		0% {
			width: 0;
		}

		50% {
			width: 0;
		}

		100% {
			width: 100;
		}
	}
  # 縦線の点滅
	@keyframes blink {
		to {
			opacity: .0;
		}
	}

1行目と2行目の「@keyframes」のタイミングをずらしています。

これで１行目が終わった後２行目が表示されるようにしています。

いろいろ調べましたがamination要素はできることが多いので、奥が深いです。

全部覚えていてもきりがないので、必要な時に必要な分だけ調べれば良いと思います。

実装などの細かいところはググって調べてみてくださいね。

スクロールすると要素がフェードインする

スクロールをすると画像やテキストがフワッと表示するようにしました。

フェードインという表現方法です。

こちらの実装にはJavaScriptで動く「AOS（Animate On Scroll Library）」を使用しました。

下のようにhtml要素に対してdata-aos属性をつけてアニメーションの種類が変更できます。

<img href="img/logo.png" data-aos="fade-up" data-aos-duration="1000">

ほかにも時間などオプションをつけてアニメーションを調整可能です。

htmlの要素に記述するだけなので簡単に実装できます。

jQueryが不要ですし、表現方法も多いので気に入って使っています。

アイコンの表示

ポートフォリオサイトではTwitterアイコンや人物アイコンなど多くのアイコンを使用しました。

アイコンは有名な「Font Awesome」を使用しました。

専用のJavaScriptを読み込むと使用可能です。

簡単に説明しますと、下のように入力すると

<i class="fab fa-twitter"></i>

今回の場合、「」こちらのようなツイッターアイコンが表示されます。

CSSを使って大きさや色なども変更できる点がとても便利です。

レスポンシブの表示（Bootstrap4）

レスポンシブの表示にはBootstrap4のグリッドシステムを使っています。

BootStrap4は言わずも知れたCSSのフレームワークですね。

グリッドシステムについては、こちらの記事が参考になります。

今回はプロフィール〜お問い合わせ部のレスポンシブ表示をBootstrapで実装しました。

一からCSSで書くよりコーディングが高速化するのがメリットですね。

Bootstrapはダサいイメージですが、拡張したり、オリジナルのCSSと組み合わせるとデザインの幅が拡がります。

使用したWordPressのプラグイン

つぎに使用したWordPressのプラグインで２つほど紹介します。

記事のリンクを指定のリンクに設定できるプラグイン

これどういう意味かよくわかりませんよね。

簡単に説明するします。

ポートフォリオは外部リンクの集合です。

いちいちソースコードを編集するのも手間なので、こんな事を考えました。

実装に使ったプラグインは「VK Link Target Controller」です。

下記に使い方が載っていますので、参考にしてみてくださいね。

データの移行用プラグイン

最後は本番環境などにデータを移行するためのプラグインのご紹介です。

使用したプラグインは「All-in-One WP Migration」です。

非常に簡単にデータの移行が可能です。

使用方法については30DAYSトライアルでおなじみの東京フリーランスさんに載っています。

今回は「ローカル環境で開発」→「本番にアップロード」としました。

ですが通常お客様のサイトの場合、

という流れを取るのが一般的です。

いきなり本番にアップロードしてサイトが見られなくなったら問題ですからね。

まとめ

今回の記事ではポートフォリオサイト（https://masakazu.work/）で実装した内容の一部をご紹介しました。

一つのサイトを作ることはとても大変なことです。

今回の内容を参考にしていただき、世界に一つだけのポートフォリオサイトに挑戦してみてはいかがでしょうか。