コピペで可愛く装飾! CSSのみでデザインする囲み枠【div, p】

WordPress

こんにちは、とみーです。

ブログを運営されている方は記事を書く中で「ここに注目してほしい!」と思うことが多くあると思います。

そんなときにはパッと目をひく囲み枠(ボックスデザイン)がおすすめです。

スポンサーリンク

使い方

使い方ですが、下記にあるそれぞれのHTMLとスタイルシートを、指定の場所にコピペします。

WordPressなら
HTML:記事投稿のテキストタブ
CSS:ダッシュボードの外観 → テーマの編集 → style.css
です。

タイトルつきのデザインについて

タイトルはCSSで指定します。
content: ‘TITLE’;のTITLEの箇所を変更してください。
CSSのため、複数ページで使っていた場合、全てのページでタイトルが変わりますのでご注意ください。

同じサイトで複数のデザインを使う場合

異なるデザインでも、クラス名は全て同じ「.mybox」になっています。
同じサイトで複数のデザインを使いたい方はmyboxという箇所をmybox2やmybox3のように名前を変更してください。

色の変更

色は全てスタイルシート内で設定してますので、デザインそのままでお好みの色にご自身で変更することが可能です。
#から始まる6桁の英数字の箇所を変更すればOKです。

囲み枠デザイン一覧

少しずれた二重枠

See the Pen WobBQm by tommy (@tommy0719) on CodePen.

少しずれた二重枠+タイトル

See the Pen ENVXXb by tommy (@tommy0719) on CodePen.

角丸背景色あり+内側に白い実線

See the Pen PbPjJM by tommy (@tommy0719) on CodePen.

角丸背景色あり+内側に白い実線+水玉マステ風タイトル

See the Pen dOYRqw by tommy (@tommy0719) on CodePen.

角丸ストライプ

See the Pen RoWZRP by tommy (@tommy0719) on CodePen.

角丸タイトルのみストライプ

See the Pen LbNpme by tommy (@tommy0719) on CodePen.

上下ストライプ

See the Pen gLraqE by tommy (@tommy0719) on CodePen.

影付き枠+チェック柄マステ風タイトル

See the Pen zoqrKR by tommy (@tommy0719) on CodePen.

タイトル吹き出し風

See the Pen ObxJeK by tommy (@tommy0719) on CodePen.

活用させていただいたサイト