簡単カスタマイズ設定① （囲み枠/ボックスデザイン）

ブログテーマに含まれている囲み枠を紹介します♪

HTMLを定型文に保存してすぐに取り出せるようにしておけば、簡単に囲み枠を使うことができますෆ(◕ㅂ◕)ෆ💓

色を変更する場合のみ、デザインCSSにコードを追加して下さい。

シンプルな囲み枠

とてもシンプルな囲み枠です♪

<div class="box simple-box">
<p>
とてもシンプルな囲み枠です♪
</p>
</div>

枠線の色を変えたい時は以下のコードをデザインCSSに追加して下さい。

.simple-box {
    border-color: 色コード !important; 
}

背景色付き囲み枠

背景色付きの囲み枠です♪

<div class="box haikei-box">
<p>
背景色付きの囲み枠です♪
</p>
</div>

背景色を変えたい時は以下のコードをデザインCSSに追加して下さい。

.haikei-box {
    background: 色コード !important;
}

背景色付き囲み枠（ストライプ）

ストライプの背景色付き囲み枠です♪

<div class="box stripe-box">
<p>
ストライプの背景色付き囲み枠です♪
</p>
</div>

しましまの色を変えたい時は以下のコードをデザインCSSに追加して下さい。

.stripe-box {
    background: -webkit-repeating-linear-gradient(-45deg, 色コード①, 色コード① 3px, 色コード② 3px, 色コード② 7px) !important;
    background: repeating-linear-gradient(-45deg, 色コード①, 色コード① 3px,色コード② 3px, 色コード② 7px); !important}

布ステッチ囲み枠

ステッチのようなデザインの囲み枠です♪

<div class="box nuno-box">
<p>
ステッチのようなデザインの囲み枠です♪
</p>
</div>

布の色（背景色）とステッチの色を変えたい時は以下のコードをデザインCSSに追加して下さい。

.nuno-box {
    background-color: 布の色 !important;
    box-shadow: 0 0 0 8px 布の色 !important;
    border-color: ステッチの色 !important;
}

タイトル付き囲み枠（枠の外側）

タイトル

枠の外側にタイトルがついた囲み枠です♪

<div class="box title-out-box">
<span class="title">タイトル</span>
<p>
枠の外側にタイトルがついた囲み枠です♪
</p>
</div>

枠線の色を変えたい場合は以下のコードをデザインCSSに追加して下さい。

.title-out-box { 
    border-color: 色コード !important;
}
.title-out-box .title {
    background: 色コード !important;
}

タイトル付き囲み枠（枠の途中）

タイトル

枠の途中にタイトルがついた囲み枠です♪

<div class="box title-middle-box">
<span class="title">タイトル</span>
<p>
枠の途中にタイトルがついた囲み枠です♪
</p>
</div>

枠線の色を変えたい場合は以下のコードをデザインCSSに追加して下さい。

.title-middle-box { 
    border-color: 色コード !important;
}

タイトル付き囲み枠（枠の内側）

タイトル

枠の内側にタイトルがついた囲み枠です♪

<div class="box title-in-box">
<span class="title">タイトル</span>
<p>
枠の内側にタイトルがついた囲み枠です♪
</p>
</div>

枠線の色を変えたい場合は以下のコードをデザインCSSに追加して下さい。

.title-in-box { 
    border-color: 色コード !important;
}
.title-in-box .title {
   background: 色コード !important;
}

クリップ付き囲み枠

右上にクリップがついたおしゃれな囲み枠です♪

<div class="box clip-box">
<p>
右上にクリップがついたおしゃれな囲み枠です♪
</p>
</div>

背景色、影の色を変えたい場合は以下のコードをデザインCSSに追加して下さい。

.clip-box { 
    background: 背景色 !important;
    box-shadow: 4px 4px 1px 影の色 !important;
}
.clip-box:after {
   border-color: 背景色 !important;
}

色コード

色コードは以下のサイトなどで確認できます。

www.color-sample.com

色コードの書き方

• 16進数：#111111
• 10進数：rgba(0,0,0,1)
• カラーネーム：black

使いやすいものをご使用ください。どれでも大丈夫です。

カラーネームは色が限られているので、表現の幅が狭まるかもしれません。こちらのサイトなどで 確認できます。

不具合などがありましたら、コメントでお知らせください。