目次
戻すには、あなたは現在の版とアーカイブから選んだ戻したい版を比較しなければなりません。
2018年 12月 4日, 04:59からのバージョン
インストラクターの追加
画像の用意
(1)縦200px、横200px以上の正方形の写真をご用意ください。
左の写真が、右のように切り取られますので、顔等の位置が端にならないようにしてください。
(2)メディアアップロードでアップします。
記事の用意
(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)コードに名前を指定します。
下記の[href="#instructor_r_kikkawa"]の "# 〜 " の間を変更します。
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)更新ボタンをクリックして、ページを確認してください。
2018年 12月 4日, 05:02 現在の版
インストラクターの追加
画像の用意
(1)縦200px、横200px以上の正方形の写真をご用意ください。
左の写真が、右のように切り取られますので、顔等の位置が端にならないようにしてください。
(2)メディアアップロードでアップします。
記事の用意
(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)コードに名前を指定します。
下記の[href="#instructor_r_kikkawa"]の "# 〜 " の間を変更します。
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)更新ボタンをクリックして、ページを確認してください。