01.h2・h3・h4の見出し

h2 見出しのデザイン

h2タグをクラス名【custom-h2 normal】で囲むことで、各表情別の見出しを作成できます。

  • custom-h2 normal:ノーマル-指差し(ネクタイ色:黄色)
  • custom-h2 positive:ポジティブ-頭の上で〇を(ネクタイ色:青色)
  • custom-h2 negative:ネガティブ-胸元で×を(ネクタイ色:赤色)
  • custom-h2 word:ワード-立札を持っている(ネクタイ色:緑色)
  • custom-h2 other:その他-指差し(ネクタイ色:黒色)

株主優待は権利確定日を制するべし

↑ノーマル-指差し

記述サンプル

<h2 class="custom-h2 normal">こちらにh2見出しの文章を入力します。</h2>

株主優待は権利確定日を制するべし

↑ポジティブ-頭の上で〇を

記述サンプル

<h2 class="custom-h2 positive">こちらにh2見出しの文章を入力します。</h2>

株主優待は権利確定日を制するべし

↑ネガティブ-胸元で×を

記述サンプル

<h2 class="custom-h2 negative">こちらにh2見出しの文章を入力します。</h2>

株主優待は権利確定日を制するべし

↑ワード-立札を持っている

記述サンプル

<h2 class="custom-h2 word">こちらにh2見出しの文章を入力します。</h2>

株主優待は権利確定日を制するべし

↑その他-指差し

記述サンプル

<h2 class="custom-h2 other">こちらにh2見出しの文章を入力します。</h2>

株主優待は権利確定日を制するべし

↑キャラクターなし

記述サンプル

<h2 class="custom-h2">こちらにh2見出しの文章を入力します。</h2>

h3 見出しのデザイン

h3タグをクラス名【custom-h3】で囲むことで、h3の見出しを作成できます。

記述サンプル

<h3 class="custom-h3">こちらにh3見出しの文章を入力します。</h3>

h4 見出しのデザイン

h4タグをクラス名【custom-h4】で囲むことで、h4の見出しを作成できます。

記述サンプル

<h4 class="custom-h4">こちらに見出しの文章を入力します。</h4>

h5 見出しのデザイン

h5タグをクラス名【custom-h5】で囲むことで、h5の見出しを作成できます。

記述サンプル

<h5 class="custom-h5">こちらに見出しの文章を入力します。</h5>

h6 見出しのデザイン

h6タグをクラス名【custom-h6】で囲むことで、h6の見出しを作成できます。

記述サンプル

<h6 class="custom-h6">こちらに見出しの文章を入力します。</h6>

02.目次のデザイン

一番上に表示されているものを参照。文言などは、プラグインの設定から変更可能です。

03.見出し付きボックスです。

divタグ【custom-box custom-box-色名】で囲むことで、
各表情別のキャラクター付きの囲み枠が表示されます。

  • custom-box custom-box-red:注意・ネガティブ系
  • custom-box custom-box-blue:ポジティブ系
  • custom-box custom-box-black:ポジティブ系・ネガティブ系以外
  • custom-box custom-box-green:新出単語を使う場合

<div class="custom-box custom-box-red">
<h3 class="custom-h3">注意・ネガティブ系</h3>
<p>こちらにテキストが入ります。こちらにテキストが入ります。</p>
</div>

赤:注意・ネガティブ系

見出しがある場合

注意・ネガティブ系

こちらにテキストが入ります。こちらにテキストが入ります。

見出しがない場合

こちらにテキストが入ります。こちらにテキストが入ります。

囲み枠の中をulリスト形式にする場合

注意・ネガティブ系

  • リストを挿入することも可能です
  • リストを挿入することも可能です
  • リストを挿入することも可能です
  • リストを挿入することも可能です
  • リストを挿入することも可能です

囲み枠の中をolリスト形式にする場合

注意・ネガティブ系

  1. リストを挿入することも可能です
  2. リストを挿入することも可能です
  3. リストを挿入することも可能です
  4. リストを挿入することも可能です
  5. リストを挿入することも可能です

青:ポジティブ系

見出しがある場合

ポジティブ系

こちらにテキストが入ります。こちらにテキストが入ります。

見出しがない場合

こちらにテキストが入ります。こちらにテキストが入ります。

囲み枠の中をulリスト形式にする場合

ポジティブ系

  • リストを挿入することも可能です
  • リストを挿入することも可能です
  • リストを挿入することも可能です
  • リストを挿入することも可能です
  • リストを挿入することも可能です

囲み枠の中をolリスト形式にする場合

ポジティブ系

  1. リストを挿入することも可能です
  2. リストを挿入することも可能です
  3. リストを挿入することも可能です
  4. リストを挿入することも可能です
  5. リストを挿入することも可能です

黒:ポジティブ系・ネガティブ系以外

見出しがある場合

ポジティブ系・ネガティブ系以外

こちらにテキストが入ります。こちらにテキストが入ります。

見出しがない場合

こちらにテキストが入ります。こちらにテキストが入ります。

囲み枠の中をulリスト形式にする場合

ポジティブ系・ネガティブ系以外

  • リストを挿入することも可能です
  • リストを挿入することも可能です
  • リストを挿入することも可能です
  • リストを挿入することも可能です
  • リストを挿入することも可能です

囲み枠の中をolリスト形式にする場合

ポジティブ系・ネガティブ系以外

  1. リストを挿入することも可能です
  2. リストを挿入することも可能です
  3. リストを挿入することも可能です
  4. リストを挿入することも可能です
  5. リストを挿入することも可能です

緑:新出単語を使う場合

見出しがある場合

ポジティブ系・ネガティブ系以外

こちらにテキストが入ります。こちらにテキストが入ります。

見出しがない場合

こちらにテキストが入ります。こちらにテキストが入ります。

囲み枠の中をulリスト形式にする場合

ポジティブ系・ネガティブ系以外

  • リストを挿入することも可能です
  • リストを挿入することも可能です
  • リストを挿入することも可能です
  • リストを挿入することも可能です
  • リストを挿入することも可能です

囲み枠の中をolリスト形式にする場合

ポジティブ系・ネガティブ系以外

  1. リストを挿入することも可能です
  2. リストを挿入することも可能です
  3. リストを挿入することも可能です
  4. リストを挿入することも可能です
  5. リストを挿入することも可能です

05.吹き出しとスピーチバブル

賢威のキャラ登録機能によって生成することが可能です。

ノーマル

こんにちは!ミスターリスクヘッジです!


ポジティブ

こんにちは!ミスターリスクヘッジです!


ネガティブ

こんにちは!ミスターリスクヘッジです!


その他

こんにちは!ミスターリスクヘッジです!


立札

こんにちは!ミスターリスクヘッジです!

06.ulとolリストです。

ulの基本となるレイアウト

順序のないリストを表示する際に使用します。

ベースとなるソースコード

ulタグのクラス名に【custom-ul】を追加します。
初期状態は、青いアイコンが表示されます。

<ul class="custom-ul">
<li>こちらはulリストです。</li>
<li>こちらはulリストです。</li>
<li>こちらはulリストです。</li>
</ul>

  • こちらはulリストです。
  • こちらはulリストです。
  • こちらはulリストです。

olの基本となるレイアウト

順序のあるリストを表示する際に使用します。

ベースとなるソースコード

olタグのクラス名に【custom-ol】を追加します。
初期状態は、青いアイコンが表示されます。

<ol class="custom-ol">
<li>こちらはolリストです。</li>
<li>こちらはolリストです。</li>
<li>こちらはolリストです。</li>
</ol>

  1. こちらはolリストです。
  2. こちらはolリストです。
  3. こちらはolリストです。

アイコンの色を変更する場合

  • list-color-red:ボタンを赤色に
  • list-color-blue:ボタンを青色に
  • list-color-black:ボタンを黒色に
  • list-color-green:ボタンを緑色に

ulタグの色を変更する場合

<ul>のクラス名に【list-color-色名】
又は各 <li> のクラス名に【list-color-色名】を追加するとアイコンカラーの変更が可能です。
※<ul>と<li>の中では、<li>のカラー設定が優先されます。

<ul class="custom-ul list-color-green">
<li>こちらはulリストです。</li>
<li class="list-color-blue">こちらはulリストです。</li>
<li class="list-color-red">こちらはulリストです。</li>
</ul>

  • こちらはulリストです。
  • こちらはulリストです。
  • こちらはulリストです。

olタグの色を変更する場合

<ol>のクラス名に【list-color-色名】
又は各 <li> のクラス名に【list-color-色名】を追加するとアイコンカラーの変更が可能です。
※<ol>と<li>の中では、<li>のカラー設定が優先されます。

<ol class="custom-ol list-color-green">
<li>こちらはolリストです。</li>
<li class="list-color-black">こちらはolリストです。</li>
<li class="list-color-red">こちらはolリストです。</li>
</ol>

  1. こちらはolリストです。
  2. こちらはolリストです。
  3. こちらはolリストです。

07.評価用の画像です。

各画像の種類。

【star-0~10】までの評価順:星0~5個(0.5刻み)での画像を用意

0点 1点 2点 3点 4点 5点
6点 7点 8点 9点 10点

大きさを変更する場合

クラス名【review-star数字名】高さ50pxを基準として、サイズの変更が可能です。

  • review-star10:画像の大きさ (H.10px W.60px)
  • review-star20:画像の大きさ (H.20px W.120px)
  • review-star30:画像の大きさ (H.30px W.180px)
  • review-star40:画像の大きさ (H.40px W.240px)
  • review-star50:画像の大きさ (H.50px W.300px)

<p><img src="https://fukugyo-times.com/wp-content/themes/keni70_child/images/star-6.png" class="review-star10" alt="6点" width="300" height="50" /></p>
<p><img src="https://fukugyo-times.com/wp-content/themes/keni70_child/images/star-7.png" class="review-star20" alt="7点" width="300" height="50" /></p>
<p><img src="https://fukugyo-times.com/wp-content/themes/keni70_child/images/star-8.png" class="review-star30" alt="8点" width="300" height="50" /></p>
<p><img src="https://fukugyo-times.com/wp-content/themes/keni70_child/images/star-9.png" class="review-star40" alt="9点" width="300" height="50" /></p>
<p><img src="https://fukugyo-times.com/wp-content/themes/keni70_child/images/star-10.png" class="review-star50" alt="10点" width="300" height="50" /></p>

※テーマ内のフォルダを参照するショートコードhttps://fukugyo-times.com/wp-content/themes/keni70_childを使用しています。

6点

7点

8点

9点

10点

08.通常の引用です。

blockquoteタグのクラス名に、【custom-blockquote】を追加すると下記の引用が出力されます。

記述サンプル

<blockquote class="custom-blockquote">
こちらに引用文が入ります。こちらに引用文が入ります。こちらに引用文が入ります。こちらに引用文が入ります。
</blockquote>

こちらに引用文が入ります。こちらに引用文が入ります。こちらに引用文が入ります。こちらに引用文が入ります。こちらに引用文が入ります。こちらに引用文が入ります。こちらに引用文が入ります。

08-2.評価付きの引用です。

下記の手順で作成します。
①全体の外枠となる要素を作成します。
divタグのクラス名に【quote-eva】を追加します。
②見出しを作成します。
pタグのクラス名に【quote-ttl】を追加します。
③口コミ投稿者の情報を入力する枠を作成します。
divタグのクラス名に【quote-info】を追加します。
④口コミ投稿者の画像を作成します。
divタグのクラス名に【quote-pic】を追加してからimgタグで画像を出力します。
⑤口コミ投稿者の情報を入れる要素(投稿者名、評価、色タグ)を作成します。
5-1(投稿者名).divタグのクラス名に【quote-review-name】を追加します。
5-2(評価、タグ).divタグのクラス名に【quote-review-rating】を追加します。
5-3.色タグは「<div class="quote-review-rating">」に入力します。色タグにしたいテキストを、【review-icon-色名】のspanタグで囲むと各色の背景が表示されます。
⑥引用文を作成します。
blockquoteタグのクラス名に、【custom-blockquote】を追加します。

記述サンプル

<div class="quote-eva">
<p class="quote-ttl">公務員の私に最適なマンション経営</p>
<div class="quote-info">
<div class="quote-pic">
<img src="https://fukugyo-times.com/wp-content/themes/keni70_child/images/quote-sample-icon.png" alt="sample" />
</div>
<div class="quote-review">
<div class="quote-review-name">いろはにほへとさん <i class="fa fa-briefcase"></i>32歳/公務員</div>
<div class="quote-review-rating"><img class="review-star10" src="https://fukugyo-times.com/wp-content/themes/keni70_child/images/star-6.png" alt="1点" width="300" height="50" /> (3.0) <span class="review-icon-red">テストA</span> <span class="review-icon-blue">テストB</span> <span class="review-icon-green">テストC</span></div>
</div>
</div>
<blockquote class="custom-blockquote">こちらに引用文が入ります。こちらに引用文が入ります。こちらに引用文が入ります。こちらに引用文が入ります。こちらに引用文が入ります。こちらに引用文が入ります。こちらに引用文が入ります。</blockquote>
</div>

公務員の私に最適なマンション経営

sample
いろはにほへとさん 32歳/公務員
1点 (3.0) テストA テストB テストC

こちらに引用文が入ります。こちらに引用文が入ります。こちらに引用文が入ります。こちらに引用文が入ります。こちらに引用文が入ります。こちらに引用文が入ります。こちらに引用文が入ります。

公務員の私に最適なマンション経営

sample
いろはにほへとさん 32歳/公務員
1点 (3.0) テストA テストB テストC

こちらに引用文が入ります。こちらに引用文が入ります。こちらに引用文が入ります。こちらに引用文が入ります。こちらに引用文が入ります。こちらに引用文が入ります。こちらに引用文が入ります。

09.Q&Aです。

dlタグのクラス名に、【qa】を追加すると下記のQ&Aが出力されます。

記述サンプル

<dl class="qa">
<dt>こちらに質問文が入ります。</dt>
<dd>こちらに回答文が入ります。</dd>
<dt>こちらに質問文が入ります。</dt>
<dd>こちらに回答文が入ります。</dd>
<dt>こちらに質問文が入ります。</dt>
<dd>こちらに回答文が入ります。</dd>
</dl>

こちらに質問文が入ります。
こちらに回答文が入ります。
こちらに質問文が入ります。
こちらに回答文が入ります。
こちらに質問文が入ります。
こちらに回答文が入ります。

10.アコーディオンです。

dlタグのクラス名に、【accordion】を追加すると、アコーディオンが表示されます。
※dtタグをクリックすると、次の要素であるddタグが展開されます。

記述サンプル

<dl class="accordion">
<dt>こちらをクリックすると展開します。</dt>
<dd>こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。</dd>
</dl>

こちらをクリックすると展開します。
こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。
こちらをクリックすると展開します。
こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。

11.テーブルです。

tableタグのクラス名に、【custom-table】を追加
tableタグ内のtheadタグ内のth要素が色付き(紺色)・センター寄せに
tableタグ内のtbodyタグ内のth要素が色付き(灰色)・センター寄せに
tableタグ内のtbodyタグ内のtd要素・左寄せ

記述サンプル

<table class="custom-table">
<thead>
<tr>
<th>見出し1</th>
<th>見出し1</th>
<th>見出し1</th>
</tr>
</thead>
<tbody>
<tr>
<th>見出し2</th>
<td>こちらにテキストが入ります。</td>
<td>こちらにテキストが入ります。</td>
</tr>
<tr>
<th>見出し2</th>
<td>こちらにテキストが入ります。</td>
<td>
<ul class="custom-ul">
<li>リストが入れられます。</li>
<li>リストが入れられます。</li>
<li>リストが入れられます。</li>
</ul>
</td>
</tr>
</tbody>
</table>

見出し1 見出し1 見出し1
見出し2 こちらにテキストが入ります。 こちらにテキストが入ります。
見出し2 こちらにテキストが入ります。
  • リストが入れられます。
  • リストが入れられます。
  • リストが入れられます。

12.花丸、二重丸、丸、三角、バツ

画像の種類

画像名パターン:【icon-hanamaru-red.png】
下記該当の図形に変更可能

  • hanamaru:花丸
  • doublecircle:二重丸
  • circle:丸
  • triangle:三角
  • cross:バツ

<img src="https://fukugyo-times.com/wp-content/themes/keni70_child/images/icon-hanamaru-red.png" alt="花丸" />
<img src="https://fukugyo-times.com/wp-content/themes/keni70_child/images/icon-doublecircle-blue.png" alt="二重丸" />
<img src="https://fukugyo-times.com/wp-content/themes/keni70_child/images/icon-circle-black.png" alt="丸" />
<img src="https://fukugyo-times.com/wp-content/themes/keni70_child/images/icon-triangle-green.png" alt="三角" />
<img src="https://fukugyo-times.com/wp-content/themes/keni70_child/images/icon-cross-red.png" alt="バツ" />

※テーマ内のフォルダを参照するショートコードhttps://fukugyo-times.com/wp-content/themes/keni70_childを使用しています。

花丸 二重丸 三角 バツ
花丸 二重丸 丸 三角 バツ

色の種類

画像名パターン:【icon-hanamaru-red.png】
下記該当の図形に変更可能

  • red:赤
  • blue:青
  • black:黒
  • green:緑

<img src="https://fukugyo-times.com/wp-content/themes/keni70_child/images/icon-hanamaru-red.png" alt="花丸" />
<img src="https://fukugyo-times.com/wp-content/themes/keni70_child/images/icon-hanamaru-blue.png" alt="二重丸" />
<img src="https://fukugyo-times.com/wp-content/themes/keni70_child/images/icon-hanamaru-black.png" alt="丸" />
<img src="https://fukugyo-times.com/wp-content/themes/keni70_child/images/icon-hanamaru-green.png" alt="三角" />

※テーマ内のフォルダを参照するショートコードhttps://fukugyo-times.com/wp-content/themes/keni70_childを使用しています。

花丸 二重丸 丸 三角

大きさを変更する場合

imgタグにクラス名【symbol-数字名】を追加することで、
高さ10px~高さ100pxまで、サイズの変更が可能です。

何も指定しない場合、コンテンツ領域幅に合わせて可変可能なアイコンの大きさ(300px)の大きさで表示されます。

  • symbol-10:画像の大きさ (H.10px W.10px)
  • symbol-20:画像の大きさ (H.20px W.20px)
  • symbol-30:画像の大きさ (H.30px W.30px)
  • symbol-40:画像の大きさ (H.40px W.40px)
  • symbol-50:画像の大きさ (H.50px W.50px)
  • symbol-60:画像の大きさ (H.60px W.60px)
  • symbol-70:画像の大きさ (H.70px W.70px)
  • symbol-80:画像の大きさ (H.80px W.80px)
  • symbol-90:画像の大きさ (H.90px W.90px)
  • symbol-100:画像の大きさ (H.100px W.100px)
図形 大きさの比較
花丸 花丸
花丸
花丸
花丸
花丸
花丸
花丸
花丸
花丸
花丸
二重丸 二重丸
二重丸
二重丸
二重丸
二重丸
二重丸
二重丸
二重丸
二重丸
二重丸
丸
丸
丸
丸
丸
丸
丸
丸
丸
丸
三角 三角
三角
三角
三角
三角
三角
三角
三角
三角
三角
バツ バツ
バツ
バツ
バツ
バツ
バツ
バツ
バツ
バツ
バツ

13.ボタンレイアウト

基本となるレイアウト

ベースとなるソースコード

<div class="custom-btn">
<a href="#">ボタンです。</a>
</div>

2行となるソースコード

ボタンタグのテキスト内で改行をすることで2行のボタンに変更可能です。

大きさを変更する場合

aタグのクラス名に、【w10~w100】までのクラス名を入れることで、大きさを調整可能です。

  • w10:大きさ 10%
  • w20:大きさ 20%
  • w30:大きさ 30%
  • w40:大きさ 40%
  • w50:大きさ 50%
  • w60:大きさ 60%
  • w70:大きさ 70%
  • w80:大きさ 80%
  • w90:大きさ 90%
  • w100:大きさ 100%

<div class="custom-btn">
<a href="#" class="w50">こちらはボタンです。</a>
</div>

ボタンの色を変更する場合

divタグのクラス名に、【custom-btn-色名】を追加します。

  • custom-btn-red:ボタンを赤色に
  • custom-btn-blue:ボタンを青色に
  • custom-btn-black:ボタンを黒色に
  • custom-btn-green:ボタンを緑色に

<div class="custom-btn custom-btn-red">
<a href="#">こちらはボタンです。</a>
</div>

ボタンを並べる場合

【custom-btn】タグの外側を、divタグ【btn-layout】で囲みます。
囲んだボタンの数で分割されます。
※スマホの場合は一段でのレイアウトとなります。

<div class="btn-layout">
<div class="custom-btn custom-btn-red"><a href="#">ボタンです。</a></div>
<div class="custom-btn custom-btn-blue"><a href="#">ボタンです。</a></div>
</div>

上記と同じように、ボタンaタグのクラス名に、【w10~w100】までのクラス名を入れることで、大きさを調整可能です。

16.ランキングです。

  1. アコム

    こちらはテストです。こちらはテストです。こちらはテストです。こちらはテストです。こちらはテストです。

  2. プロミス

  3. SMBCモビット

  4. アイフル

  5. オリックス銀行

  6. 三井住友銀行

  7. ランキング7位

  8. ランキング8位

  9. ランキング9位

  10. ランキング10位

ランキングの組み合わせ例です。

パーツの組み合わせ例

  1. アコム

    ランキングのサンプル画像

    スマホ申し込み こちらにテキストが入ります。
    PC申し込み こちらにテキストが入ります。

    注意・ネガティブ系

    こちらにテキストが入ります。こちらにテキストが入ります。

    ノーマル

    こんにちは!ミスターリスクヘッジです!


    ポジティブ

    こんにちは!ミスターリスクヘッジです!

追加ボタンのパターン

下記のボタンの大きさと色はクラス名の出力で変更も可能です。

色を変更する場合

クラス名【mini-btn】に【mini-btn-色名】を追加することで色の変更が可能です。
※色の指定がない場合は、グレーのボタンが出力されます。

  • red:赤
  • blue:青
  • green:緑
  • black:黒

大きさを変更する場合

aタグのクラス名に、【w10~w100】までのクラス名を入れることで、大きさを調整可能です。
※指定がない場合は、100%で表示されます。

  • w10:大きさ 10%
  • w20:大きさ 20%
  • w30:大きさ 30%
  • w40:大きさ 40%
  • w50:大きさ 50%
  • w60:大きさ 60%
  • w70:大きさ 70%
  • w80:大きさ 80%
  • w90:大きさ 90%
  • w100:大きさ 100%

17.文章や見出しに蛍光ペンがひけます。

蛍光ペンを引きたいテキストを、【marker-line-色名】のspanタグで囲むと各色の蛍光ペンの効果が表示されます。

  • marker-line-yellow蛍光ペン黄色
  • marker-line-blue蛍光ペン青色
  • marker-line-pink蛍光ペンピンク色

記述サンプル

<span class="marker-line-yellow">蛍光ペン黄色</span>
<span class="marker-line-blue">蛍光ペン青色</span>
<span class="marker-line-pink">蛍光ペンピンク色</span>

見出しなどで適用した場合

見出しなのテキストの一部に効果を適用することで、より視認性を上げることが出来ます。

見出しなどで蛍光色の効果を適用した場合

見出しなどで蛍光色の効果を適用した場合

見出しなどで蛍光色の効果を適用した場合

エディターから設定する場合

エディターにある「スタイル▼」からボタンから選択できます。
手順1.蛍光ペンをひきたい文章または見出しを選択(ドラッグ)します。
手順2.「スタイル▼」ボタンより蛍光ペンの色を選択して完了です。

18.関連記事を出力

ショートコード [relation id=投稿のID] 又は [relation slug=投稿のスラッグ]で任意の記事のタイトル・本文・アイキャッチ画像のセットを出力することができます。

記述サンプル

[relation id=246]
又は
[relation slug=スラッグ名]

関連記事をチェック!
iTunesカードはApple Musicへの課金やiTunes Storeでの音楽購入に使えるネットプリカで[…]

一つだけで使用する場合のサンプル

出力する記事が一つだけの場合は、ショートコード一つで完結することができます。

複数使用する場合のサンプル

出力する複数の場合は、ショートコードとHTMLコードを組み合わせて使用します。
※改行せずに記述してください。
※Wordpressの自動改行が出力されてしまい、間隔が空いてしまうことを防ぐため、タグ【custom-relation】にクラス名【nonbr】を追加します。

記述サンプル

<div class="custom-relation nonbr">
<div class="relation-check">関連記事をチェック!</div>
[relation_nontitle id=246][relation_nontitle id=174]
</div>

関連記事をチェック!

ポイントサイトの高額案件といえばクレジットカードの発行ですよね! 中でもショッピングに便利な「P-one Wi[…]
今巷には50種類以上のポイントサイトが存在すると言われています。 同じ案件でもポイント還元率が異なるので、どこ[…]