商品詳細ページ 編集マニュアル

はじめに

編集は、間違うと画面の表示が崩れる恐れがあります。
また、ワードプレスの「ビジュアルモード」で開くと、何も操作しなくてもタグが自動で挿入されたり、タグが消去される恐れがあります。
ですので、
1)編集は必ず「テキストモード」で行い、「ビジュアルモード」は開かない。(画面は、プレビューボタンからご確認下さい)
2)編集を行う際は、開始時に編集画面のテキストを全てコピーし、いつでも復元できるようにバックアップをとる。

この2点にご注意頂くよう、よろしくお願いします。

リンクに「>」をつける

リンクタグ<a href="リンクURL"></a><p class="product_txt" ></p>で囲ってあげる必要があります。

<p class="product_txt">
    <a href="http://~~~">10個入  1,500円(本体価格)</a>
</p>

このタグで囲まれたリンクには、左に灰色の「>」がつきます。
このタグで画像リンクを囲むと、画像の前にも「>」がつきますのでご注意下さい。
「リンクURL」部分には「a href="http://~"」のように、飛び先のURLを入れて下さい。

行を増やしたい場合は、以下のように記述します。

<p class="product_txt">
    aで囲まれていない文字には何もつきません。<br>
    <a href="#">5個入   1,000円(本体価格)</a><br>
    <a href="#">10個入  1,800円(本体価格)</a><br>
    <a href="#">20個入  3,500円(本体価格)</a>
</p>

表示


aで囲まれていない文字には何もつきません。
5個入 1,000円(本体価格)
10個入 1,800円(本体価格)
20個入 3,500円(本体価格)

画像を3列で並べる

<!-- 3列ここから -->
<div class="gallery_lists">

</div>
<!-- 3列ここまで -->

という囲いの中に、後述の
<!-- コピーここから -->

<!-- コピーここまで -->

を入れていきます。


    <!-- コピーここから -->
    <div class="gallery_block">
    <a href="リンクURL"><!-- ←リンクURL -->
        <div class="gallery_img">
        <!-- ↓画像挿入 -->

        </div>
        <!-- ↓文章エリア -->
        <div class="gallery_txt">
            <p class="gallery_name"></p><!-- ←商品名 -->
            <p class="gallery_price"></p><!-- ←値段 -->
            <p>日持ち</p><!-- ←日持ち -->
            <p class="gallery_time"></p><!-- ←日数 -->
            <p class="gallery_time"></p><!-- ←日数 -->
            <p class="gallery_time"></p><!-- ←日数 -->
        </div>
    </a>
    </div>
    <!-- コピーここまで -->

↑これが、商品1つのまとまりです。

ここに、
①飛び先のリンクURL
②画像ファイル
③画像下の文章
の3つの情報を入れます。

①「リンクURL」部分に「a href="http://~"」のように、飛び先のURLを入れて下さい。
② <!-- ↓画像挿入 -->の下に「メディアの追加」⇒「メディアの挿入」で画像を挿入して下さい。
※挿入する画像のサイズに関わらず、画面の1/3に収まるサイズに変更されます。
③文章エリア以下に、「商品名」、「値段」、「日持ち」、「日数」をそれぞれ記入します。

実際には、以下のように記述ます。

<div class="gallery_lists">

    <!-- コピーここから -->
    <div class="gallery_block">
    <a href="https://www.amazon.co.jp/%E4%B8%B8%E5%B1%8B%E6%9C%AC%E5%BA%97-%E5%A4%8F%E3%81%AE%E7%89%B9%E9%81%B8%E5%90%8D%E8%8F%93%E6%92%B0/dp/B01HJV6OVG/ref=sr_1_46?m=A2SKVSSS290MCC&s=merchant-items&ie=UTF8&qid=1467760142&sr=1-46"><!-- ←リンクURL -->
        <div class="gallery_img">
        <!-- ↓画像挿入 -->
<img src="http://www.maruyahonten.com/maruyahonten/wp-content/uploads/2016/07/84thumb_summer_special-300x250.jpg" alt="84thumb_summer_special" width="300" height="250" class="aligncenter size-medium wp-image-971" />
        </div>
        <!-- ↓文章エリア -->
        <div class="gallery_txt">
        <p class="gallery_name">夏の特撰名菓撰</p><!-- ←商品名 -->
        <p class="gallery_price">5,460円(本体価格)</p><!-- ←値段 -->
        <p>日持ち</p><!-- ←日持ち -->
        <p class="gallery_time">30日(雪のしずく・新潟果樹園)</p><!-- ←日数 -->
        <p class="gallery_time">20日(お米ほろほろ・枝豆羊羹)</p><!-- ←日数 -->
        <p class="gallery_time">10日(貴婦人)</p><!-- ←日数 -->
        </div>
    </a>
    </div>
    <!-- コピーここまで -->

</div>
<!-- 3列ここまで -->


文章エリアは、不要な部分は記入しなくても構いません。
商品数を追加したい場合は、
<!-- コピーここから -->

<!-- コピーここまで -->

を並べて追加します。


<!-- 3列ここから -->
<div class="gallery_lists">


    <!-- コピーここから -->
    <div class="gallery_block">
    <a href="https://www.amazon.co.jp/%E4%B8%B8%E5%B1%8B%E6%9C%AC%E5%BA%97-%E8%B2%B4%E5%A9%A6%E4%BA%BA%E3%80%8012%E5%80%8B%E5%85%A5/dp/B01I55LP00/ref=sr_1_47?m=A2SKVSSS290MCC&s=merchant-items&ie=UTF8&qid=1468071363&sr=1-47"><!-- ←リンクURL -->
        <div class="gallery_img">
        <!-- ↓画像挿入 -->
<img src="http://www.maruyahonten.com/maruyahonten/wp-content/uploads/2016/06/DSC03736-289x300.jpg" alt="DSC03736" width="289" height="300" class="size-medium wp-image-934 aligncenter" />
        </div>
        <!-- ↓文章エリア -->
        <div class="gallery_txt">
            <p class="gallery_name">12個入 </p><!-- ←商品名 -->
            <p class="gallery_price">2,840円(本体価格)</p><!-- ←値段 -->
            <p></p><!-- ←日持ち -->
            <p class="gallery_time"></p><!-- ←日数 -->
            <p class="gallery_time"></p><!-- ←日数 -->
            <p class="gallery_time"></p><!-- ←日数 -->
        </div>
    </a>
    </div>
    <!-- コピーここまで -->


    <!-- コピーここから -->
    <div class="gallery_block">
    <a href="https://www.amazon.co.jp/%E4%B8%B8%E5%B1%8B%E6%9C%AC%E5%BA%97-%E5%A4%8F%E3%81%AE%E7%89%B9%E9%81%B8%E5%90%8D%E8%8F%93%E6%92%B0/dp/B01HJV6OVG/ref=sr_1_46?m=A2SKVSSS290MCC&s=merchant-items&ie=UTF8&qid=1467760142&sr=1-46"><!-- ←リンクURL -->
        <div class="gallery_img">
        <!-- ↓画像挿入 -->
<img src="http://www.maruyahonten.com/maruyahonten/wp-content/uploads/2016/07/84thumb_summer_special-300x250.jpg" alt="84thumb_summer_special" width="300" height="250" class="aligncenter size-medium wp-image-971" />
        </div>
        <!-- ↓文章エリア -->
        <div class="gallery_txt">
            <p class="gallery_name">夏の特撰名菓撰</p><!-- ←商品名 -->
            <p class="gallery_price">5,460円(本体価格)</p><!-- ←値段 -->
            <p>日持ち</p><!-- ←日持ち -->
            <p class="gallery_time">30日(雪のしずく・新潟果樹園)</p><!-- ←日数 -->
            <p class="gallery_time">20日(お米ほろほろ・枝豆羊羹)</p><!-- ←日数 -->
            <p class="gallery_time">10日(貴婦人)</p><!-- ←日数 -->
        </div>
    </a>
    </div>
    <!-- コピーここまで -->


    <!-- コピーここから -->
    <div class="gallery_block">
    <a href="https://www.amazon.co.jp/%E4%B8%B8%E5%B1%8B%E6%9C%AC%E5%BA%97-%E3%81%8A%E7%B1%B3%E3%81%BB%E3%82%8D%E3%81%BB%E3%82%8D%E3%83%BB%E8%B2%B4%E5%A9%A6%E4%BA%BA%E3%83%BB%E3%81%BF%E3%81%AA%E3%81%A8%E6%B5%AA%E6%BC%AB%E3%80%80%E8%A9%B0%E5%90%88%E3%81%9B/dp/B01HJU4UAE/ref=sr_1_27?m=A2SKVSSS290MCC&s=merchant-items&ie=UTF8&qid=1467760142&sr=1-27"><!-- ←リンクURL -->
        <div class="gallery_img">
        <!-- ↓画像挿入 -->
<img src="http://www.maruyahonten.com/maruyahonten/wp-content/uploads/2016/07/79thumb_okome_kifujin_minato-300x250.jpg" alt="79thumb_okome_kifujin_minato" width="300" height="250" class="aligncenter size-medium wp-image-966" />
        </div>
        <!-- ↓文章エリア -->
        <div class="gallery_txt">
            <p class="gallery_name">お米ほろほろ・貴婦人・みなと浪漫詰合せ</p><!-- ←商品名 -->
            <p class="gallery_price">3,380円(本体価格)</p><!-- ←値段 -->
            <p></p><!-- ←日持ち -->
            <p class="gallery_time">20日(お米ほろほろ)</p><!-- ←日数 -->
            <p class="gallery_time"></p><!-- ←日数 -->
            <p class="gallery_time"></p><!-- ←日数 -->
        </div>
    </a>
    </div>
    <!-- コピーここまで -->


</div>
<!-- 3列ここまで -->

ページ先頭へ戻る