最近、見出しタグの装飾に気に入って使っていた（↑）のような柄の囲み枠について、読者の方から「作り方を教えて」とリクエストをいただいておりました。
これはCSSで作るおしゃれなボックス（囲み枠）のデザインサンプル13パターンという記事の中で紹介されていたものを参考に作成したものです。
まったくの自分用アレンジで、あらためて皆さんに「紹介する」にはあまりに我流すぎて・・・なので、ちょっとまた一から見直ししてました。
使用する色で悩んだんですが、女性からのリクエストだったので可愛さ重視。ちょっと薄すぎる？？
でも、それがこのデザインのポイントになっています。下記に紹介するタグでは、こちらの「例」よりもさらに薄い色になっています。
オリジナルでカスタマイズしたい方向けに、色の変更方法について最後に記載しておきます。
また囲み枠内での改行・設置に失敗した時の対処法についてなども、最後に書いておきますね。
（余談）「-webkit-」っていうペンダープレフィックスは参考にしたサイトでもそもそもついてるので、そのままにしています。なくても表示される気がするんですが・・・素人判断なので^^;つけておきます。 古いブラウザなどでは表示がされない場合も考えられます。その時は、単色ベタ塗り状態になります。ご了承ください。
お好きな色のパターンの 内にあるのがその色に該当するタグになります。
斜めストライプデザインの囲み枠（水色）
水色#dbedffの囲み枠はこちらです。
＊AmeCareをご利用の場合は、このままコピペして登録してご利用ください。
＊HTML表示枠にてご利用の場合は%TEXT%の部分に本文を書いてください。
斜めストライプデザインの囲み枠（イエロー）
黄色#ffffe0の囲み枠はこちらです。
＊アメケアをご利用の場合は、このままコピペしてご利用ください。
＊HTML表示枠にてご利用の場合は%TEXT%の部分に本文を書いてください。
斜めストライプデザインの囲み枠（ピンク）
ピンク#ffdbedの囲み枠はこちらです。
＊アメケアをご利用の場合は、このままコピペしてご利用ください。
＊HTML表示枠にてご利用の場合は%TEXT%の部分に本文を書いてください。
斜めストライプデザインの囲み枠（グリーン）
緑色#dbffdbの囲み枠はこちらです。
＊アメケアをご利用の場合は、このままコピペしてご利用ください。
＊HTML表示枠にてご利用の場合は%TEXT%の部分に本文を書いてください。
囲み枠内で改行する時は「Shift」キーを押しながら
AmeCareをお使いの場合は、まずテキストを完成させてから最後に囲むようにするのが一番いいですが、あとから改行を追加する時などの参考にしてください。
ここで、普通に改行してしまうと、囲み枠が増殖したような形で変な区切りがついてしまいます（↓）
※このように失敗した場合の直し方をさらに下に書いてあります。
同じ囲み枠内に文章を収めるためには、「Shift」キーを押しながら、改行（enter/return）をしてください。
そうすると、不自然ではなく改行して、テキストを追加することができます。
囲み枠を失敗して、やり直したい時
囲み枠をつけて、先ほどのように改行に失敗したり、何かしらでデザインが崩れてしまった。という時に、簡単に囲み枠をリセットすることができます。
まず、リセットしたい囲み枠のエリアを下図のように選択した状態にします（↓）。
エディタ画面の右上に「A→Aもどす」というボタンがあります。
エリアを選択した状態のまま、これを押します。
これで元に戻るはずです。
このボタンは他にも、文字色を戻したい時、太字指定を解除したい時、などいろんな装飾を使った時に、初期状態に戻せるので便利です。
デザインの色をオリジナルにしたい時
それぞれのストライプの色は、半角の「#」と6桁の英数字でできた「カラーコード」で指定されています。
今回のそれぞれのカラーコードは、下図のように囲み枠のタグの中に４ヶ所見つけることができます。
タグの中の４カ所をお好きな色のカラーコードに直して、使ってみてください。
ちなみに、今回私が参考にしたカラーコードはこちらです。
最後に・・・実は・・・のご紹介
これを紹介すると、私の上の説明いらないんじゃないか？と思わないでもないんですが、今回の斜めストライプの囲み枠を紹介するにあたり、いろいろみてたら、なんと！
アメブロの神様がずっと前に「斜めストライプの囲み枠」を紹介されていたのを発見しました（^^;）
それも、ジェネレーター（自動作成ツール）付きです。
機能性抜群の囲み枠と思います！
（とっととこっちを紹介した方がはやかったんじゃないか、というツッコミは受け付けません）
さすがです♡
リクエストくださったRさま。遅くなりましたけど、どうでしょう？
お使いいただければ幸いです。
あ、あと「文章を黄色いマーカーにする方法」についてもご質問いただいてましたが、それはエディタ画面の上部にある（↓）のボタン。
マークしたい文章を選択した状態で、このボタンを押して（↓）好きな色を選択すると
色によっては、文章がマーカーで強調されたようになります。
やってみてくださいね。
以上、斜めストライプデザインの囲み枠のタグの紹介と、その他もろもろでした！
最後までお付き合いありがとうございました。
Cocoro+et+Gokoro（こころ・え・ごころ） 北川直枝
