見出し
基本
見出し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タグで囲みます
リード文
<p class="lead">リード文</p>
※ pタグのclassに「lead」を設定します
テキスト
サイトカラー
このテキストはダミーです
このテキストはダミーです
<p class="site-color">リード文</p> <p>このテキストは<span class="site-color">ダミー</span>です</p>
※ pタグやspanタグのclassに「site-color」を設定します
赤色
このテキストはダミーです
このテキストはダミーです
<p class="red">リード文</p> <p>このテキストは<span class="red">ダミー</span>です</p>
※ pタグやspanタグのclassに「red」を設定します
リストアイコン
まる(リスト)
- このテキストはダミーです
- このテキストはダミーです
- このテキストはダミーです
<ul> <li>このテキストはダミーです</li> <li>このテキストはダミーです</li> <li>このテキストはダミーです</li> </ul>
※ liタグをulタグで囲みます
まる(単体)
このテキストはダミーです
<p class="circle">このテキストはダミーです</p>
※ pタグのclassに「circle」を設定します
数字(リスト)
- このテキストはダミーです
- このテキストはダミーです
- このテキストはダミーです
<ol> <li>このテキストはダミーです</li> <li>このテキストはダミーです</li> <li>このテキストはダミーです</li> </ol>
※ liタグをolタグで囲みます
矢印(リスト)
- このテキストはダミーです
- このテキストはダミーです
- このテキストはダミーです
<ul class="arrow"> <li>このテキストはダミーです</li> <li>このテキストはダミーです</li> <li>このテキストはダミーです</li> </ul>
※ ulタグのclassに「arrow」を設定します
矢印(単体)
このテキストはダミーです
<p class="arrow">このテキストはダミーです</p>
※ pタグのclassに「arrow」を設定します
米印(リスト)
- このテキストはダミーです
- このテキストはダミーです
- このテキストはダミーです
<ul class="kome"> <li>このテキストはダミーです</li> <li>このテキストはダミーです</li> <li>このテキストはダミーです</li> </ul>
※ liタグを囲むulのclassに「kome」を設定します
米印(単体)
このテキストはダミーです
<p class="kome">このテキストはダミーです</p>
※ pタグのclassに「kome」を設定します
米印(赤色)
このテキストはダミーです
<p class="kome red">このテキストはダミーです</p>
※ pタグのclassに「kome red」を設定します
※ リストの場合は、ulタグのclassに「red」を追加します
※ リスト全体を赤色にする場合はulタグに、リストの一部を赤色にする場合はliタグにclass「red」を追加します
リストアイコンなし
- このテキストはダミーです
- このテキストはダミーです
- このテキストはダミーです
- このテキストはダミーです
<ul class="noicon"> <li>このテキストはダミーです</li> <li>このテキストはダミーです</li> <li>このテキストはダミーです</li> <li>このテキストはダミーです</li> </ul>
※ ulタグのclassに「noicon」を設定します
3列(リスト)
- このテキストはダミーです
- このテキストはダミーです
- このテキストはダミーです
- このテキストはダミーです
- このテキストはダミーです
- このテキストはダミーです
- このテキストはダミーです
- このテキストはダミーです
<ul class="column3"> <li>このテキストはダミーです</li> <li>このテキストはダミーです</li> <li>このテキストはダミーです</li> <li>このテキストはダミーです</li> <li>このテキストはダミーです</li> <li>このテキストはダミーです</li> <li>このテキストはダミーです</li> <li>このテキストはダミーです</li> </ul>
※ ulタグのclassに「column3」を設定します
アンカー
<ul class="anchor"> <li><a href="#anch01">見出し1</a></li> <li><a href="#anch02">見出し2</a></li> <li><a href="#anch03">見出し3</a></li> <li><a href="#anch04">見出し4</a></li> </ul>
※ liタグを囲むulタグのclassに「anchor」を設定します
※ リンク先のタグにidを設定してください
四角ボタン(単体)
<p><a class="btn" href="#">このテキストはダミーです</a></p>
※ aタグのclassに「btn」を設定します
四角ボタン(単体・横幅いっぱい)
<p><a class="btn-full" href="#">このテキストはダミーです</a></p>
※ aタグのclassに「btn-full」を設定します
リンクアイコン
外部サイト
<p><a href="#" target="_blank">外部サイト</a></p>
※ aタグに別タブ(target="_blank")が指定されている場合、自動的に表示されます
PDFファイル
<p><a href="test.pdf" target="_blank">PDFファイル</a></p>
※ aタグのリンク先ファイルの拡張子が.pdfの場合、自動的に表示されます
Wordファイル
Wordファイル(.doc)
Wordファイル(.docx)
<p><a href="test.doc">Wordファイル(.doc)</a><br> <a href="test.docx">Wordファイル(.docx)</a></p>
※ aタグのリンク先ファイルの拡張子が.docまたは.docxの場合、自動的に表示されます
Excelファイル
Excelファイル(.xls)
Excelファイル(.xlsx)
<p><a href="test.xls">Excelファイル(.xls)</a><br> <a href="test.xlsx">Excelファイル(.xlsx)</a></p>
※ aタグのリンク先ファイルの拡張子が.xlsまたは.xlsxの場合、自動的に表示されます
リンクアイコン非表示
<p><a class="imagelink" href="#" target="_blank"><img src="https://zenkoku-sjll.org/wp/wp-content/themes/laboratories-theme/images/img_medium.png"></a></p>
※ 画像リンクなどリンクアイコンを非表示にしたい場合、aタグのclassに「imagelink」を設定します
テーブル
テーブル
見出し1 | 見出し2 | 見出し3 |
---|---|---|
このテキストはダミーです | このテキストはダミーです | このテキストはダミーです |
このテキストはダミーです | このテキストはダミーです | このテキストはダミーです |
このテキストはダミーです | このテキストはダミーです | このテキストはダミーです |
<table> <thead> <tr> <th>見出し1</th> <th>見出し2</th> <th>見出し3</th> </tr> </thead> <tbody> <tr> <th>このテキストはダミーです</th> <td>このテキストはダミーです</td> <td>このテキストはダミーです</td> </tr> <tr> <th>このテキストはダミーです</th> <td>このテキストはダミーです</td> <td>このテキストはダミーです</td> </tr> <tr> <th>このテキストはダミーです</th> <td>このテキストはダミーです</td> <td>このテキストはダミーです</td> </tr> </tbody> </table>
フレーム
メモ用
このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。
<div class="notes"> <p>このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。</p> </div>
※ divタグのclassに「notes」を設定します
囲み枠(サイトカラー)
このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。
<div class="explanation"> <p>このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。</p> </div>
※ divタグのclassに「explanation」を設定します
囲み枠(赤)
このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。
<div class="explanation red"> <p>このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。</p> </div>
※ divタグのclassに「explanation red」を設定します
囲み枠(グレー)
このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。
<div class="explanation gray"> <p>このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。</p> </div>
※ divタグのclassに「explanation gray」を設定します
画像
囲み線
<img class="img-border" src="https://zenkoku-sjll.org/wp/wp-content/themes/laboratories-theme/images/img_medium_white.png" alt="" />
※ imgタグのclassに「img-border」を設定します
レイアウト
上の余白を削除
このテキストはダミーです
このテキストはダミーです
<h2 class="mt-0">このテキストはダミーです</h2> <p>このテキストはダミーです</p>
※ 上の余白を消したいタグのclassに「mt-0」を設定します
下の余白を削除
このテキストはダミーです
このテキストはダミーです
<h2 class="mb-0">このテキストはダミーです</h2> <p>このテキストはダミーです</p>
※ 上の余白を消したいタグのclassに「mb-0」を設定します
2列
このテキストはダミーです
このテキストはダミーです
<div class="pure-g"> <div class="pure-u-1 pure-u-md-1-2"> <h3>このテキストはダミーです</h3> <img src="https://zenkoku-sjll.org/wp/wp-content/themes/laboratories-theme/images/img_medium.png" alt="" /> </div> <div class="pure-u-1 pure-u-md-1-2"> <h3>このテキストはダミーです</h3> <img src="https://zenkoku-sjll.org/wp/wp-content/themes/laboratories-theme/images/img_medium.png" alt="" /> </div> </div>
※ 画像やテキストを変更して使用します
3列
このテキストはダミーです
このテキストはダミーです
このテキストはダミーです
<div class="pure-g"> <div class="pure-u-1 pure-u-md-1-3"> <h3>このテキストはダミーです</h3> <img src="https://zenkoku-sjll.org/wp/wp-content/themes/laboratories-theme/images/img_medium.png" alt="" /> </div> <div class="pure-u-1 pure-u-md-1-3"> <h3>このテキストはダミーです</h3> <img src="https://zenkoku-sjll.org/wp/wp-content/themes/laboratories-theme/images/img_medium.png" alt="" /> </div> <div class="pure-u-1 pure-u-md-1-3"> <h3>このテキストはダミーです</h3> <img src="https://zenkoku-sjll.org/wp/wp-content/themes/laboratories-theme/images/img_medium.png" alt="" /> </div> </div>
※ 画像やテキストを変更して使用します