Cool and cool WordPress Theme Child02
ロゴの下部に、サイトの説明等を入力・表示できます。
Cool and cool WordPress Theme Child02 > テーマの機能 > 装飾用のボックスデザインを設定する。
Release: 2019/02/06 Update: 2019/02/06

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

囲み枠付きテキスト

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

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

ー文章例ー

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

 
 

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

 

桜の名所について

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

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

<!-- タイトル付き囲み枠テキスト -->
<div class="framed-text green">
<div class="framed-title green">桜の名所について</div>
〜
</div>

 
 

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

 
 

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

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

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

<!-- 横一杯のタイトル付き囲み枠テキスト -->
<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/


 
 

HOME



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

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

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