ランディングページのボックスデザイン - クールでかっこいいWPテーマ Ver.16

囲み枠付きテキスト

<div class=”framed-text blue“> 〜 </div> のように色とともに指定することで表示します。

テキストを枠付きで表示します。強調する文章等に利用できます。テキストを枠付きで表示します。強調する文章等に利用できます。

ー文章例ー

日本人にとって桜は特別な花です。
近くの公園の桜よりも、名所と呼ばれるところの桜を見たくなります。関東の桜が特別にいいわけではありませんが、どこもたくさんの人が集まります。
桜を見ることができる期間は長くありません。その時、どこの桜を見るかが重要な話題になるのでしょう。
今はスマホの時代となりましたから、誰かが撮った桜がネットにたくさん掲載されています。しかし、桜の名所は自分で見ることが重要なのです。
穴場を探して、ゆっくりと桜を見たいと思うのは当然なのでしょう。

タイトル付き囲み枠テキスト

桜の名所について

テキストを枠付きで表示します。強調する文章等に利用できます。テキストを枠付きで表示します。強調する文章等に利用できます。
日本人にとって桜は特別な花です。
近くの公園の桜よりも、名所と呼ばれるところの桜を見たくなります。関東の桜が特別にいいわけではありませんが、どこもたくさんの人が集まります。
桜を見ることができる期間は長くありません。その時、どこの桜を見るかが重要な話題になるのでしょう。
今はスマホの時代となりましたから、誰かが撮った桜がネットにたくさん掲載されています。しかし、桜の名所は自分で見ることが重要なのです。
穴場を探して、ゆっくりと桜を見たいと思うのは当然なのでしょう。

下記の様に「囲みテキスト指定」にタイトル部分を色を追加して指定します。

<!-- タイトル付き囲み枠テキスト -->

<div class="framed-text green">
<div class="framed-title green">桜の名所について</div>

〜

</div>

横一杯のタイトル付き囲み枠テキスト

桜の名所について調べてみました！！

前述と同様に「囲みテキスト指定」にワイドタイトル部分に色を追加して指定します。

<!-- 横一杯のタイトル付き囲み枠テキスト -->

&nbsp;
<div class="framed-text pink">
<div class="framed-widetitle pink">桜の名所について</div>

〜

</div>

ステッチ枠付きテキスト

<div class=”stitch-text blue”> 〜 </div>のように指定します。

ステッチ付きテキストの表示例です。

チェック画像付きリスト表示

<ul class=”check”> 及び <li class=”red”> 〜 </li>のクラスを設定します。

囲み枠の中に表示させています！

チェック付きリスト表示のサンプルです。
チェック付きリスト表示のサンプルです。
チェック付きリスト表示のサンプルです。
チェック付きリスト表示のサンプルです。
チェック付きリスト表示のサンプルです。
チェック付きリスト表示のサンプルです。
チェック付きリスト表示のサンプルです。

下記のように記述します（文字も大きく表示させています。）

<!-- チェック画像付きリスト表示 -->

<div class="framed-text brown">
<div class="framed-title brown">囲み枠の中に表示させています！</div>
<ul class="check" style="font-size:1.25em;">
 <li class="red"><strong>チェック付きリスト表示のサンプルです。</strong></li>

　〜

</ul>
</div>

吹き出し（会話風）での表示

こんな感じの吹き出しになります。
吹き出しには、人物や動物の画像を利用できます。利用する画像は管理画面の「カスタマイザー」で事前に登録しておきます。

吹き出しについては、下記のページを参考にしてください。
→ https://www.af-partner.net/wpv16/1650/theme-functions/30/