【CSS】可愛い背景(囲み枠)を導入する方法




ブログを書くときにちょっとした強調やポイントの説明をするときに、囲み枠があると便利ですね。今回はスタイルシートに追記するだけで使えるようになる可愛い囲み枠を紹介します。

囲み枠を導入する

囲み枠を導入するときにはWordPressでしたら「外観」→「テーマの編集」から入るCSS(スタイルシート)への追加で導入できます。スタイルシートを修正するときは子テーマで行うとアップデートされたときに上書きされることがないのでお勧めです。

背景を黒板風の枠にして文字入力したい

以下のコードを「style.css」に追加してください。

/* 黒板風枠 */
.blackboard {
 color: #fff;
 background-color: #01261e;
 margin: 10px 0 10px 0;
 padding: 15px;
 border: 8px solid #651d04;
 border-radius: 3px;
 box-shadow: 2px 2px 4px #666, 2px 2px 2px #111 inset;
 text-shadow: 0px 0px 2px #000;
 line-height: 1.9;

呼び出しは、記事投稿画面でテキスト入力とし、

<div class=”blackboard”>入力したいテキストを入力しましょう<div>

以上です。

ちなみに出来上がりは、以下のようになります。

 

黒板があるというだけで、先生に怒られたことを思い出します。にじまるが先生に怒られたトップ3は。

  • 寒い冬に水で手を洗うと、手が熱くなることを友達に教えて授業妨害
  • 授業参観のときにコンパスを忘れた
  • 習字で使う筆を自宅でおろしておいた(なぜ!?)

以下のサイトを使うと、CSS修正したときにどのように表示されるか確認出来ます。間違うと正しく表示されなくなるなど、問題が起こるので初心者の方は是非使ってみてね。

https://jsfiddle.net/











コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です