エレメントリスト

見出し

基本

見出し2

      <h2>見出し2</h2>

※ h2タグで囲みます。

見出し3

      <h3>見出し3</h3>

※ h3タグで囲みます。

見出し4

      <h4>見出し4</h4>

※ h4タグで囲みます。

見出し5

      <h5>見出し5</h5>

※ h5タグで囲みます。

見出し6

      <h6>見出し6</h6>

※ h6タグで囲みます。

リスト

まる（リスト）

このテキストはダミーです
このテキストはダミーです
このテキストはダミーです

      <ul>
        <li>このテキストはダミーです</li>
        <li>このテキストはダミーです</li>
        <li>このテキストはダミーです</li>
      </ul>

※ liタグをulタグで囲みます。

数字（リスト）

このテキストはダミーです
このテキストはダミーです
このテキストはダミーです

      <ol>
        <li>このテキストはダミーです</li>
        <li>このテキストはダミーです</li>
        <li>このテキストはダミーです</li>
      </ol>

※ liタグをolタグで囲みます。

アスタリスク（リスト）

このテキストはダミーです
このテキストはダミーです
このテキストはダミーです

      <ul class="asterisk>
        <li>このテキストはダミーです</li>
        <li>このテキストはダミーです</li>
        <li>このテキストはダミーです</li>
      </ul>

※ ulタグにclass「asterisk」を設定します。

リンクリスト

      <ul class="link-list">
        <li><a href="test.pdf">このテキストはダミーです</a></li>
        <li><a href="test.pdf">このテキストはダミーです</a></li>
        <li><a href="test.pdf">このテキストはダミーです</a></li>
      </ul>

※ ulタグにclass「link-list」を設定します。リンクのみのリストを作成する場合に利用します。

リンク

PDFファイル

      <p><a href="test.pdf">PDFファイル</a></p>

※ aタグのリンク先ファイルの拡張子が.pdfの場合、自動的に表示されます。

Wordファイル

      <p><a href="test.docx" target="_blank">Wordファイル</a></p>

※ aタグのリンク先ファイルの拡張子が.docx、.docの場合、自動的に表示されます。

Excelファイル

      <p><a href="test.xlsx" target="_blank">Excelファイル</a></p>

※ aタグのリンク先ファイルの拡張子が.xlsx、.xlsの場合、自動的に表示されます。

PowerPointファイル

      <p><a href="test.pptx" target="_blank">PowerPointファイル</a></p>

※ aタグのリンク先ファイルの拡張子が.pptx、.ppt、自動的に表示されます。

外部サイト

      <p><a href="#" target="_blank">テキストデータ</a></p>

※ aタグに別タブ（target=”_blank”）が指定されている場合、自動的に表示されます。

リンクアイコン非表示

      <p><a class="imagelink" href="#" target="_blank"><img src="/wp/wp-content/themes/rengeji/images/dummy.png"></a></p>

※ 画像リンクなどリンクアイコンを非表示にしたい場合、aタグのclassに「imagelink」を設定します。

リンクアイコン

矢印がつくリンクテキストにします

      <p><a class="link" href="">リンクテキストをボタン風にします</a></p>

※ 矢印がつくようにしたい場合、aタグのclassに「link」を設定します。

リンクボタン

リンクテキストをボタン風にします

      <p><a class="linkbtn" href="">リンクテキストをボタン風にします</a></p>

※ ボタンのようにしたい場合、aタグのclassに「linkbtn」を設定します。

ページ内リンク横並び

個室
共通設備

      <ul class="page-links">
        <li><a href="#room">個室</a></li>
        <li><a href="#shared-facilities">共通設備</a></li>
      </ul>

※ 横並びのページ内リンクになります。

テーブル

列見出し1	列見出し2	列見出し3
行見出し1	ダミー	ダミー
行見出し2	ダミー	ダミー

      <table>
        <thead>
          <tr>
            <th>列見出し1</th>
            <th>列見出し2</th>
            <th>列見出し3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>行見出し1</th>
            <td>ダミー</td>
            <td>ダミー</td>
          </tr>
          <tr>
            <td>行見出し2</td>
            <td>ダミー</td>
            <td>ダミー</td>
        </tbody>
      </table>

フレーム

枠付き（グレー）

このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。

      <p class="border-box">
        このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。
      </p>

※ 段落が複数ある場合はdivタグで囲み、divタグにclass「border-box」を設定します。

枠付き（オレンジ）

      <p class="border-box2">
        このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。
      </p>

※ 段落が複数ある場合はdivタグで囲み、divタグにclass「border-box2」を設定します。

枠なし

      <p class="color-box2">
        このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。
      </p>

※ 段落が複数ある場合はdivタグで囲み、divタグにclass「color-box2」を設定します。

レイアウト

２列

      <div class="colums">
        <div class="colum2">
          <img src="/wp/wp-content/themes/rengeji/images/dummy.png" alt="">
          <p>このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。</p>
        </div>
        <div class="colum2">
          <img src="/wp/wp-content/themes/rengeji/images/dummy.png" alt="">
          <p>このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。</p>
        </div>
      </div>

※ imgタグの画像URLやpタグの文章を変更して使用します。

３列

このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。

      <div class="colums">
        <div class="colum3">
          <img src="/wp/wp-content/themes/rengeji/images/dummy.png" alt="">
          <p>このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。</p>
        </div>
        <div class="colum3">
          <img src="/wp/wp-content/themes/rengeji/images/dummy.png" alt="">
          <p>このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。</p>
        </div>
        <div class="colum3">
          <img src="/wp/wp-content/themes/rengeji/images/dummy.png" alt="">
          <p>このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。</p>
        </div>
      </div>

※ imgタグの画像URLやpタグの文章を変更して使用します。

テキスト中央寄せ

このテキストはダミーです。

      <p class="txt-center">このテキストはダミーです。</p>

※ pタグのclassに「txt-center」を設定します。

テキスト右寄せ

このテキストはダミーです。

      <p class="txt-right">このテキストはダミーです。</p>

※ pタグのclassに「txt-right」を設定します。

左に回り込み

左に回り込まれる

      <img class="alignleft" src="/wp/wp-content/themes/rengeji/images/dummy.png" alt="">
      <p>左に回り込まれる</p>

※ 回り込ませるタグを先に記述し、classに「alignleft」を設定します。

右に回り込み

右に回り込まれる

      <img class="alignright" src="/wp/wp-content/themes/rengeji/images/dummy.png" alt="">
      <p>右に回り込まれる</p>

※ 回り込ませるタグを先に記述し、classに「alignright」を設定します。

回り込み解除

左に回り込まれる

回り込ませない

      <img class="alignleft" src="/wp/wp-content/themes/rengeji/images/dummy.png" alt="">
      <p>左に回り込まれる</p>
      <p class="clear">回り込ませない</p>

※ 回り込ませないタグのclassに「clear」を設定します。

文字の装飾

太文字

このテキストはダミーです。

      <p><strong>このテキストはダミーです。</strong></p>

※ 太字にして強調したいテキスト部分をstrongタグで囲みます。

見出し
リスト
リンク
テーブル
フレーム
レイアウト
文字の装飾