【ブロック対応完了】LP用特集枠

ボタンを表示しないLP（1カラム）用の特集枠です。通常の「特集枠」ショートコードを流用しているため「特集枠」と読んでいますが、扱う商品の「特徴」説明や「お客様の声」「スタッフ紹介」などに使うことを想定しています。

タイトル、説明テキストの文字サイズを一回り小さくしてテキスト量は多めに、区切りの縦線のみのスッキリした印象になります。LP以外の通常記事にも使えます。

デフォルト（縦線のみ）

特集枠ショートコードに「border=”tate”」属性を追加

• 特徴1
  

  説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト

• 特徴2
  

  説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト

• 特徴3
  

  説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト

[[tokushuu]
[f_box title="特徴1" title_align="" border="tate" type=""]
<img src="https://hannya-builder.com/guide/wp-content/uploads/2019/01/lion-1.jpg" alt="" width="400" height="400" class="aligncenter size-full wp-image-3647 kage" />
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト[/f_box]
[f_box title="特徴2" title_align="" border="tate" type=""]
<a href="https://hannya-builder.com/guide/wp-content/uploads/2019/01/kirin-1.jpg"><img src="https://hannya-builder.com/guide/wp-content/uploads/2019/01/kirin-1.jpg" alt="" width="400" height="400" class="aligncenter size-full wp-image-3651 kage" /></a>
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト[/f_box]
[f_box title="特徴3" title_align="" border="tate" type=""]
<a href="https://hannya-builder.com/guide/wp-content/uploads/2019/01/zou-1.jpg"><img src="https://hannya-builder.com/guide/wp-content/uploads/2019/01/zou-1.jpg" alt="" width="400" height="400" class="aligncenter size-full wp-image-3652 kage" /></a>
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト
[/f_box]
[/tokushuu]]

画像丸抜き

「 type=”maru”」属性を追加することで、枠に対して50％の幅の円で切り抜いた画像が表示できます。「お客様の声」「スタッフ紹介」パーツとしても使えます。

• 特徴1

  説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト

• 特徴2

  説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト

• 特徴3

  説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト

[[tokushuu]
[f_box title="特徴1" title_align="" border="tate" type="maru"]
<img src="https://hannya-builder.com/guide/wp-content/uploads/2019/01/lion-1.jpg" alt="" width="400" height="400" class="aligncenter size-full wp-image-3647 kage" />
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト[/f_box]
[f_box title="特徴2" title_align="" border="tate" type="maru"]
<a href="https://hannya-builder.com/guide/wp-content/uploads/2019/01/kirin-1.jpg"><img src="https://hannya-builder.com/guide/wp-content/uploads/2019/01/kirin-1.jpg" alt="" width="400" height="400" class="aligncenter size-full wp-image-3651 kage" /></a>
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト[/f_box]
[f_box title="特徴3" title_align="" border="tate" type="maru"]
<a href="https://hannya-builder.com/guide/wp-content/uploads/2019/01/zou-1.jpg"><img src="https://hannya-builder.com/guide/wp-content/uploads/2019/01/zou-1.jpg" alt="" width="400" height="400" class="aligncenter size-full wp-image-3652 kage" /></a>
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト
[/f_box]
[/tokushuu]]

画像丸抜き（大）

「 type=”maru-l”」属性を追加すると、大きめの丸抜きになります。

• 特徴1

  説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト

• 特徴2

  説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト

• 特徴3

  説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト

[[tokushuu]
[f_box title="特徴1" title_align="" border="tate" type="maru-l"]
<img src="https://hannya-builder.com/guide/wp-content/uploads/2019/01/lion-1.jpg" alt="" width="400" height="400" class="aligncenter size-full wp-image-3647 kage" />
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト[/f_box]
[f_box title="特徴2" title_align="" border="tate" type="maru-l"]
<a href="https://hannya-builder.com/guide/wp-content/uploads/2019/01/kirin-1.jpg"><img src="https://hannya-builder.com/guide/wp-content/uploads/2019/01/kirin-1.jpg" alt="" width="400" height="400" class="aligncenter size-full wp-image-3651 kage" /></a>
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト[/f_box]
[f_box title="特徴3" title_align="" border="tate" type="maru-l"]
<a href="https://hannya-builder.com/guide/wp-content/uploads/2019/01/zou-1.jpg"><img src="https://hannya-builder.com/guide/wp-content/uploads/2019/01/zou-1.jpg" alt="" width="400" height="400" class="aligncenter size-full wp-image-3652 kage" /></a>
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト
[/f_box]
[/tokushuu]]

枠線なし

「 border=”no”」属性を追加すると、枠線がなくなります。仕切り線がなくなった分、説明文の一行あたりの文字数を少し減らして、スペースを取っています。

• 特徴1
  

  説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト

• 特徴2
  

  説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト

• 特徴3
  

  説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト

[[tokushuu]
[f_box title="特徴1" title_align="" border="no" type=""]
<img src="https://hannya-builder.com/guide/wp-content/uploads/2019/01/lion-1.jpg" alt="" width="400" height="400" class="aligncenter size-full wp-image-3647 kage" />
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト[/f_box]
[f_box title="特徴2" title_align="" border="no" type=""]
<a href="https://hannya-builder.com/guide/wp-content/uploads/2019/01/kirin-1.jpg"><img src="https://hannya-builder.com/guide/wp-content/uploads/2019/01/kirin-1.jpg" alt="" width="400" height="400" class="aligncenter size-full wp-image-3651 kage" /></a>
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト[/f_box]
[f_box title="特徴3" title_align="" border="no" type=""]
<a href="https://hannya-builder.com/guide/wp-content/uploads/2019/01/zou-1.jpg"><img src="https://hannya-builder.com/guide/wp-content/uploads/2019/01/zou-1.jpg" alt="" width="400" height="400" class="aligncenter size-full wp-image-3652 kage" /></a>
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト
[/f_box]
[/tokushuu]]

丸抜き＋枠線なし

丸抜きボックスも枠線なしにできます。

• 特徴1

  説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト

• 特徴2

  説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト

• 特徴3

  説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト

[[tokushuu]
[f_box title="特徴1" title_align="" border="no" type="maru"]
<img src="https://hannya-builder.com/guide/wp-content/uploads/2019/01/lion-1.jpg" alt="" width="400" height="400" class="aligncenter size-full wp-image-3647 kage" />
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト[/f_box]
[f_box title="特徴2" title_align="" border="no" type="maru"]
<a href="https://hannya-builder.com/guide/wp-content/uploads/2019/01/kirin-1.jpg"><img src="https://hannya-builder.com/guide/wp-content/uploads/2019/01/kirin-1.jpg" alt="" width="400" height="400" class="aligncenter size-full wp-image-3651 kage" /></a>
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト[/f_box]
[f_box title="特徴3" title_align="" border="no" type="maru"]
<a href="https://hannya-builder.com/guide/wp-content/uploads/2019/01/zou-1.jpg"><img src="https://hannya-builder.com/guide/wp-content/uploads/2019/01/zou-1.jpg" alt="" width="400" height="400" class="aligncenter size-full wp-image-3652 kage" /></a>
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト
[/f_box]
[/tokushuu]]

丸抜き（大）＋枠線なし

• 特徴1

  説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト

• 特徴2

  説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト

• 特徴3

  説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト

[[tokushuu]
[f_box title="特徴1" title_align="" border="no" type="maru-l"]
<img src="https://hannya-builder.com/guide/wp-content/uploads/2019/01/lion-1.jpg" alt="" width="400" height="400" class="aligncenter size-full wp-image-3647 kage" />
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト[/f_box]
[f_box title="特徴2" title_align="" border="no" type="maru-l"]
<a href="https://hannya-builder.com/guide/wp-content/uploads/2019/01/kirin-1.jpg"><img src="https://hannya-builder.com/guide/wp-content/uploads/2019/01/kirin-1.jpg" alt="" width="400" height="400" class="aligncenter size-full wp-image-3651 kage" /></a>
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト[/f_box]
[f_box title="特徴3" title_align="" border="no" type="maru-l"]
<a href="https://hannya-builder.com/guide/wp-content/uploads/2019/01/zou-1.jpg"><img src="https://hannya-builder.com/guide/wp-content/uploads/2019/01/zou-1.jpg" alt="" width="400" height="400" class="aligncenter size-full wp-image-3652 kage" /></a>
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト
[/f_box]
[/tokushuu]]

タイトルを左揃えにする

「title_align=”left”」を追加します。属性値は中央揃え（center）、右揃え（right）も使えます。

• 特徴1
  

  説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト

• 特徴2
  

  説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト

• 特徴3
  

  説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト

[[tokushuu]
[f_box title="特徴1" title_align="left" border="tate" type=""]
<img src="https://hannya-builder.com/guide/wp-content/uploads/2019/01/lion-1.jpg" alt="" width="400" height="400" class="aligncenter size-full wp-image-3647 kage" />
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト[/f_box]
[f_box title="特徴2" title_align="left" border="tate" type=""]
<a href="https://hannya-builder.com/guide/wp-content/uploads/2019/01/kirin-1.jpg"><img src="https://hannya-builder.com/guide/wp-content/uploads/2019/01/kirin-1.jpg" alt="" width="400" height="400" class="aligncenter size-full wp-image-3651 kage" /></a>
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト[/f_box]
[f_box title="特徴3" title_align="left" border="tate" type=""]
<a href="https://hannya-builder.com/guide/wp-content/uploads/2019/01/zou-1.jpg"><img src="https://hannya-builder.com/guide/wp-content/uploads/2019/01/zou-1.jpg" alt="" width="400" height="400" class="aligncenter size-full wp-image-3652 kage" /></a>
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト
[/f_box]
[/tokushuu]]

応用技：画像をリンクさせる

LP用特集枠はボタン非表示、画像へリンクしない仕様になっています。画像にリンクさせたい場合は、通常の特集枠ショートコードのURL属性「url=””」でURLを指定して、ボタン表示属性「show_button=””」を「off」にします。別ウィンドウで開く場合は「target=””」を「blank」にします。

• 特徴1
  

  説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト

• 特徴2
  

  説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト

• 特徴3
  

  説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト

[[tokushuu]
[f_box title="特徴1" title_align="left" border="tate" url="https://www.yahoo.co.jp/" type="" show_button="off" target="blank"]
<a href="https://hannya-builder.com/guide/wp-content/uploads/2019/01/kirin-1.jpg"><img src="https://hannya-builder.com/guide/wp-content/uploads/2019/01/lion-1.jpg" alt="" width="400" height="400" class="aligncenter size-full wp-image-3647 kage" />
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト[/f_box]
[f_box title="特徴2" title_align="left" border="tate" url="https://www.yahoo.co.jp/" type="" show_button="off" target="blank"]
<a href="https://hannya-builder.com/guide/wp-content/uploads/2019/01/kirin-1.jpg"><img src="https://hannya-builder.com/guide/wp-content/uploads/2019/01/kirin-1.jpg" alt="" width="400" height="400" class="aligncenter size-full wp-image-3651 kage" /></a>
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト[/f_box]
[f_box title="特徴3" title_align="left"  border="tate" url="https://www.yahoo.co.jp/" type="" show_button="off" target="blank"]
<a href="https://hannya-builder.com/guide/wp-content/uploads/2019/01/zou-1.jpg"><img src="https://hannya-builder.com/guide/wp-content/uploads/2019/01/zou-1.jpg" alt="" width="400" height="400" class="aligncenter size-full wp-image-3652 kage" /></a>
説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト
[/f_box]
[/tokushuu]]

属性値の意味

border=”tate”
タイトル、説明テキストの文字サイズを一回り小さくして、区切りの縦線のみの特集枠にする
type=”maru/maru-l”
maru：画像を丸くくり抜く、maru-l：画像を大きく丸くくり抜く
border=”no”
縦線をなくす
title_align=”left/center/right”
タイトルを左揃え、中央揃え、右揃えにする

以上「LP用特集枠」でした。