WordPress

ワードプレスへコピペするだけ!かわいい囲みデザイン・コード

枠

コピペだけで使える囲み枠デザインをご紹介します。

装飾は全体の記事の構成やその記事のターゲットに届ける内容で囲み枠のデザインを選ぶといいですね。

また、コードはAddQuicktag(アドクイックタグ)に設置しておけば簡単に繰り返し使えます!

WordPressプラグインAddQuicktagの使い方!おすすめ設定も!

 

点線囲み枠

■ここにテキストを入力■
 

■ここにテキストを入力■
 

■ここにテキストを入力■
 

付箋的な囲み枠

■ここにテキストを入力■
 

■ここにテキストを入力■
 

■ここにテキストを入力■
 

タイトル付きの囲み枠

タイトル

■ここにテキストを入力■

 

1pxの数字を 5pxに変えると、このように枠線を太くすることができます。

タイトル

■ここにテキストを入力■

 

縫製的な囲み枠

■ここにテキストを入力■
 

かわいいドットの囲み枠

■ここにテキストを入力■
 

■ここにテキストを入力■
 

■ここにテキストを入力■
 

■ここにテキストを入力■
 

■ここにテキストを入力■
 

ストライプの囲み枠


■ここにテキストを入力■
 


■ここにテキストを入力■
 

グラデーション囲み枠

■ここにテキストを入力■
 

■ここにテキストを入力■
 

囲み枠の色を変える方法

色を変えたいときは、「#」以降の英数字(カラーコード)を変更します。カラーコードはこちらで調べられます。

原色大辞典

囲み枠の大きさを変える方法

「font-size: 100%;」の数字を変えると文字の大きさが変わります。

少し小さめにしたい場合は95%とか、85%にするといいですね♬

最後まで読んで頂いてありがとうございました。

記事が少しでもお役にたるものだと思われたら、
下のボタンからシェアをして頂けると嬉しいです。

ブログの始め方・稼ぎ方をまとめた7日間無料の「副業ブログ講座」を開設中です。

↓↓↓メルマガ登録は下のフォームから↓↓↓

友だち追加