7. Private で作業し終わった内容を Public(公開)に変更する

Private(非公開)で作成していた内容をPublic(公開)に変更する手順を説明します。

自分のリモートリポジトリ(Github)の「Settings」を押します。
切り替わった画面を下の方までスクロールしていくと下の写真のように「Danger Zone」があるので一番上の「Change repository visibility」を押すと

「Change to public」という、Publicに変更しますか?と聞いてくるのでこれを押します。
その後、選択されている項目をそのまま進むとパスワードを聞いてくるのでそのまま入力。

次に左側にあるメニューの中から「Pages」を選択

GitHub Page の Branch 部分が「None」になっているのがわかります。

「None」と表示されている部分を「main」に変更し、保存をします。

 

切り替えを行うと上にある「GitHub Pages」部分にサイトのURLが表示されるのでURL 部分をクリックしてサイトを表示してください。

そのURLが公開用のURLとなるのでポートフォリオを公開する場合、このURLを伝えれば全ての人が見ることができるようになります。

12月27日の作業データ

トップページのHTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GITの練習|トップページ</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body class="top">
  <header class="header">
    <h1>My Portfolio</h1>
    <p>Felica Study Site</p>
  </header><!-- /.header -->
  <nav class="gnav">
    <ul>
      <li><a href="#">Top</a></li>
      <li><a href="../profile/">Profile</a></li>
      <li><a href="../works/">Works</a></li>
      <li><a href="../images/">Images</a></li>
    </ul>
  </nav><!-- /.gnav -->
</body>
</html>

プロフィールページ(Profile)のHTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GITの練習|プロフィールページ</title>
  <link rel="stylesheet" href="../css/style.css">
</head>
<body class="profile">
  <header class="header">
    <h1>Profile Page</h1>
  </header><!-- /.header -->
  <nav class="gnav">
    <ul>
      <li><a href="../">Top</a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="../works/">Works</a></li>
      <li><a href="../images/">Images</a></li>
    </ul>
  </nav><!-- /.gnav -->
</body>
</html>

CSS(ネスト)

@charset "utf-8";

/* GoogleFonts */
@import url('https://fonts.googleapis.com/css2?family=Cookie&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  vertical-align: bottom;
  max-width: 100%;
}

.header {
  width: 100%;
  height: 100vh;
  background: url(../img/main.jpg) no-repeat center bottom;
  background-size: cover;
  padding-top: 260px;
  text-align: center;
  >h1 {
    font-family: 'Cookie', cursive;
    font-size: 120px;
    color: #1d4709;
    margin-bottom: 10px;
  }
  >p {
    font-size: 24px;
    letter-spacing: .1em;/* 文字間*/
  }
}
/* プロファイルページ(profile)の h1 */
.profile {
  .header>h1 {
    color: #47093d;
  }
}
/* 習作ページ(works)の h1 */
.works {
  .header>h1 {
    color: #092147;
  }
}
/* バナーページ(images)の h1 */
.images {
  .header>h1 {
    color: #473d09;
  }
}
.gnav {
  width: 100%;
  height: auto;
  position: fixed;
  height: 80px;
  top: 0;
  right: 0;
  >ul {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    >li{
      height: 60px;
      margin-bottom: 10px;
      >a {
        display: block;
        padding: 0 30px;
        text-align: center;
        line-height: 80px;
        font-size: 32px;
        font-family: 'Cookie', cursive;
        color: #1d4709;
        &:hover {
          color: #3c9912;
        }
      }
    }
  }
}
/* プロファイルページ(profile)のナビゲーション */
.profile{
  >.gnav a {
    color:#47093d;
    &:hover {
      color:#b01796;
    }
  }
}
/* 習作ページ(works)のナビゲーション */
.works{
  >.gnav a {
    color:#092147;
    &:hover {
      color:#1855b7;
    }
  }
}
/* バナーページ(images)のナビゲーション */
.images{
  >.gnav a {
    color:#473d09;
    &:hover {
      color:#978214;
    }
  }
}

5. ブランチの作成とマージ(プルリクエストの許可)

ブランチ(branch)の作成

通常、左下の GIt アイコンの横の文字が「main」となっています。ここをクリックするとコマンドパレットが起動します。

コマンドパレットで「+新しいブランチの作成」を選択し上の窓にブランチ名を入力すると新しい分岐のブランチが作成され、「main」だったところが作成したブランチ名に変わります。

 

ブランチを作成後に、ソース管理上に「ブランチを発行」というボタンが出現しますので。

作成したブランチでの作業が終わったら「Branch の発行」ボタンを押します。

プルリクエストの許可(Github)

「Branch の発行」後にファイルを編集、リモートリポジトリ(Github)を確認すると、上のメニューの「Pull requests」の横に「1」と数字が出現し内容を確認すると「Cmpare & pull request」という緑のボタンが出現します。
これは、ブランチ発行後の「プルリクエストが来ています!」という意味なのでこれを許可するため、このボタンを押します。

引き続き「Open a pull request」の画面に切り替わります。
これはまだ統合されていないブランチがある状態であることを意味します。

ブランチの作成を許可する「Create pull request」(プルリクエストを作成します。)を押します。

まだ統合されていないブランチをmain ブランチに統合させる、「merge pull request」(プルリクエストを統合します)というボタンが出現するので、これも押します。

「Confirm merge」(マージ [main ブランチにブランチが統合]されたことを確認しました)と出てくるのでこれもこれを押すと統合が完了します。


ブランチで作業した内容は main ブランチに統合されました。

統合後のローカル(vscode)のデータを同期させる

リモートでの工程後(Github)に、ローカル(vscode)で反映させるため同期する必要があります。

まず、作業していたブランチから、main ブランチに切り替えるためブランチ名をクリックし、コマンドパレットを表示し、main ブランチを選択します。
選択すると、下の写真のような状態になっています。これはリモートでマージされた内容が、ローカル(vscode)ではまだ反映されていないことを表しています。

まだプルされていない内容である「2」という数字と「 ↓ 」ダウンロードすべき内容があることを示すアイコンが表示されるのでここをクリックします。

プルして統合して反映させたいので「OK」を選択します。
ブランチで作業していた内容が、main ブランチで反映されます。

つまり下図のように、ブランチを作成し別作業を進めていた作業を、main ブランチに統合(同期)させて反映させていきます。

あとは、上記の工程を繰り返していきます。

通常リモート(Github)のリモートリポジトリの作成した人が管理者になるので管理者が Github で行ったプルリクエストの許可とmerge を行います。

6. vs codeを使ってのブランチ・マージの手順(一人で行う場合)

ブランチ(branch)の作成

通常、左下の GIt アイコンの横の文字が「main」となっています。ここをクリックするとコマンドパレットが起動します。

コマンドパレットで「+新しいブランチの作成」を選択し上の窓にブランチ名を入力すると新しい分岐のブランチが作成され、「main」だったところが作成したブランチ名に変わります。

 

作成したブランチで作業を進めます。

マージ(merge)

ブランチを作成し別作業を進めていた作業をメイン・ブランチに統合させる。

上記の図のように、ブランチで作成した分岐を一つにまとめて同期させる工程になります。
ここではその手順を説明します。

1. チェックアウト(コマンドパレット:Git:chekout)先を指定する

ブランチで作業したものをメインブランチ(main)に反映させるためにチェックアウト先を指定します。

vscodeでコマンドパレットを出して(ctrl + shift + P)「チェックアウト先」(Git:Chekout)を選択

 

反映させる場所を指定します。

2. マージするものを選択:ブランチをマージ(コマンドパレット:Git:Marge Branch)

チェックアウト先で指定した場所に(main)、ブランチで作成した項目(branch-1)をマージさせるため、コマンドパレットで「ブランチをマージ」を選択します。

 

マージさせたい元の項目を選択します。

3. 変更した内容をメインブランチに反映させる。

そうすると、ソース管理画面上に「変更を同期」というボタンが出現します。

 

その際はメッセージ窓に他のユーザーにもわかるように変更内容を入力し、「変更を同期」ボタンを押します。(コミットしてプル及びプッシュ)

4. リモートリポジトリ(Github)を更新し確認

Githubを更新するとブランチが反映され変更前のデータもダウンロードできるようになります。

4. vs codeで Githubへアップロードする

Githubのデータを更新する手順

  1. 作成したファイルをステージングする
  2. コミットする際にメッセージを記載
  3. プッシュする

ローカル環境で作業後、Githubのデータを更新する

サイドバーを「エクスプローラ」から「ソース管理」に切り替え、データに変更を加えて、Github のデータと差分が出るとアイコンが表示される。

Step1. ステージング

変更「mdファイル」に変更を加えたので「+」ボタンを押し、
まず、ステージングをする。

Step2・3. コミット

メッセージ入力欄に作業した内容が分かるようにコメントを入力し、
コミットをするが、ボタンの横の矢印を押すと「コミットしてプッシュ」が選択できます。
プッシュをするとGithubのデータが更新されます。

Githubのプロジェクトページを確認

プッシュをした後、Githubページを更新すると、vs code で作業した内容が反映されます。

この工程を繰り返すことでデータは反映されますが、前の工程に戻ることもできます。

3. vs codeを使ってgithubに自身のリポジトリーを作成

手順

  1. githubに自身のリポジトリーを作成する
  2. Gitとgithubを連携させるために登録したユーザー名とアドレスを登録する
  3. vs codeでgithubと連携させるためローカルにクローンを作成する
  4. vs codeでクローンフォルダを開く

Githubでリポジトリーを作成する

repository name でプロジェクト名を付け保存

「Add a README file」は、内容を説明するものを記載するファイルです。
拡張子「.md」のマークダウン・ファイルの作成するかどうかでチェックを入れる。
(ポートフォリオなどを作成する場合は作成した方がいい)

 

 

vs code でクローンを作成し、Githubと紐付けする

GithubからURLをコピーする

緑色の「<> Code」ボタンを押し、URLをコピーする

vs code でローカルにクローンを作成する

vs codeでコマンドパレットを表示する

  • Windows:Ctrl + Shift + P
  • Mac:⌘ + Shift + P

「Git:クローン」を選択しGithubからコピーしたURLを貼り付け設定する。

今回は「git」というフォルダを作成し、GitHubから複製するプロジェクトファイルをそこへ複製するため「git」フォルダを選択します。

 

 

「開く」を選択するとそこに複製フォルダを作成してくれます。
「はい、作成者を信頼します」を選択します。

そうすると、Githubを複製フォルダを読み込み完了します。

 

読み込み完了!

1. Gitとその用語解説について

Gitとは

Gitとは、ファイルの変更履歴を管理するためのツールになります。

例えば、あるプロジェクトの開発に携わっているとします。そのプロジェクトのソースコードを編集する際に、誤って間違った内容を書き込んでしまったり、意図しない変更を加えてしまったりする時にGitを利用することで、過去のバージョンのソースコードに戻すことができます。
複数人で共同開発を行う際は、誰がいつどのような変更を加えたのかを明確にすることができるので多く使われます。

Gitを使ってできること

  • 古いバージョンに簡単に戻せる
  • 新旧のファイルを一元管理できる
  • 編集した履歴を複数人で共有できる
  • 複数人で修正した部分を一つに統合できる

Gitを使ったバージョン管理

Gitでは、ファイルの状態を好きなときに更新履歴として保存しておくことができます。
そのため、一度編集したファイルを過去の状態に戻したり、
編集箇所の差分を表示したりすることができます。

また、古いファイルを元に編集したファイルで、他人の編集した最新ファイルを上書きしようとすると、サーバにアップロードした時に警告が出ます。
そのため、知らず知らずのうちに他人の編集内容を上書きしてしまうといった失敗は起こりません。

Gitを理解するための基本的な用語について

リポジトリ(repository)

リポジトリとは、ファイルやディレクトリを入れて保存しておく貯蔵庫のことを言います。
Gitにおけるリポジトリは以下の2種類に分かれます。

  • リモートリポジトリ(Github)
    特定のサーバー上に設置して複数人で共有するためのリポジトリです。
  • ローカルリポジトリ(vs code内)
    ユーザーごとに配置される手元のマシンで編集できるリポジトリです。

2種類のリポジトリに分けることで、普段の作業はそれぞれのユーザーが手元のローカルリポジトリで行い、作業内容を共有するときにリモートリポジトリで公開するという使い方になります。
リモートリポジトリを介して他のユーザーの作業内容を把握することも可能です。

クローン(clone)

複数人で共有しているファイル(リモートリポジトリ)をまるごと自分のローカル環境(ローカルリポジトリ)に保存する機能になります。
ダウンロードに近いもので、ほとんどの場合Gitで最初に行う作業になります。

コミット(commit)

コミットは、ファイルやディレクトリの編集作業をローカルリポジトリに記録するために必要な操作のことです。
コミットを実行するとファイルを編集した日時を記録したファイルが生成されます。
コミットを実行するごとにファイルが生成され、時系列順にならんで格納されるので、ファイルを編集した履歴やその内容を確認することができるわけです。

プッシュ(push)

プッシュとは、ローカルリポジトリにあるファイルをリモートリポジトリに送信して保存する機能です。
いわゆるアップロードに近い感覚になります。

ブランチ(branch)

ファイルの編集履歴を分岐させて記録していく機能のことを言います。ファイル編集作業は複数のユーザーが同時に行うので、並行して同時に行われる作業を正確に管理するために、Gitにはブランチという機能が用意されています。これがGitのバージョン管理を効率的にする機能になります。

マージ(merge)

複数のブランチを一つにまとめて、完成形に近づけることをマージと呼びます。(マスターブランチに統合させます。)

プル(pull)

共有されているリモートリポジトリ(Githubデータ)に保存されているファイルの内、ローカルリポジトリ(あなたのローカル環境)に無いファイルや他のユーザーが更新したファイルのみをダウンロードする機能になります。リモートリポジトリのファイルをすべて丸ごとダウンロードするクローンに対して、ローカルリポジトリとの差分のみをダウンロードして更新するのがプルになります。

フェッチ(fetch)

複数人で作業する場合に、他の作業者がリモートリポジトリへデータの更新をしたかを確認する機能になります。
プルはローカルリポジトリの内容を更新しますが、フェッチは確認するのみになるのでデータが変更されることはありません。

簡易的なサイトを作成する

プラグインを使って簡易的なサイトを作成しましょう

下記のカンプを見て、自分の好きなテーマに沿ってサイトを作成して見ましょう。

色や余白などは自分で設定し、アレンジも加えられたらやって見ましょう。
例えば、

  • GoogleFontsを使い自分のテーマに合う書体を選んで設定
  • タイトルなども仮の文字のままではなく、文章も入れる

object-fitの設定について

bxsliderのスライド写真はフルードイメージ(max-width:100%)で指定されているのでレスポンシブがかかった時にスライドショーの高さも小さくなってしまいます。

ある程度の高さを維持させたい場合は「object-fit」を使って img の親要素にはまず、サイズの指定。
imgに対して親要素を写真で覆う指定(object-fit)というのを設定します。

今回は全ての親要素(main-visual)と直の親要素(li)に対してのサイズ指定が必要です。

完成(参考サイト)へ

完成(参考サイト: object-fit アレンジ編)へ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>プラグインの練習</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/jquery.bxslider.css">
  <link rel="stylesheet" href="css/hamburgers.css">
  <link rel="stylesheet" href="css/lightbox.css">
</head>
<body>
  <header class="header">
    <div class="container">
      <h1>マイテーマ</h1>
      <p class="hamburger hamburger--spin" id="ham-btn">
        <span class="hamburger-box">
          <span class="hamburger-inner"></span>
        </span>
      </p>
    </div><!-- /.container -->
  </header><!-- /.header -->
  <nav id="gnav"></nav><!-- /#gnav -->
  <div class="container">
    <main class="main">
      <h2>bxsliderの実装</h2>
      <div class="main-visual">
        <ul class="bxslider">
          <li><img src="img/slider-01.jpg" alt=""></li>
          <li><img src="img/slider-02.jpg" alt=""></li>
          <li><img src="img/slider-03.jpg" alt=""></li>
          <li><img src="img/slider-04.jpg" alt=""></li>
          <li><img src="img/slider-05.jpg" alt=""></li>
        </ul><!-- /.bxslider -->
      </div><!-- /.main-visual -->
      <h2>Lightboxの実装</h2>
      <div class="lightbox-wrapper">
        <div class="box">
          <a href="img/lightbox-01.jpg" data-lightbox="images" data-title="画像1">
            <img src="img/lightbox-01.jpg" alt="">
            <h3>Photo Title 01</h3>
            <p>01写真の説明文</p>
          </a>
        </div><!-- /.box -->
        <div class="box">
          <a href="img/lightbox-02.jpg" data-lightbox="images" data-title="画像2">
            <img src="img/lightbox-02.jpg" alt="">
            <h3>Photo Title 02</h3>
            <p>01写真の説明文</p>
          </a>
        </div><!-- /.box -->
        <div class="box">
          <a href="img/lightbox-03.jpg" data-lightbox="images" data-title="画像3">
            <img src="img/lightbox-03.jpg" alt="">
            <h3>Photo Title 03</h3>
            <p>03写真の説明文</p>
          </a>
        </div><!-- /.box -->
        <div class="box">
          <a href="img/lightbox-04.jpg" data-lightbox="images" data-title="画像4">
            <img src="img/lightbox-04.jpg" alt="">
            <h3>Photo Title 04</h3>
            <p>04写真の説明文</p>
          </a>
        </div><!-- /.box -->
        <div class="box">
          <a href="img/lightbox-05.jpg" data-lightbox="images" data-title="画像5">
            <img src="img/lightbox-05.jpg" alt="">
            <h3>Photo Title 05</h3>
            <p>05写真の説明文</p>
          </a>
        </div><!-- /.box -->
        <div class="box">
          <a href="img/lightbox-06.jpg" data-lightbox="images" data-title="画像6">
            <img src="img/lightbox-06.jpg" alt="">
            <h3>Photo Title 06</h3>
            <p>06写真の説明文</p>
          </a>
        </div><!-- /.box -->
      </div><!-- /.lightbox-wrapper -->
    </main><!-- /.main -->
  </div><!-- /.container -->
<footer class="footer">
      <p><small>2023 © mytheme</small></p>
  </footer><!-- /.footer -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="js/jquery.bxslider.js"></script>
  <script src="js/lightbox.js"></script>
  <script>
    $(function(){
      //bxslider
      $('.bxslider').bxSlider({
        mode: 'fade',/* フェイドアウト */
        speed: 3000,/* 画像の切り替わるスピード */
        pause: 3000,/* 画像の静止する時間 */
        /* speedとpauseを同じ大きな値を入れる事でクロスフェードにすることができる */
        controls: false,/* 左右の矢印:false(消す) */
        auto: true,/* 自動再生 */
        pager: false,/* 画像下のページ表示のドット */
      });

      //ハンバーガーメニュー
      $('#ham-btn').on('click',function(){
        $(this).toggleClass('is-active');
      });
  </script>
</body>
</html>
@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,li {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  vertical-align: bottom;
  max-width: 100%;
}


/* 共通
-------------------------------- */
.container {
  max-width: 960px;
  margin: 0 auto;
}
h2 {
  text-align: center;
  margin-bottom: 20px;
}

/* header
---------------------------------- */
.header {
  background-color: #fdd405;
  padding: 20px 0;
  margin-bottom: 50px;
}
.header > .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ナビゲーション部分
---------------------------------- */
#gnav {
  width: 50%;
  height: 100vh;
  background-color: rgba(149, 125, 4, 0.8);
  position: fixed;
  top: 100px;
  right: 0;
  z-index: 10;
  transform: translateX(100%);
  transition: .2s;
}
#gnav.show {
  transform: translateX(0);
}

/* bxslider部分
---------------------------------- */
.main-visual {
  margin-bottom: 100px;
}

/* lightbox部分
---------------------------------- */
.lightbox-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 60px 30px;
  margin-bottom: 100px;
}
.box {
  width: calc((100% - 60px) / 3);
  text-align: center;
}
.box img {
  margin-bottom: 10px;
}

/* footer
---------------------------------- */
.footer {
  background-color: #947c04;
  padding: 30px 0;
  text-align: center;
  color: #fff;
}

/* レスポンシブ設定
---------------------------------- */
/* 960px以下 */
@media (max-width:960px){

  .lightbox-wrapper {
    padding: 0 20px;
  }
  .box {
    width: calc((100% - 30px) / 2);
  }

}

/* 500px以下 */
@media (max-width:500px){

  h2 {
    font-size: 24px;
  }
  .box h3 {
    font-size: 20px;
  }
  /* bxsliderの画像の高さを維持したい場合 */
  .main-visual {
    /* 親の箱のサイズを指定 */
    width: 100%;
    height: 350px;
  }
  /* 画像の直の親にもサイズを指定 */
  .main-visual li {
    width: 100%;
    height: 350px;
  }
  /* object-fit: cover;箱のサイズを写真で覆う設定をする */
  /* width・height共に100%画像で覆うと指定する */
  .main-visual img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .box {
    width: 100%;
  }

}

bxsliderでスライドショーを作成する

bxsliderは簡単にスライドショーを作成できるJQueryプラグインです。
ここでは使い方を簡単に説明していきます。

bxsliderのサイトからダウンロードする

手順

  • jQuery本体をリンクする
  • bxsliderのCSSとjsファイルをリンクする
  • bxsliderの呼び出し関数を使い呼び出す

 

「dist」フォルダから必要な書類を自分の管理フォルダに移動する

ダウンロードしたデータから必要な書類を自分の管理フォルダ内の所定のフォルダの中に移動します。

まずは<head>の中に<link>タグを使いCSSをリンクし、<body>の終了タグの上には<script>タグを使ってJSファイルをリンクする。
JSファイルのリンクは、必ずJQuery本体の下にリンクする。

<!-- bxsliderのCSSを head 内にリンクする -->
<link rel="stylesheet" href="css/jquery.bxslider.css">
<!-- bxsliderのJSを bodyの 終了タグの前にリンクする -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="js/jquery.bxslider.js"></script>

 bxsliderの呼び出し関数を設定する

bxSliderを呼び出すための最低限の記述になります。
「.bxslider」のところには任意のクラス名やID名を入れることができます。

$(function(){
$('.bxslider').bxSlider({
// ここにオプションの設定を追記する
});
});

Lightboxでモーダルウィンドウを作成する

Lightbox は画像を使ったモーダルウィンドウが簡単に設定できます。

Lightboxの公式サイトからダウンロードする

Githubからデータをダウンロードする際、Lightboxは「master」ではなく「dev」になっているので「master」を選択しZIPファイルをダウンロードする。

手順

  • JQuery本体を読み込む
  • LightboxのCSSとJSファイルを読み込む
  • data属性の設定をする

distから必要な書類を自分の管理フォルダに移動する

distフォルダ内のCSS・JS・imageフォルダから必要なデータを自分の管理フォルダへ移動する。

  • lightbox.css
  • lightbox.js
  • images フォルダ内の画像

ダウンロードしたファイルを読み込む

<head>内に lightbox.css を読み込む

<link rel="stylesheet" href="css/lightbox.css">

bodyの終了タグの上にJQuery本体のCDN と lightbox.js を読み込む

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="js/lightbox.js"></script>

data属性を使い設定を追加する

Lightboxの場合は呼び出し関数を使うのではなく、data属性を使って設定をします。

基本的な設定

基本的な設定は以下のようになります。
コントロールしやすいように全体を<p>タグで囲むこともあります。

<a href="画像のパス" data-lightbox="roadtrip"><img="画像のパス" alt=""></a>

 

data-lightbox=”グループの名称” を使ってグループ設定をする

ポップアップさせたい画像に「data-lightbox」という属性が付いた <a> タグで画像をリンクします。data-lightbox=” グループ名”には自分でわかりやすい名前をつけます。
(グループの名称部分を空の状態にはできません。)

a href=”画像のパス”はポップアップで表示する拡大後の画像、img src=”画像のパス”はサムネールの画像です。同じ画像でも良いですし、大きさを変えた画像でもOKです。

data-title=”画像のタイトル” を使って写真のタイトルの設定をする

data-lightbox 同様、<a> タグに設定するのが、data-title=”画像のタイトル” になります。
モーダルウィンドウでポップアップ表示された写真の下に表示されます。任意でタイトルの設定ができます。