アメブロの記事で使えるステッチ付きパステルカラーの囲み枠(飾り枠)

アメブロの記事で使えるステッチ付きパステルカラーの囲み枠です。

基本の「ステッチ付きグレーの囲み枠」

「パステルカラーの・・・」というタイトルですが、まずは、基本となる無彩色のグレーから。

■ステッチ付き囲み枠(グレー)
 

グレーの背景(#f0f0f0)は2箇所設定箇所があります。ステッチは白(#ffffff)、文字は黒(#333333)となっています。

この囲み枠のタグは次のようになります(■の部分に囲み枠内に表示する内容を書いて下さい)。

<div style="margin:15px 5px;padding:10px;color:#333333;background:#f0f0f0;box-shadow:0 0 0 5px #f0f0f0;border:dashed 2px #ffffff;" class="l-border l-p-t l-p-r l-p-b l-p-l">■</div>

ステッチ付きパステルカラーの囲み枠

次に、上のグレーの囲み枠をベースに、「ステッチ付きパステルカラーの囲み枠」を幾つかご紹介します。

何れも、表示例とコピペで使えるコードをセットで書いてあります。

背景色のみ色を変えてあります。

ピンク

■ステッチ付き囲み枠(ピンク)
 
<div style="margin:15px 5px;padding:10px;color:#333333;background:#ffe0f0;box-shadow:0 0 0 5px #ffe0f0;border:dashed 2px #ffffff;" class="l-border l-p-t l-p-r l-p-b l-p-l">■</div>

オレンジ

■ステッチ付き囲み枠(オレンジ)
 
<div style="margin:15px 5px;padding:10px;color:#333333;background:#ffe0a0;box-shadow:0 0 0 5px #ffe0a0;border:dashed 2px #ffffff;" class="l-border l-p-t l-p-r l-p-b l-p-l">■</div>

イエロー

■ステッチ付き囲み枠(イエロー)
 
<div style="margin:15px 5px;padding:10px;color:#333333;background:#fcfca0;box-shadow:0 0 0 5px #fcfca0;border:dashed 2px #ffffff;" class="l-border l-p-t l-p-r l-p-b l-p-l">■</div>

グリーン

■ステッチ付き囲み枠(グリーン)
 
<div style="margin:15px 5px;padding:10px;color:#333333;background:#e0ffa0;box-shadow:0 0 0 5px #e0ffa0;border:dashed 2px #ffffff;" class="l-border l-p-t l-p-r l-p-b l-p-l">■</div>

ミント

■ステッチ付き囲み枠(ミント)
 
<div style="margin:15px 5px;padding:10px;color:#333333;background:#e0fff0;box-shadow:0 0 0 5px #e0fff0;border:dashed 2px #ffffff;" class="l-border l-p-t l-p-r l-p-b l-p-l">■</div>

ブルー

■ステッチ付き囲み枠(ブルー)
 
<div style="margin:15px 5px;padding:10px;color:#333333;background:#e0f0ff;box-shadow:0 0 0 5px #e0f0ff;border:dashed 2px #ffffff;" class="l-border l-p-t l-p-r l-p-b l-p-l">■</div>

好みの色に変えたい場合

囲み枠の文字色、背景の色、ステッチの色を、好みで変えることができます。

以下のコード例を参考に、下線部(4箇所)を適宜変更してみて下さい。

<div style="margin:15px 5px;padding:10px;color:#f0f0f0;background:#000000;box-shadow:0 0 0 5px #000000;border:dashed 2px #606060;" class="l-border l-p-t l-p-r l-p-b l-p-l">■</div>

上記の例では、順番に、

文字 … #f0f0f0
背景(2ヶ所) … #000000
ステッチ … #606060

という設定になっています。

実際に表示すると以下のような黒字に白文字のステッチ付き囲み枠になっています↓。

■ステッチ付き囲み枠(ブラック)
 

すみません、全くパステルではありませんね。

他にも、好みの色の囲み枠を作ってみてくださいね。

以上、アメブロの記事にコピペで使える「ステッチ付きパステルカラーの囲み枠(飾り枠)」をご紹介しました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です