ワードプレス 囲み枠・ボックス
コピペで簡単設置
記事の見栄えがよくなりそうな
囲み枠・ボックスを紹介します。
コピペで完結
初心者には嬉しい優れものです。
ワードプレスで囲み枠・ボックスをコピペで設置(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!色や太さをお好みでカスタマイズして使って下さいね。新作『黒板風(チョーク付)』と『ホワイトボード風(マーカー付)』自分で作っておいてナンですが...
ワードプレスで囲み枠・ボックスをコピペで設置(HTML編)
HTMLで囲み枠・ボックスを
コピペで設置する方法。
二重線の枠に入れる(角丸つき) -背景色付き
参考にさせて頂いたサイト

枠をつける - HTMLのお勉強
4.プチ☆カスタマイズ
おわりに
参考にさせて頂いたサイト様、
ありがとうございます。
超初心者向けの内容ですが、同じような事で困ってる方の参考になれば幸いです。
※超初心者なので、コーディング内容等の細かい事は分かりません。
色とか簡単なもの以外は、すべてコピペで行っています。
コメント