コピペで使える布風、ステッチ装飾お知らせBOXのインラインCSS

前回は、布風、ステッチ装飾でリンクを作りましたが、今回はお知らせBOXです。
タイトルはちょっと大きめ&太めにして、破線をつけました。
タイトルが不要な場合は、<p style="〜;">タイトルタイトルタイトル</p> 部分は削除してお使いください。

サンプル

ラプソディはゴーシュのかっかキャベジみちが胸とし窓ますた。するとどう大丈夫んましというおっかさんたでし。

だめでしう気たはましところが一疋の楽曲のなかにはむしゃくしゃまじめどしなて、それじゃ子が血走っれ気だな。むしっすぎ何はかっこうがわるくたて一番の扉の窓たちで叩く第一ねずみらのまねから思うてやるましん。先生ははじめこわて出しです。北の方は六のき血のようが込みのにきた。

ラプソディはゴーシュのかっかキャベジみちが胸とし窓ますた。するとどう大丈夫んましというおっかさんたでし。

だめでしう気たはましところが一疋の楽曲のなかにはむしゃくしゃまじめどしなて、それじゃ子が血走っれ気だな。むしっすぎ何はかっこうがわるくたて一番の扉の窓たちで叩く第一ねずみらのまねから思うてやるましん。先生ははじめこわて出しです。北の方は六のき血のようが込みのにきた。

使い方

  1. お好みの色のお知らせBOXの<div style="〜 ">〜</div> をコピーしてください
  2. スマホのメモ帳などテキスト編集できるものにペースト(貼り付け)
  3. コード中のタイトルタイトルタイトル本文本文本文本文本文本文本文本文本文本文をご自分の文章に書き換えてください。
  4. 修正したコードをコピーし、ブログ編集アプリの「HTML編集」でリンクを入れたい場所にペースト(貼り付け)してください

濃い

タイトルタイトルタイトル

本文本文本文本文本文本文本文本文本文本文

<div style="display:block;margin:12px; padding: 0.5em 1em; text-decoration: none; background:#ff8e8e; color: #fff; border-radius: 4px; box-shadow: 0px 0px 0px 5px #ff8e8e; border: dashed 2px #ffc1c1;"><p style="border-bottom: 6px dotted #ffc1c1; font-size: 130%; font-weight: bold; padding: 0px 10px; margin:10px 0px;">タイトルタイトルタイトル</p><p>本文本文本文本文本文本文本文本文本文本文</p></div>

タイトルタイトルタイトル

本文本文本文本文本文本文本文本文本文本文

<div style="display:block;margin:12px; padding: 0.5em 1em; text-decoration: none; background:#ffc68e; color: #fff; border-radius: 4px; box-shadow: 0px 0px 0px 5px #ffc68e; border: dashed 2px #ffe0c1;"><p style="border-bottom: 6px dotted #ffe0c1; font-size: 130%; font-weight: bold; padding: 0px 10px; margin:10px 0px;">タイトルタイトルタイトル</p><p>本文本文本文本文本文本文本文本文本文本文</p></div>

タイトルタイトルタイトル

本文本文本文本文本文本文本文本文本文本文

<div style="display:block;margin:12px; padding: 0.5em 1em; text-decoration: none; background:#ffec47; color: #fff; border-radius: 4px; box-shadow: 0px 0px 0px 5px #ffec47; border: dashed 2px #ffff99;"><p style="border-bottom: 6px dotted #ffff99; font-size: 130%; font-weight: bold; padding: 0px 10px; margin:10px 0px;">タイトルタイトルタイトル</p><p>本文本文本文本文本文本文本文本文本文本文</p></div>

タイトルタイトルタイトル

本文本文本文本文本文本文本文本文本文本文

<div style="display:block;margin:12px; padding: 0.5em 1em; text-decoration: none; background:#8eff8e; color: #fff; border-radius: 4px; box-shadow: 0px 0px 0px 5px #8eff8e; border: dashed 2px #c1ffc1;"><p style="border-bottom: 6px dotted #c1ffc1; font-size: 130%; font-weight: bold; padding: 0px 10px; margin:10px 0px;">タイトルタイトルタイトル</p><p>本文本文本文本文本文本文本文本文本文本文</p></div>

タイトルタイトルタイトル

本文本文本文本文本文本文本文本文本文本文

<div style="display:block;margin:12px; padding: 0.5em 1em; text-decoration: none; background:#89c4ff; color: #fff; border-radius: 4px; box-shadow: 0px 0px 0px 5px #89c4ff; border: dashed 2px #bcddff;"><p style="border-bottom: 6px dotted #bcddff; font-size: 130%; font-weight: bold; padding: 0px 10px; margin:10px 0px;">タイトルタイトルタイトル</p><p>本文本文本文本文本文本文本文本文本文本文</p></div>

タイトルタイトルタイトル

本文本文本文本文本文本文本文本文本文本文

<div style="display:block;margin:12px; padding: 0.5em 1em; text-decoration: none; background:#c68eff; color: #fff; border-radius: 4px; box-shadow: 0px 0px 0px 5px #c68eff; border: dashed 2px #e0c1ff;"><p style="border-bottom: 6px dotted #e0c1ff; font-size: 130%; font-weight: bold; padding: 0px 10px; margin:10px 0px;">タイトルタイトルタイトル</p><p>本文本文本文本文本文本文本文本文本文本文</p></div>

タイトルタイトルタイトル

本文本文本文本文本文本文本文本文本文本文

<div style="display:block;margin:12px; padding: 0.5em 1em; text-decoration: none; background:#ff8eff; color: #fff; border-radius: 4px; box-shadow: 0px 0px 0px 5px #ff8eff; border: dashed 2px #ffc1ff;"><p style="border-bottom: 6px dotted #ffc1ff; font-size: 130%; font-weight: bold; padding: 0px 10px; margin:10px 0px;">タイトルタイトルタイトル</p><p>本文本文本文本文本文本文本文本文本文本文</p></div>

薄い

タイトルタイトルタイトル

本文本文本文本文本文本文本文本文本文本文

<div style="display:block;margin:12px; padding: 0.5em 1em; text-decoration: none; background:#ffc1c1; color: #000; border-radius: 4px; box-shadow: 0px 0px 0px 5px #ffc1c1; border: dashed 2px #ff8e8e;"><p style="border-bottom: 6px dotted #ff8e8e; font-size: 130%; font-weight: bold; padding: 0px 10px; margin:10px 0px;">タイトルタイトルタイトル</p><p>本文本文本文本文本文本文本文本文本文本文</p></div>

タイトルタイトルタイトル

本文本文本文本文本文本文本文本文本文本文

<div style="display:block;margin:12px; padding: 0.5em 1em; text-decoration: none; background:#ffe0c1; color: #000; border-radius: 4px; box-shadow: 0px 0px 0px 5px #ffe0c1; border: dashed 2px #ffc68e;"><p style="border-bottom: 6px dotted #ffc68e; font-size: 130%; font-weight: bold; padding: 0px 10px; margin:10px 0px;">タイトルタイトルタイトル</p><p>本文本文本文本文本文本文本文本文本文本文</p></div>

タイトルタイトルタイトル

本文本文本文本文本文本文本文本文本文本文

<div style="display:block;margin:12px; padding: 0.5em 1em; text-decoration: none; background:#ffff99; color: #000; border-radius: 4px; box-shadow: 0px 0px 0px 5px #ffff99; border: dashed 2px #ffec47;"><p style="border-bottom: 6px dotted #ffec47; font-size: 130%; font-weight: bold; padding: 0px 10px; margin:10px 0px;">タイトルタイトルタイトル</p><p>本文本文本文本文本文本文本文本文本文本文</p></div>

タイトルタイトルタイトル

本文本文本文本文本文本文本文本文本文本文

<div style="display:block;margin:12px; padding: 0.5em 1em; text-decoration: none; background:#c1ffc1; color: #000; border-radius: 4px; box-shadow: 0px 0px 0px 5px #c1ffc1; border: dashed 2px #8eff8e;"><p style="border-bottom: 6px dotted #8eff8e; font-size: 130%; font-weight: bold; padding: 0px 10px; margin:10px 0px;">タイトルタイトルタイトル</p><p>本文本文本文本文本文本文本文本文本文本文</p></div>

タイトルタイトルタイトル

本文本文本文本文本文本文本文本文本文本文

<a style="display: inline-block; margin: 12px; padding: 0.5em 1em; text-decoration: none; background: #bcddff; color: #000; border-radius: 4px; box-shadow: 0px 0px 0px 5px #bcddff; border: dashed 2px #89c4ff;"><p style="border-bottom: 6px dotted #89c4ff; font-size: 130%; font-weight: bold; padding: 0px 10px; margin:10px 0px;">タイトルタイトルタイトル</p><p>本文本文本文本文本文本文本文本文本文本文</p></div>

タイトルタイトルタイトル

本文本文本文本文本文本文本文本文本文本文

<a style="display: inline-block; margin: 12px; padding: 0.5em 1em; text-decoration: none; background: #e0c1ff; color: #000; border-radius: 4px; box-shadow: 0px 0px 0px 5px #e0c1ff; border: dashed 2px #c68eff;"><p style="border-bottom: 6px dotted #c68eff; font-size: 130%; font-weight: bold; padding: 0px 10px; margin:10px 0px;">タイトルタイトルタイトル</p><p>本文本文本文本文本文本文本文本文本文本文</p></div>

タイトルタイトルタイトル

本文本文本文本文本文本文本文本文本文本文

<div style="display:block;margin:12px; padding: 0.5em 1em; text-decoration: none; background:#ffc1ff; color: #000; border-radius: 4px; box-shadow: 0px 0px 0px 5px #ffc1ff; border: dashed 2px #ff8eff;"><p style="border-bottom: 6px dotted #ff8eff; font-size: 130%; font-weight: bold; padding: 0px 10px; margin:10px 0px;">タイトルタイトルタイトル</p><p>本文本文本文本文本文本文本文本文本文本文</p></div>

スポンサーリンク
レクタングル(大)

シェアする

スポンサーリンク
レクタングル(大)