エレメントリスト
見出し
基本
見出し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="link">
<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」を設定します。リンクのみのリストを作成する場合に利用します。
リンク
PDFファイル
<p><a href="test.pdf">PDFファイル</a></p>
※ aタグのリンク先ファイルの拡張子が.pdfの場合、自動的に表示されます
Wordファイル
<p><a href="test.pdf" 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/uploads/favicon.png"></a></p>
※ 画像リンクなどリンクアイコンを非表示にしたい場合、aタグのclassに「imagelink」を設定します
リンクボタン
<p><a class="linkbtn" href="">リンクテキストをボタン風にします</a></p>
※ 画像リンクなどリンクアイコンを非表示にしたい場合、aタグのclassに「linkbtn」を設定します
ページ内リンク
<ul class="page-link">
<li><a href="#gaiyo">会社概要</a></li>
<li><a href="#jimusho">事業所</a></li>
</ul>
※ 縦並びのページ内リンクになります。
会社概要
テーブル
テーブル
| 曜日 | 月 | 火 | 水 | 木 | 金 |
|---|---|---|---|---|---|
| 時間 | 9:00〜18:00 | 9:00〜18:00 | 9:00〜18:00 | 9:00〜18:00 | 9:00〜18:00 |
<table>
<thead>
<tr>
<th>曜日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
</tr>
</thead>
<tbody>
<tr>
<th>時間</th>
<td>9:00〜18:00</td>
<td>9:00〜18:00</td>
<td>9:00〜18:00</td>
<td>9:00〜18:00</td>
<td>9:00〜18:00</td>
</tr>
</tbody>
</table>
フレーム
このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。
<p class="border-box">
このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。
</p>
※ 段落が複数ある場合はdivタグで囲み、divタグにclass「border-box」を設定します。
背景あり
ホワイト背景
このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。
<p class="bg-white">このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。</p>
※ 段落が複数ある場合はdivタグで囲み、divタグのclassに「bg-white」を設定します
レイアウト
２列
<div class="pure-g column">
<div class="pure-u-1 pure-u-md-1-2">
<img src="/wp/wp-content/uploads/dummy.png" alt="">
</div>
<div class="pure-u-1 pure-u-md-1-2">
<img src="/wp/wp-content/uploads/dummy.png" alt="">
</div>
</div>
※ imgタグの箇所をテキストや別の画像に変更して使用します
３列
<div class="pure-g column">
<div class="pure-u-1 pure-u-md-1-3">
<img src="/wp/wp-content/uploads/dummy.png" alt="">
</div>
<div class="pure-u-1 pure-u-md-1-3">
<img src="/wp/wp-content/uploads/dummy.png" alt="">
</div>
<div class="pure-u-1 pure-u-md-1-3">
<img src="/wp/wp-content/uploads/dummy.png" alt="">
</div>
</div>
※ imgタグの箇所をテキストや別の画像に変更して使用します
テキスト中央寄せ
このテキストはダミーです。
<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/uploads/dummy.png" alt="">
<p>左に回り込まれる</p>
※ 回り込ませるタグを先に記述し、classに「alignleft」を設定します
右に回り込み
右に回り込まれる
<img class="alignright" src="/wp/wp-content/uploads/dummy.png" alt="">
<p>右に回り込まれる</p>
※ 回り込ませるタグを先に記述し、classに「alignright」を設定します
回り込み解除
左に回り込まれる
回り込ませない
<img class="alignleft" src="/wp/wp-content/uploads/dummy.png" alt="">
<p>左に回り込まれる</p>
<p class="clear">回り込ませない</p>
※ 回り込ませないタグのclassに「clear」を設定します
文字の装飾
太文字
このテキストはダミーです。
<p><strong>このテキストはダミーです。</strong></p>
※ 太字にして強調したいテキスト部分をstrongタグで囲みます
赤文字
このテキストはダミーです。
<p class="color-red">このテキストはダミーです。</p>
※ 赤字にして強調したいタグやテキスト部分のclassに「color-red」を設定します
