View article
Talk page
  1. ディーゴサポートサイト
  2. お客様 設定情報関連
  3. アルモニ様
  4. インストラクター紹介

インストラクター紹介 customers/アルモニ様/インストラクター紹介 からのリダイレクト

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

    インストラクターの追加

    画像の用意

    (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            <!-- インストラクターギャラリーは_紹介文のすぐ上に置きます -->
18            <p class="instructor-note-txt">
19              ヨガを通じて、自然と調和した心身の健やかさが身につくように<br>
20              毎日の生活が、豊かで爽やかになるように<br>
21              笑顔の輪がどこまでもひろがるように願っています<br><br>
22              《保有資格》<br>
23              東海大学体育学修士(現 東海大学非常勤講師）<br>
24              内閣府認証NPO法人日本予防医学療術協会認定ヨガインストラクター<br>
25              乳がんリハビリヨガ指導者養成講座修了<br><br>
26              《その他の活動》<br>
27              ヒプノセラピスト<br>
28              お寺で四季ヨガ 主宰<br>
29              絵本【きぼうの星】　<a href="https://ameblo.jp/moritotunagu/entry-12226357726.html" target="_blank" class="link-style-01">詳しくはこちら＞＞＞</a>
30            </p>
31          </div>
32        </div>
33      </div>
34    </div>
35    <!-- インストラクター紹介__ここまで -->
    (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="[画像URL]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">
     
    これは、このコードを追加するインストラクターのギャラリーを指定するための名前になります。
    インストラクターごとに同じ名前をつけます。
    名前付けのルールは[image_(名前イニシャル)_名字ローマ字]でつけています。
    （命名に使用できるのは半角英数字と「_」アンダースコアです。）
     
    (5)画像を指定します。
    管理画面からメディアページへ移動します。使用したい画像をクリックして表示された「添付ファイルの詳細」からURL欄をコピーして下記コードの[画像URL]となっているの赤字部分に貼り付けます。
     
    <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)更新ボタンをクリックして、ページを確認してください。
     
    タグ (タグ編集)
    • No tags
    ページ統計
    1447 view(s), 11 edit(s) and 16015 character(s)

    コメント

    あなたはコメントを投稿するには ログイン しなければなりません。