スタイル見本

見出しの表示サンプル

 

見出し1:ブログ記事タイトルの表示

<コード>

<h1>見出し1:ブログ記事タイトルの表示</h1>

 

見出し2:記事内見出し1の表示

<コード>

<h2>見出し2:記事内見出し1の表示</h2>

 

見出し3:記事内見出し2の表示

<コード>

<h3>見出し3:記事内見出し2の表示</h3>

 

見出し4:記事内見出し3の表示

<コード>

<h4>見出し4:記事内見出し3の表示</h4>

 

見出し5:記事内見出し4の表示

<コード>

<h5>見出し5:記事内見出し4の表示</h5>

 

見出し6:記事内見出し5の表示

<コード>

<h6>見出し6:記事内見出し5の表示</h6>

 

 

リストの表示サンプル

何も設定しない場合→リストマークなし

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

<コード>

<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>

 

 

setmark_arrowクラス指定→矢印

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

<コード>

<ul>
<li class="setmark_arrow">リスト1</li>
<li class="setmark_arrow">リスト2</li>
<li class="setmark_arrow">リスト3</li>
<li class="setmark_arrow">リスト4</li>
<li class="setmark_arrow">リスト5</li>
</ul>

 

setmark_starクラス指定→星

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

<コード>

<ul>
<li class="setmark_star">リスト1</li>
<li class="setmark_star">リスト2</li>
<li class="setmark_star">リスト3</li>
<li class="setmark_star">リスト4</li>
<li class="setmark_star">リスト5</li>
</ul>

 

setmark_pawクラス指定→肉球

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

<コード>

<ul>
<li class="setmark_paw">リスト1</li>
<li class="setmark_paw">リスト2</li>
<li class="setmark_paw">リスト3</li>
<li class="setmark_paw">リスト4</li>
<li class="setmark_paw">リスト5</li>
</ul>

 

setmark_heartクラス指定→ハート

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

<コード>

<ul>
<li class="setmark_heart">リスト1</li>
<li class="setmark_heart">リスト2</li>
<li class="setmark_heart">リスト3</li>
<li class="setmark_heart">リスト4</li>
<li class="setmark_heart">リスト5</li>
</ul>

 

setmark_checkクラス指定→ハート

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

<コード>

<ul>
<li class="setmark_check">リスト1</li>
<li class="setmark_check">リスト2</li>
<li class="setmark_check">リスト3</li>
<li class="setmark_check">リスト4</li>
<li class="setmark_check">リスト5</li>
</ul>

 

リンク付きナンバーリスト表示

  1. リスト1
  2. リスト2
  3. リスト3
  4. リスト4
  5. リスト5

<コード>

<ol>
<li class="numberlist"><a href="#">リスト1</a></li>
<li class="numberlist"><a href="#">リスト2</a></li>
<li class="numberlist"><a href="#">リスト3</a></li>
<li class="numberlist"><a href="#">リスト4</a></li>
<li class="numberlist"><a href="#">リスト5</a></li>
</ol>

 

 

引用の表示サンプル

引用した文章をタグで囲むとこのように表示されます。
背景色はサブカラーに設定されています。

<コード>

<blockquote>
引用した文章をblockquoteタグで囲むとこのように表示されます。
背景色はサブカラーに設定されています。
</blockquote>

 

 

その他の表示サンプル

吹き出し

吹き出しの表示サンプル 404ページで使っています

<コード>

<div class="fukidashi">吹き出しの表示サンプル 404ページで使っています</div>

 

 

テーブルの表示サンプル

基本表示

順位 チーム名 ブロック 勝点
1 あおばFC Aブロック 20
2 ふたばFC Bブロック 15
3 わかばFC Cブロック 10
4 みどりFC Dブロック 5
5 なぎさFC Eブロック 0

<コード>

<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>順位</th>
<th>チーム名</th>
<th>ブロック</th>
<th>勝点</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>あおばFC</td>
<td>Aブロック</td>
<td>20</td>
</tr>
<tr>
<th>2</th>
<td>ふたばFC</td>
<td>Bブロック</td>
<td>15</td>
</tr>
<tr>
<th>3</th>
<td>わかばFC</td>
<td>Cブロック</td>
<td>10</td>
</tr>
<tr>
<th>4</th>
<td>みどりFC</td>
<td>Dブロック</td>
<td>5</td>
</tr>
<tr>
<th>5</th>
<td>なぎさFC</td>
<td>Eブロック</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>

 

ストライプ表示

順位 チーム名 ブロック 勝点
1 あおばFC Aブロック 20
2 ふたばFC Bブロック 15
3 わかばFC Cブロック 10
4 みどりFC Dブロック 5
5 なぎさFC Eブロック 0

<コード>

<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>順位</th>
<th>チーム名</th>
<th>ブロック</th>
<th>勝点</th>
</tr>
</thead>
<tbody>
<tr>
<th>2</th>
<td>あおばFC</td>
<td>Aブロック</td>
<td>20</td>
</tr>
<tr>
<th>3</th>
<td>ふたばFC</td>
<td>Bブロック</td>
<td>15</td>
</tr>
<tr>
<th>4</th>
<td>わかばFC</td>
<td>Cブロック</td>
<td>10</td>
</tr>
<tr>
<th>1</th>
<td>みどりFC</td>
<td>Dブロック</td>
<td>5</td>
</tr>
<tr>
<th>5</th>
<td>なぎさFC</td>
<td>Eブロック</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>

 

 

ボタンの表示サンプル

<コード>

<button type="button" class="btn btn-default btn-lg">ボタン</button>

<コード>

<button type="button" class="btn btn-default btn-lg">ボタン中</button>

<コード>

<button type="button" class="btn btn-default btn-xs">ボタン小</button>