目次
戻すには、あなたは現在の版とアーカイブから選んだ戻したい版を比較しなければなりません。
対象としたリビジョンの比較
...
ギャラリーの追加
(1)下記のコードをコピーします。こちらがギャラリーを置くベースになります。
...
<div class="instructor-note-images row">
</div>
...
(2)先程コピーしたコードに、下記コードを追加したい画像分、追加していきます。
<div class="col-sm-3 col-xs-12">
<div class="images-wrapper">
<a href="[画像URL]" target="_blank" class="light-box-link" data-lightbox=ギャラリーの名前]" rel="noopener">
<img src="[画像URL]" />
</a>
</div>
</div>
...
3つの画像を乗せる場合は下記のようになります。
※わかりやすいように変更箇所部分に番号を振っています。
...
<div class="instructor-note-images row">
<div class="col-sm-3 col-xs-12">
<div class="images-wrapper">
<a href="[画像URL]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">
<img src="[画像URL]" />
</a>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="images-wrapper">
<a href="[画像URL02]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">
<img src="[画像URL02]" />
</a>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="images-wrapper">
<a href="[画像URL03]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">
<img src="[画像URL03]"/>
</a>
</div>
</div>
</div>
...
(3)必要箇所を適宜変更します。
※変更する箇所がわかりやすいように、上記のコード列に番号を振り、変更する箇所の文字色を赤にしました。
...
<div class="instructor-note-images row">
<div class="col-sm-3 col-xs-12">
<div class="images-wrapper">
<a href="[画像URL]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">
<img src="[画像URL]" />
</a>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="images-wrapper">
<a href="[画像URL02]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">
<img src="[画像URL02]" />
</a>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="images-wrapper">
<a href="[画像URL03]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">
<img src="[画像URL03]"/>
</a>
</div>
</div>
</div>
...
(4)ギャラリーの名前を指定します。
下記コードの[ギャラリーの名前]となっている赤字部分を変更します。
...
<a href="[画像URL02]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">
...
これは、このコードを追加するインストラクターのギャラリーを指定するための名前になります。
同じ名前がつけられた画像は、グループとして画像をクリックしたときに出る矢印で次々に閲覧できる様になります。
名前付けのルールは[image_(名前イニシャル)_名字ローマ字]でつけています。
命名に使用できるのは半角英数字と「_」アンダースコアです。
...
(5)画像を指定します。
管理画面からメディアページへ移動します。使用したい画像をクリックして表示された「添付ファイルの詳細」からURL欄をコピーして下記コードの[画像URL02]となっているの赤字部分に貼り付けます。
...
<a href="[画像URL]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">
<img src="[画像URL]" />
...
(6)Wordpress管理画面から、インストラクター紹介の編集ページを開きます。
...
(7)編集モードを「ビジュアル」から「テキスト」に切り替えます。
...
(8)先程編集したコードをコピーして記事内の追加したいインストラクターさんの紹介文の上に貼り付けてください。
...
例:
<!-- インストラクター紹介__ここから -->
<div class="col-sm-3 col-xs-6">
<a class="instructor_toggle collapsed" data-toggle="collapse" href="#instructor_r_kikkawa">
<div class="">
<div class="instructor-link-image-wrapper">
<img src="wp-content/themes/harmonie-yoga/images/instructor/instructor_img_r_kikkawa_x2.png" class="instructor-link-image" />
</div>
<p class="instructor-link-title">代表 兼 インストラクター</p>
<p class="instructor-link-name">橘河 里奈</p>
</div>
</a>
<div class="collapse instructor_box" id="instructor_r_kikkawa">
<div class="well">
<div class="instructor-note">
<div class="instructor-close instructor-close-top">
<a class="instructor_toggle collapsed" data-toggle="collapse" href="#instructor_r_kikkawa">
<img src="wp-content/themes/harmonie-yoga/images/instructor/instructor_close_btn_top.png" alt="インストラクター紹介を閉じる" />
</a>
</div>
<p class="instructor-note-title">代表 兼 インストラクター</p>
<p class="instructor-note-name">橘河 里奈</p>
<div class="instructor-note-images row">
<div class="col-sm-3 col-xs-12">
<div class="images-wrapper">
<a href="[画像URL]" target="_blank" class="light-box-link" data-lightbo x="[ギャラリーの名前]" rel="noopener">
<img src="[画像URL]" />
</a>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="images-wrapper">
<a href="[画像URL02]" target="_blank" class="light-box-link" data-lightbo x="[ギャラリーの名前]" rel="noopener">
<img src="[画像URL02]" />
</a>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="images-wrapper">
<a href="[画像URL03]" target="_blank" class="light-box-link" data-lightbo x="[ギャラリーの名前]" rel="noopener">
<img src="[画像URL03]"/>
</a>
</div>
</div>
</div>
<!-- インストラクターギャラリーを__ここの上に追加してください -->
<p class="instructor-note-txt">ヨガを通じて、自然と調和した心身の健やかさが身につくように
<br />毎日の生活が、豊かで爽やかになるように
<br />笑顔の輪がどこまでもひろがるように願っています
<br />
<br />《保有資格》
<br />東海大学体育学修士(現 東海大学非常勤講師）
<br />日本予防医学療術協会認定ヨガインストラクター
<br />乳がんリハビリヨガ指導者養成講座修了
<br />
<br />《その他の活動》
<br />お寺ヨガ主宰 主宰
<a href="https://www.harmonie-yoga.com/%e3%81%8a%e5%af%ba%e3%81%a7%e5%9b%9b%e5%ad%a3%e3%83%a8%e3%82%ac%ef%bc%88%e5%8e%9a%e6%9c%a8%e5%b8%82%e9%95%b7%e8%b0%b7%e5%af%ba%e8%93%ac%e8%8e%b1%e5%b1%b1%e5%80%b6%e6%a5%bd%e9%83%a8%ef%bc%89" target="_blank" class="link-style-01" rel="noopener">詳しくはこちら＞＞＞</a>
</p>
<div class="instructor-close instructor-close-bottom">
<a class="instructor_toggle collapsed" data-toggle="collapse" href="#instructor_r_kikkawa">
<img src="wp-content/themes/harmonie-yoga/images/instructor/instructor_close_btn_bottom.png" alt="インストラクター紹介を閉じる" />
</a>
</div>
</div>
</div>
</div>
</div>
<!-- インストラクター紹介__ここまで -->
...
(9)更新ボタンをクリックして、ページを確認してください。
...
2018年 12月 4日, 05:09からのバージョン
...
2019年 7月 1日, 12:31 現在の版
...
ギャラリーの追加
(1)下記のコードをコピーします。こちらがギャラリーを置くベースになります。
...
<div class="instructor-note-images row">
</div>
...
(2)先程コピーしたコードに、下記コードを追加したい画像分、追加していきます。
<div class="col-sm-3 col-xs-12">
<div class="images-wrapper">
<a href="[画像URL]" target="_blank" class="light-box-link" data-lightbox=ギャラリーの名前]" rel="noopener">
<img src="[画像URL]" />
</a>
</div>
</div>
...
3つの画像を乗せる場合は下記のようになります。
※わかりやすいように変更箇所部分に番号を振っています。
...
<div class="instructor-note-images row">
<div class="col-sm-3 col-xs-12">
<div class="images-wrapper">
<a href="[画像URL]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">
<img src="[画像URL]" />
</a>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="images-wrapper">
<a href="[画像URL02]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">
<img src="[画像URL02]" />
</a>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="images-wrapper">
<a href="[画像URL03]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">
<img src="[画像URL03]"/>
</a>
</div>
</div>
</div>
...
(3)必要箇所を適宜変更します。
※変更する箇所がわかりやすいように、上記のコード列に番号を振り、変更する箇所の文字色を赤にしました。
...
<div class="instructor-note-images row">
<div class="col-sm-3 col-xs-12">
<div class="images-wrapper">
<a href="[画像URL]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">
<img src="[画像URL]" />
</a>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="images-wrapper">
<a href="[画像URL02]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">
<img src="[画像URL02]" />
</a>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="images-wrapper">
<a href="[画像URL03]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">
<img src="[画像URL03]"/>
</a>
</div>
</div>
</div>
...
(4)ギャラリーの名前を指定します。
下記コードの[ギャラリーの名前]となっている赤字部分を変更します。
...
<a href="[画像URL02]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">
...
これは、このコードを追加するインストラクターのギャラリーを指定するための名前になります。
同じ名前がつけられた画像は、グループとして画像をクリックしたときに出る矢印で次々に閲覧できる様になります。
名前付けのルールは[image_(名前イニシャル)_名字ローマ字]でつけています。
命名に使用できるのは半角英数字と「_」アンダースコアです。
...
(5)画像を指定します。
管理画面からメディアページへ移動します。使用したい画像をクリックして表示された「添付ファイルの詳細」からURL欄をコピーして下記コードの[画像URL02]となっているの赤字部分に貼り付けます。
...
<a href="[画像URL]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">
<img src="[画像URL]" />
...
(6)Wordpress管理画面から、インストラクター紹介の編集ページを開きます。
...
(7)編集モードを「ビジュアル」から「テキスト」に切り替えます。
...
(8)先程編集したコードをコピーして記事内の追加したいインストラクターさんの紹介文の上に貼り付けてください。
...
例:
<!-- インストラクター紹介__ここから -->
<div class="col-sm-3 col-xs-6">
<a class="instructor_toggle collapsed" data-toggle="collapse" href="#instructor_r_kikkawa">
<div class="">
<div class="instructor-link-image-wrapper">
<img src="wp-content/themes/harmonie-yoga/images/instructor/instructor_img_r_kikkawa_x2.png" class="instructor-link-image" />
</div>
<p class="instructor-link-title">代表 兼 インストラクター</p>
<p class="instructor-link-name">橘河 里奈</p>
</div>
</a>
<div class="collapse instructor_box" id="instructor_r_kikkawa">
<div class="well">
<div class="instructor-note">
<div class="instructor-close instructor-close-top">
<a class="instructor_toggle collapsed" data-toggle="collapse" href="#instructor_r_kikkawa">
<img src="wp-content/themes/harmonie-yoga/images/instructor/instructor_close_btn_top.png" alt="インストラクター紹介を閉じる" />
</a>
</div>
<p class="instructor-note-title">代表 兼 インストラクター</p>
<p class="instructor-note-name">橘河 里奈</p>
<div class="instructor-note-images row">
<div class="col-sm-3 col-xs-12">
<div class="images-wrapper">
<a href="[画像URL]" target="_blank" class="light-box-link" data-lightbo x="[ギャラリーの名前]" rel="noopener">
<img src="[画像URL]" />
</a>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="images-wrapper">
<a href="[画像URL02]" target="_blank" class="light-box-link" data-lightbo x="[ギャラリーの名前]" rel="noopener">
<img src="[画像URL02]" />
</a>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="images-wrapper">
<a href="[画像URL03]" target="_blank" class="light-box-link" data-lightbo x="[ギャラリーの名前]" rel="noopener">
<img src="[画像URL03]"/>
</a>
</div>
</div>
</div>
<!-- インストラクターギャラリーを__ここの上に追加してください -->
<p class="instructor-note-txt">ヨガを通じて、自然と調和した心身の健やかさが身につくように
<br />毎日の生活が、豊かで爽やかになるように
<br />笑顔の輪がどこまでもひろがるように願っています
<br />
<br />《保有資格》
<br />東海大学体育学修士(現 東海大学非常勤講師）
<br />日本予防医学療術協会認定ヨガインストラクター
<br />乳がんリハビリヨガ指導者養成講座修了
<br />
<br />《その他の活動》
<br />お寺ヨガ主宰 主宰
<a href="https://www.harmonie-yoga.com/%e3%81%8a%e5%af%ba%e3%81%a7%e5%9b%9b%e5%ad%a3%e3%83%a8%e3%82%ac%ef%bc%88%e5%8e%9a%e6%9c%a8%e5%b8%82%e9%95%b7%e8%b0%b7%e5%af%ba%e8%93%ac%e8%8e%b1%e5%b1%b1%e5%80%b6%e6%a5%bd%e9%83%a8%ef%bc%89" target="_blank" class="link-style-01" rel="noopener">詳しくはこちら＞＞＞</a>
</p>
<div class="instructor-close instructor-close-bottom">
<a class="instructor_toggle collapsed" data-toggle="collapse" href="#instructor_r_kikkawa">
<img src="wp-content/themes/harmonie-yoga/images/instructor/instructor_close_btn_bottom.png" alt="インストラクター紹介を閉じる" />
</a>
</div>
</div>
</div>
</div>
</div>
<!-- インストラクター紹介__ここまで -->
...
(9)更新ボタンをクリックして、ページを確認してください。
...
