インストラクター紹介

a.kubota により 2019年 7月 1日, 12:31が変更された | 履歴

インストラクターの追加

画像の用意

(1)縦200px、横200px以上の正方形の写真をご用意ください。

左の写真が、右のように切り取られますので、顔等の位置が端にならないようにしてください。

(2)Wordpress管理画面のメディアページよりメディアアップロードで画像をアップします。

記事の用意

(1)下記のコードをコピーします。

<!-- インストラクター紹介__ここから -->
<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">
        <p class="instructor-note-title">代表 兼 インストラクター</p>
        <p class="instructor-note-name">橘河 里奈</p>
        <p class="instructor-note-txt">
          ヨガを通じて、自然と調和した心身の健やかさが身につくように<br>
          毎日の生活が、豊かで爽やかになるように<br>
          笑顔の輪がどこまでもひろがるように願っています<br><br>
          《保有資格》<br>
          東海大学体育学修士(現 東海大学非常勤講師）<br>
          内閣府認証NPO法人日本予防医学療術協会認定ヨガインストラクター<br>
          乳がんリハビリヨガ指導者養成講座修了<br><br>
          《その他の活動》<br>
          ヒプノセラピスト<br>
          お寺で四季ヨガ 主宰<br>
          絵本【きぼうの星】　<a href="https://ameblo.jp/moritotunagu/entry-12226357726.html" target="_blank" class="link-style-01">詳しくはこちら＞＞＞</a>
        </p>
      </div>
    </div>
  </div>
</div>
<!-- インストラクター紹介__ここまで -->

(2)必要箇所を適宜変更します。

※変更する箇所がわかりやすいように、上記のコード列に番号を振り、変更する箇所の文字色を赤にしました。

01    <!-- インストラクター紹介__ここから -->
02    <div class="col-sm-3 col-xs-6">
03      <a class="instructor_toggle collapsed" data-toggle="collapse" href="#instructor_r_kikkawa">
04        <div class="">
05          <div class="instructor-link-image-wrapper">
06            <img src="wp-content/themes/harmonie-yoga/images/instructor/instructor_img_r_kikkawa_x2.png" class="instructor-link-image">
07          </div>
08          <p class="instructor-link-title">代表 兼 インストラクター</p>
09          <p class="instructor-link-name">橘河 里奈</p>
10        </div>
11      </a>
12      <div class="collapse instructor_box" id="instructor_r_kikkawa">
13        <div class="well">
14          <div class="instructor-note">
15            <p class="instructor-note-title">代表 兼 インストラクター</p>
16            <p class="instructor-note-name">橘河 里奈</p>
17            <p class="instructor-note-txt">
18              ヨガを通じて、自然と調和した心身の健やかさが身につくように<br>
19              毎日の生活が、豊かで爽やかになるように<br>
20              笑顔の輪がどこまでもひろがるように願っています<br><br>
21              《保有資格》<br>
22              東海大学体育学修士(現 東海大学非常勤講師）<br>
23              内閣府認証NPO法人日本予防医学療術協会認定ヨガインストラクター<br>
24              乳がんリハビリヨガ指導者養成講座修了<br><br>
25              《その他の活動》<br>
26              ヒプノセラピスト<br>
27              お寺で四季ヨガ 主宰<br>
28              絵本【きぼうの星】　<a href="https://ameblo.jp/moritotunagu/entry-12226357726.html" target="_blank" class="link-style-01">詳しくはこちら＞＞＞</a>
29            </p>
30          </div>
31        </div>
32      </div>
33    </div>
34    <!-- インストラクター紹介__ここまで -->

(3)コードに名前を指定します。

下記コードの"# 〜 " の間の赤字部分を変更します。

03      <a class="instructor_toggle collapsed" data-toggle="collapse" href="#instructor_r_kikkawa">

これは、このコードが追加するインストラクターについて書かれたコードであることを指定するための名前になるので、

他の名前と同じにならないようにしてください。

（同じ名前をつけると、画像をクリックした際、同じ名前のつけられたインストラクターさん両名の詳細が同時に開閉します。）

命名規則として、[instructor_(名前イニシャル)_名字ローマ字]でつけています。

命名に使用できるのは半角英数字と「_」アンダースコアです。

こちらでつけた名前と同じ名前を下記コードの id="　〜 "の間の赤字部分に入れてください。

12 <div class="collapse instructor_box" id="instructor_r_kikkawa">

(4)画像を指定します。

管理画面からメディアページへ移動します。使用したい画像をクリックして表示された「添付ファイルの詳細」からURL欄をコピーして下記コードの src=" 〜 "の間の赤字部分に貼り付けます。

06            <img src="wp-content/themes/harmonie-yoga/images/instructor/instructor_img_r_kikkawa_x2.png" class="instructor-link-image">

(5)他部分の、インストラクター情報を書き換えてください。

前と後ろにあります<>で囲われたタグに気をつけて書き換えて下さい。

(6)Wordpress管理画面から、インストラクター紹介の編集ページを開きます。

(7)編集モードを「ビジュアル」から「テキスト」に切り替えます。

(8)先程編集したコードをコピーして記事内のの後ろにカーソルを置いて貼り付けてください。

(9)更新ボタンをクリックして、ページを確認してください。

インストラクターの削除

(1)Wordpress管理画面から、インストラクター紹介の編集ページを開きます。

(2)編集モードを「ビジュアル」から「テキスト」に切り替えます。

(3)削除したいインストラクターのコードの

から

を選択して削除します。

(4)更新ボタンをクリックして、ページを確認してください。

インストラクターの変更

(1)Wordpress管理画面から、インストラクター紹介の編集ページを開きます。

(2)編集モードを「ビジュアル」から「テキスト」に切り替えます。

(3)削除したいインストラクターの名前またはフリースペースの部分を編集してください。

(4)更新ボタンをクリックして、ページを確認してください。

ギャラリーの追加

(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_(名前イニシャル)_名字ローマ字]でつけています。