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

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

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

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

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

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

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

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

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

実装した内容
  • 動画を背景にする
  • 文字をタイピングアニメーションで表示させる
  • スクロールすると要素がフェードインする
  • アイコンの表示
  • レスポンシブの表示(Bootstrap4)

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

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

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

使用したWordPressプラグイン
  • 記事のリンクを指定のリンクに設定できるプラグイン
  • データの移行用プラグイン

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

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

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

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

URLhttps://masakazu.work/
サーバエックスサーバー
ドメインお名前.com
WordPressバージョンWordPress 5.3.2
ローカル実行環境MAMPで環境構築

この様な感じです。

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

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

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

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

補足

今回の記事は実装方法を細かくコードレベルで紹介するものでは有りません。参考にしたサイトは掲載します。実際にご利用の場合はググって適用させてみてください。

動画を背景にする

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

  • Life of Vids:著作権フリーの海外動画サイトです。素材として使いやすいです。

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

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

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

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

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

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

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

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

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

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

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

ソースコードはこちら。

<div class="typing">
  <p>Masakazu.work</p>
  <p>Web制作で未来の元気をお手伝い。<span>|</span></p>
</div>
	# 1行目の設定
  .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);
	}
  # 1行目のフォント
	.typing p:first-child {
		font-size: 3rem;
		font-weight: bold;
	}
  # 2行目の設定
	.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;
		}
	}
  # 2行目のタイミング
	@keyframes type2 {
		0% {
			width: 0;
		}

		50% {
			width: 0;
		}

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

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

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

いろいろ調べましたが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のプラグインで2つほど紹介します。

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

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

簡単に説明するします。

実現したいこと

WordPressで投稿した記事をクリックしたリンク先が、記事のリンクではなく、指定のリンク(主に外部リンク)にする機能を実装する。

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

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

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

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

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

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

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

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

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

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

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

「ローカル環境で開発」→「テスト環境にアップロード」→「本番環境にDNS設定の変更で切り替え」

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

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

まとめ

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

実装した内容

動画を背景にする
文字をタイピングっぽく表示させる
スクロールすると要素がフワッと表示する(フェードイン)
アイコンの表示
レスポンシブの表示(Bootstrap4)

使用したWordPressプラグイン

記事のリンクを指定のリンクに設定できるプラグイン
データの移行用プラグイン

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

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