WordPress内で色んな枠を使う備忘録

Wordpress

2019.04.20 2018.02.02

他の方のサイトを参考にさせていただき枠線をいれてブログを書いておりましたが、いちいち行くのが面倒だったので、自分で使うために枠線のCSSと内容をまとめてみました。

ちなみに、私のWordpressのテーマは、Simplicity2と、その子テーマを使っています。

管理もードに入って、外観のカスタマイズに移行すると、「追加CSS」ってのがありますので、そこにコピペするだけで、あとは、埋め込むHTMLを書き込むと簡単に枠を入れることができました。

なるたけ、タイプの違う枠線を選択したので色や線種はHTMLにスタイルを設定するだけで自由に後から変えられますんね。

（１）斜め淡い青ストライプの枠

●埋め込むHTML

<div class="box1">
ここに文字を書いていきますよ。
</div>

●追加CSS

.box1{
    padding: 0.5em 1em;
    margin: 2em 0;
    background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
.box16 p {
    margin: 0; 
    padding: 0;
}

●表示

ここに文字を書いていきますよ。

（２）タイトル付青枠線

●埋め込むHTML

<div class="box2">
<span class="box-title">タイトルだよ</span>
ここに内容を書くよ～～。
</div>

●追加CSS

.box2 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box2 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box2 p {
    margin: 0; 
    padding: 0;
}

●表示

タイトルだよ
ここに内容を書くよ～～。

●HTMLの指定で色や線種を変える方法。

<div class="box2" style="border:solid 1px #ff0000;">
<span class="box-title">タイトルだよ</span>
ここに内容を書くよ～～。
</div>

●表示

タイトルだよ
ここに内容を書くよ～～。

（３）シンプル白黒の影付き枠

●埋め込むHTML

<div class="box3">
    <p>ここに内容を書くよ。</p>
</div>

●追加CSS

.box3{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #5d627b;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.box3 p {
    margin: 0; 
    padding: 0;
}

●表示

ここに内容を書くよ。

（４）ピンク点線角丸枠

●埋め込むHTML

<div class="box4">
    <p>ここに書き込むよ。</p>
</div>

●追加CSS

.box4 {
    padding: 0.2em 0.5em;
    margin: 2em 0;
    color: #565656;
    background: #ffeaea;
    box-shadow: 0px 0px 0px 10px #ffeaea;
    border: dashed 2px #ffc3c3;
    border-radius: 8px;
}
.box4 p {
    margin: 0; 
    padding: 0;
}

●表示

ここに書き込むよ。

（５）オレンジ左太線

●埋め込みHTML

<div class="box5">
    <p>ここに書くよ。</p>
</div>

●追加CSS

.box5 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #232323;
    background: #fff8e8;
    border-left: solid 10px #ffc06e;
}
.box5 p {
    margin: 0; 
    padding: 0;
}

●表示

ここに書くよ。

自分用としてピックアップしてみました。
参考にさせてもらったページは、サルワカ様のページです。
この方のページは、すごくまとめられており素晴らしいです。Wordpressの参考書代わりに使わせてもらっています。

枠関係のサルワカ様のホームページリンク