商品の説明欄に記載する文章の、htmlタグを使用した「テキスト入力モード」での記入方法を、こちらに書き留めます。こちらに書き留めます。このページをサイト上でご覧いただき、それぞれの説明文と商品説明編集欄の記載を比べる事で、記入方法が理解出来る様にしています。

WordPressではこのテキストモードの他に、ワープロの様にタグを用いない方法でも文章入力が出来ますが、テキストモードではより正確なコントロールが可能です。また、ビジュアルモードでは入力出来ない項目もあります(この後記載するビデオ表示やスライドショーの記載に用いる方法など)。モード間の切り替えは任意で可能ですが、切り替えの際、記入内容が自動的に各モード用に変換されるため、表示が崩れる場合があります。

このパラグラフは”p”(paragraph)タグで囲ってあります。”p”タグは単に文章を打ち込むだけで自動生成される為、記載は任意で構いません。視覚的に分かりやすい場合や、レイアウトのコントロールを正確に行うのに必要な際に用いて下さい。
パラグラフ内では、通常のワープロの様に改行するとサイト上でも改行して表示されます。
また、改行をせず半角で＜ｂr＞と打つ事でも改行が可能です。

それぞれのパラグラフを”p”タグで囲む事で、上の様に２つのパラグラフの間を一行開ける事が出来ます。”p”タグを用いない場合は、一度改行した上で、半角で＜ｂr＞と打ち、再度改行すると事で、同様に一行開ける事が出来ます。実際の表記方法は商品編集画面をご覧ください

上の様にパラグラフ間を一行以上開けたい場合(例えば複数パラグラフを１セクションとして扱い、それぞれのセクション間に一行以上の間隔を開けたい場合)は、改行した上で、全て半角で＆ｎｂｓｐ；(non-breaking space)と記入し、再度改行する事を、必要な分だけ繰り返して下さい。上記＜ｂr＞を複数回記入しても、複数行の間隔を開ける事は出来ません。この＆ｎｂｓｐ；は、半角スペースのコードですので、文字と文字の間を半角開ける際にも使用出来ます。以下ではこの方法で三行分のスペースを加えます。

以下では異なる文字サイズの入力方法を記載します。これらはパラグラフ内に含める事は「出来ません」。

“h1″(header)タグで囲った文章を表示しています。タイトルやサブタイトル等、大きい文字で表示したい部分に用います。

“h2″(header)タグで囲った文章を表示しています。上記”h1″とパラグラフの中間の文字サイズで表示します。

以下では装飾文字やリンクなどの入力方法を記載します。これらはパラグラフ内に含める事が「出来ます」。また、それぞれを組み合わせて使用する事も出来ます。

これは”b”(bold)タグで囲った、太字の文章です。実際の表記方法は商品編集画面をご覧ください。

これは”em”(emphasized)タグで囲った文章で、イタリックで表示されます。実際の表記方法は商品編集画面をご覧ください。

これは”u”(underlined)タグで囲った文章で、下線が表示されます。実際の表記方法は商品編集画面をご覧ください。

これは外部リンクです。表記方法は商品編集画面をご覧ください。

以下はブロッククオートとリストの表示方法です。これらはパラグラフ内に含める事は「出来ません」。

これは”blockquote”タグで囲んだブロッククオート文章です。実際の表記方法は商品編集画面をご覧ください。この部分は表示状態を示す為に埋めている文章です。この部分は表示状態を示す為に埋めている文章です。この部分は表示状態を示す為に埋めている文章です。この部分は表示状態を示す為に埋めている文章です。この部分は表示状態を示す為に埋めている文章です。

• 下記はリストです。実際の表記方法は商品編集画面をご覧ください。

 

(この説明文の様なタイトルを記載する必要ありません。)
• これは”li”(list)タグで囲った、リストの1項目目です。
  直前に”ul”(unordered)タグを配置して下さい。
• これは”li”(list)タグで囲った、リストの2項目目です。
• これは”li”(list)タグで囲った、リストの3項目目です。
• これは”li”(list)タグで囲った、リストの4項目目です。
• これは”li”(list)タグで囲った、リストの5項目目です。
  直後に”/ul”(unordered)の閉じタグを配置して下さい。

以下は”img”(image)タグを使用して表示した画像です。これらはパラグラフ内に含める事が「出来ます」。2つ目の画像にはサイト内へのリンクが、3つ目の画像にはサイト外へのリンクが施してあります。ここでは外部サイトへのリンクは新しいウィンドウで開くようにしてありますが(ユーザーをサイト内へ留める為)、その場合、リンクタグ内に「target=”_blank”」の記述をする必要があります。実際の表記方法は投稿編集画面をご覧ください。

以下は”img”(image)タグを使用して表示した画像です。これらはパラグラフ内に含める事が「出来ます」。2つ目の画像にはサイト内へのリンクが、3つ目の画像にはサイト外へのリンクが施してあります。ここでは外部サイトへのリンクは新しいウィンドウで開くようにしてありますが(ユーザーをサイト内へ留める為)、その場合、リンクタグ内に「target=”_blank”」の記述をする必要があります。実際の表記方法は投稿編集画面をご覧ください。

以下ではYouTubeの埋め込み表示をしています。アドレスを専用のタグで囲む事で簡単に表示することが出来ます。また、Vimeoのビデオも同じ方法で表示する事が出来ます。こちらはパラグラフ内に含める事は「出来ません」。実際の表記方法は投稿編集画面をご覧ください。