クールでかっこいいWPテーマ Ver.16 > テーマの機能 > 装飾用のボックスデザインを設定する。
Release: 2019/02/06 Update: 2019/02/06

装飾用のボックスデザインを設定する。

囲み枠付きテキスト   <div class=”framed-text blue“> 〜 </div> のように色とともに指定することで表示します。

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

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

 
桜の名所について
テキストを枠付きで表示します。強調する文章等に利用できます。テキストを枠付きで表示します。強調する文章等に利用できます。 日本人にとって桜は特別な花です。 近くの公園の桜よりも、名所と呼ばれるところの桜を見たくなります。関東の桜が特別にいいわけではありませんが、どこもたくさんの人が集まります。 桜を見ることができる期間は長くありません。その時、どこの桜を見るかが重要な話題になるのでしょう。 今はスマホの時代となりましたから、誰かが撮った桜がネットにたくさん掲載されています。しかし、桜の名所は自分で見ることが重要なのです。 穴場を探して、ゆっくりと桜を見たいと思うのは当然なのでしょう。
  下記の様に「囲みテキスト指定」にタイトル部分を色を追加して指定します。 [html] <!– タイトル付き囲み枠テキスト –> <div class="framed-text green"> <div class="framed-title green">桜の名所について</div> 〜 </div> [/html]    

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

   
桜の名所について調べてみました!!
テキストを枠付きで表示します。強調する文章等に利用できます。テキストを枠付きで表示します。強調する文章等に利用できます。 日本人にとって桜は特別な花です。 近くの公園の桜よりも、名所と呼ばれるところの桜を見たくなります。関東の桜が特別にいいわけではありませんが、どこもたくさんの人が集まります。 桜を見ることができる期間は長くありません。その時、どこの桜を見るかが重要な話題になるのでしょう。 今はスマホの時代となりましたから、誰かが撮った桜がネットにたくさん掲載されています。しかし、桜の名所は自分で見ることが重要なのです。 穴場を探して、ゆっくりと桜を見たいと思うのは当然なのでしょう。
  前述と同様に「囲みテキスト指定」にワイドタイトル部分に色を追加して指定します。 [html] <!– 横一杯のタイトル付き囲み枠テキスト –> <div class="framed-text pink"> <div class="framed-widetitle pink">桜の名所について</div> 〜 </div> [/html]    

ステッチ枠付きテキスト

  <div class=”stitch-text blue”> 〜 </div>のように指定します。
ステッチ付きテキストの表示例です。
   

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

  <ul class=”check”> 及び <li class=”red”> 〜 </li>のクラスを設定します。  
囲み枠の中に表示させています!
  • チェック付きリスト表示のサンプルです。
  • チェック付きリスト表示のサンプルです。
  • チェック付きリスト表示のサンプルです。
  • チェック付きリスト表示のサンプルです。
  • チェック付きリスト表示のサンプルです。
  • チェック付きリスト表示のサンプルです。
  • チェック付きリスト表示のサンプルです。
下記のように記述します(文字も大きく表示させています。) [html] <!– チェック画像付きリスト表示 –> <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> [/html]    

吹き出し(会話風)での表示

    [bln_left color="blue-waku" img="01" name="一郎"]こんな感じの吹き出しになります。
吹き出しには、人物や動物の画像を利用できます。利用する画像は管理画面の「カスタマイザー」で事前に登録しておきます。[/bln_left] [bln_right color="green-waku" img="04" name="美咲"]吹き出しについては、下記のページを参考にしてください。
https://www.af-partner.net/wpv16/1650/theme-functions/30/[/bln_right]    ]]>



コメントはお気軽にどうぞ

メールアドレスは公開されません。
また、* が付いている欄は必須項目ですので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。