ワードプレス 囲み枠･ボックス
コピペで簡単設置
記事の見栄えがよくなりそうな
囲み枠･ボックスを紹介します。
コピペで完結
初心者には嬉しい優れものです。
ワードプレスで囲み枠･ボックスをコピペで設置（css編）
cssで囲み枠･ボックスを
コピペで設置する方法。
黒板風囲み枠
ワードプレスで
囲み枠･ボックス
【黒板風囲み枠】
黒板風の囲み枠になります。
以下のコードをcssにコピペするだけで、
上図のような黒板風の囲み枠が初心者でも
簡単に設置できます。
/* 黒板風囲み枠 */
.kokuban {
position: relative;
margin: 2em auto;
padding: 1em;
width: 90%; /* ボックス幅 */
background: #006633; /* ボックス背景色 */
color: #fff; /* 文章色 */
border: 8px solid #b2771f; /* 枠線 */
border-radius: 3px; /* 角の丸み */
box-shadow: 0 0 5px #333, 0 0 5px #555 inset;
}
.kokuban::before,
.kokuban::after {
position: absolute;
content: '';
bottom: 0;
}
.kokuban::before {
width: 20px;
right: 10px;
border: solid 3px #ffff00; /*チョーク（黄色）*/
border-radius: 3px 2px 0 2px;
}
.kokuban::after {
width: 15px;
right: 45px;
border: solid 3px #fff; /*チョーク（白） */
border-radius: 8px 5px 2px 5px;
}
cssをコピーする場所は、
【外観】→【テーマエディター】→
【スタイルシート】にコピー。
※レスポンシブデザイン用の
cssの下には貼らない事。
スタイルシートに追加する場合は、
直前の状態をメモ帳などにコピーして
バックアップを取っておくことをおすすめします。
または、記事入力の一番下にある
【カスタムcss】にコピー。
私は、基本的に使う時だけ使用出来ればいいので、【カスタムcss】にコピーしています。
記事中の記述は、HTML形式で記述します。
その他にも・・・
黒板のフレームをスチール風に
黒板の色をピンクに
【タイトル】タイトル枠付きテキスト
【タイトル】タイトル枠 中央揃え
ホワイドボード風囲み枠
ワードプレスで
囲み枠･ボックス
【ホワイドボード風囲み枠】
参考にさせて頂いたサイト
【CSS】シンプルな囲み枠（ボックス）コピペですぐ使える
飾り枠を使って文中や文末に関連記事・まとめ記事、Pickupなど、さり気なく目立たせたい！シンプルで無難な囲み枠・囲い枠（ボックス）を紹介します。CSS・HTMLをコピペでOK！色や太さをお好みでカスタマイズして使って下さいね。新作『黒板風（チョーク付）』と『ホワイトボード風（マーカー付）』自分で作っておいてナンですが...
love-wave.com
ワードプレスで囲み枠･ボックスをコピペで設置（HTML編）
HTMLで囲み枠･ボックスを
コピペで設置する方法。
二重線の枠に入れる（角丸つき） -背景色付き
参考にさせて頂いたサイト
枠をつける - HTMLのお勉強
4.プチ☆カスタマイズ
jim-do-it-yourself.jimdofree.com
おわりに
参考にさせて頂いたサイト様、
ありがとうございます。
超初心者向けの内容ですが、同じような事で困ってる方の参考になれば幸いです。
※超初心者なので、コーディング内容等の細かい事は分かりません。
色とか簡単なもの以外は、すべてコピペで行っています。
コメント