portfolio

ポートフォリオ無料HTMLテンプレート Fancybox化

「未経験からWebデザイナーへ！」さん配布の無料HTMLテンプレートをFancybox化する方法です

【無料】ポートフォリオHTMLテンプレート（ベーシック）
https://webdesigner-go.com/template/portfolio-02/

主に［Works］セクション内のリンクをページ遷移しないようにカスタマイズする方法です
具体的には Fancybox(jQueryプラグイン) を使って他ページを iframe化させています

※ Fancybox（jQueryプラグイン）はこちらです
https://fancyapps.com/fancybox/

設置したポートフォリオはこちら↓

これより、作業手順になります

設置手順の目次

[#1] テンプレートファイルをダウンロード
[#2] ダウンロードした圧縮ファイルを展開
[#3] .DS_Store ファイル削除
[#4] index.html ファイル変更
[#5] works-template.html ファイル変更
[#6] ウェブサーバー(GitHub Pages)へファイルアップロード

設置手順

1. テンプレートファイルをダウンロード

ウェブブラウザで下記ページを開きます
【無料】ポートフォリオHTMLテンプレート（ベーシック）
https://webdesigner-go.com/template/portfolio-02/
ページ上部にある「ダウンロード」をクリックしてzipファイルをダウンロードします

2. 展開

ダウンロードした圧縮ファイル「portfolio-template-basic.zip」を展開します

フォルダ構造（ディレクトリ構造）

portfolio-template-basic/
┃
┣ css/
┃  ┗ ress.css
┃    style.css
┃    .DS_Store
┃
┣ img/
┃  ┗ favicon.ico
┃    icon_skill.png
┃    mv.jpg
┃    ogp.png
┃    profile.jpg
┃    sp_mv.jpg
┃    works-dummy-thumb.jpg
┃    works-sample.jpg
┃    works-sample-thumb.jpg
┃    .DS_Store
┃
┣ js/
┃  ┗ script.js
┃
┗ index.html
  works-template.html
  .DS_Store

3. 「.DS_Store」ファイル削除

展開したフォルダ内に「.DS_Store」が存在します
このファイルは公開に関しては不要なファイルなので、削除します
3つのファイルが存在していました

4. index.html ファイル編集

Fancybox の設定を入れていきます

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

<!-- 中略 -->

  <title>TARO YAMADA ポートフォリオ</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Material+Icons+Outlined" rel="stylesheet">
  <link href="css/ress.css" media="all" rel="stylesheet" type="text/css" />
  <link href="css/style.css" media="all" rel="stylesheet" type="text/css" />

<!-- ▼ (1) FancyboxのCSSを追記 ここから ▼ -->
  <link href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.1/dist/fancybox/fancybox.css" rel="stylesheet" type="text/css" />
<!-- ▲ (1) FancyboxのCSSを追記 ここまで ▲ -->

  <link rel="shortcut icon" href="img/favicon.ico" />
  <link rel=”canonical” href=”URLが入る” />
</head>

<body>
  <div class="wrapper">

<!-- 中略 -->

    <main class="content">

<!-- 中略 -->

      <!-- works -->
      <section class="works section" id="works">
        <div class="container">
          <h2 class="title">WORKS</h2>
          <div class="works-list">

<!-- ▼ (2) <a>要素の属性を変更 ここから ▼ -->
<!-- ▼ (2-1) ▼ -->
            <a class="works-item" href="works-template.html">
            <!-- ↓ 下記に変更します -->
            <a class="works-item" href="works-template.html" data-fancybox data-type="iframe" data-width="95%" data-height="100%">
<!-- ▲ (2-1) ▲ -->
              <div class="works-img"><img src="img/works-sample-thumb.jpg" alt="" /></div>
              <p class="works-name">作品名が入る</p>
              <p class="works-info">Design / Coding(Responsive)</p>
            </a>
<!-- ▼ (2-2) ▼ -->
            <a class="works-item" href="works-template.html">
            <!-- ↓ 下記に変更します -->
            <a class="works-item" href="works-template.html" data-fancybox data-type="iframe" data-width="95%" data-height="100%">
<!-- ▲ (2-2) ▲ -->
              <div class="works-img"><img src="img/works-dummy-thumb.jpg" alt="" /></div>
              <p class="works-name">作品名が入る</p>
              <p class="works-info">Design / Coding(Responsive) / WordPress</p>
            </a>
<!-- ▼ (2-3) ▼ -->
            <a class="works-item" href="works-template.html">
            <!-- ↓ 下記に変更します -->
            <a class="works-item" href="img/works-dummy-thumb.jpg" data-fancybox="gallery" data-caption="サンプル画像 1">
<!-- ▲ (2-3) ▲ -->
              <div class="works-img"><img src="img/works-dummy-thumb.jpg" alt="" /></div>
              <p class="works-name">作品名が入る</p>
              <p class="works-info">Design</p>
            </a>
<!-- ▼ (2-4) ▼ -->
            <a class="works-item" href="works-template.html">
            <!-- ↓ 下記に変更します -->
            <a class="works-item" href="img/works-dummy-thumb.jpg" data-fancybox="gallery" data-caption="サンプル画像 2">
<!-- ▲ (2-4) ▲ -->
              <div class="works-img"><img src="img/works-dummy-thumb.jpg" alt="" /></div>
              <p class="works-name">作品名が入る</p>
              <p class="works-info">Banner Design</p>
            </a>
<!-- ▼ (2-5) ▼ -->
            <a class="works-item" href="works-template.html">
            <!-- ↓ 下記に変更します -->
            <a class="works-item" href="img/works-dummy-thumb.jpg" data-fancybox="gallery" data-caption="サンプル画像 3">
<!-- ▲ (2-5) ▲ -->
              <div class="works-img"><img src="img/works-dummy-thumb.jpg" alt="" /></div>
              <p class="works-name">作品名が入る</p>
              <p class="works-info">Banner Design</p>
            </a>
<!-- ▲ (2) <a>要素の属性を変更 ここまで ▲ -->

          </div>
        </div>
      </section>
      <!-- /works -->

<!-- 中略 -->

      <div class="page-top" id="js-page-top">
        <span class="material-icons-outlined">expand_less</span>
      </div>
    </main>

<!-- 中略 -->

  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type='text/javascript' src="js/script.js"></script>

<!-- ▼ (3) FancyboxのJavaScriptを追記 ここから ▼ -->
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.1/dist/fancybox/fancybox.umd.js"></script>
  <script>
    Fancybox.bind("[data-fancybox]", {Carousel: {tml: {autosize: true,},},});
  </script>
<!-- ▲ (3) FancyboxのJavaScriptを追記 ここまで ▲ -->

</body>
</html>

5. works-template.html ファイル編集

works-template.htmlをiframeで開くようにしたので
上部のメニューとindex.htmlへ戻るリンクを削除します

<!DOCTYPE html>
<html>

<!-- 中略 -->

<body>
  <div class="wrapper">

<!-- ▼ (1) 削除する ここから ▼ -->
    <!-- header -->
    <header class="header ">
      <div class="container">
        <h1 class="header-logo">
          <a href=".">TARO YAMADA</a>
        </h1>
        <nav class="gnav">
          <ul class="gnav-list">
            <li class="gnav-item"><a href=".#works">WORKS</a></li>
            <li class="gnav-item"><a href="./#skill">SKILL</a></li>
            <li class="gnav-item"><a href="./#about">ABOUT</a></li>
            <li class="gnav-item"><a href="./#contact">CONTACT</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <!-- /header -->
<!-- ▲ (1) 削除する ここまで ▲ -->

    <main class="content">

      <article class="article">
        <div class="article-container">
          <h2 class="article-title">DesignXYZ様</h2>
          <div class="article-body">

<!-- 中略 -->

          </div>
<!-- ▼ (2) 削除する ここから ▼ -->
          <div class="home-link">
            <a href="./#works">Works一覧へ</a>
          </div>
<!-- ▲ (2) 削除する ここまで ▲ -->
        </div>
      </article>

      <div class="page-top" id="js-page-top">
        <span class="material-icons-outlined">expand_less</span>
      </div>
    </main>

<!-- 中略 -->

  </div>

<!-- 中略 -->

</body>
</html>

6. ウェブサーバー(GitHub Pages)へファイルアップロード

公開用のウェブサーバーとして「GitHub Pages」にファイルをアップロードします

今回は商用利用しないので「GitHub Pages」を使いました
静的ページ、個人利用の条件なら「GitHub Pages」が簡単でいいですね！広告も非表示だし！

今後、無料料で商用利用の必要が出てきたら「Netlify」も選択肢として検討しようかと思っています
https://www.netlify.com/pricing/

※ 「GitHub Pages」に関する説明は省略しています
「GitHub Pages」を使うには GitHub への登録が必要になります

設置したポートフォリオはこちら↓

テンプレートは下記からダウンロードする
「未経験からWebデザイナーへ！」さん配布
【無料】ポートフォリオHTMLテンプレート（ベーシック）
https://webdesigner-go.com/template/portfolio-02/