非引用(≠blockquote)に、”背景色”をつけるCSS

引用(blockquote)じゃないけど、”背景色”をつけたい!

そんなときがありませんか?
私は、classだけを使うCSS追記を作っています。

緑色のプレーンな背景色

緑色のプレーンな背景色のサンプルです。

まず、適当にわかりやすいクラス名をつけます。
今回は緑の背景なのでbackground-greenとします。

緑色背景のCSS

.background-green {
	background:#ccffe5;
	padding: 1rem;
}

background:#ccffe5;の部分を原色大辞典さんなどを見ながら好みの色に変えるのもよろしいかと。

padding: 1rem;は、内側の余白で、上下左右にそれぞれ16px(=1rem)ずつ入るようになっていますので、これもお好みで変更くださいませ。

上記を外観→CSS追加にコピペして保存します。

緑色背景のCSSを追加する
緑色背景のCSSを追加する

後は、投稿の際にHTMLで先ほど書いたクラスを指定します。span、p、divのどれでも使えます。

span要素を使う場合

span要素を使った、緑色の背景色サンプルです。

投稿ページのHTMLは下記のように書きます。

<span class="background-green">
span要素を使った、緑色の背景色サンプルです。</span>

文字の部分だけ、背景色をつけたい場合には、span要素が便利です。span要素だけしか利用しない場合は、paddingを削除した方がが良さそうですね。

p要素を使う場合

p要素を使った、緑色の背景色サンプルです。

投稿ページのHTMLは下記のように書きます。

<p class="background-green">
p要素を使った、緑色の背景色サンプルです。</p>

段落ごと背景色を変えたいときは、p要素を使います。

div要素を使う場合

(段落1)緑色の背景色サンプルです。

(段落2)緑色の背景色サンプルです。

(段落3)緑色の背景色サンプルです。

投稿ページのHTMLは下記のように書きます。

<div class="background-green">
<p>(段落1)緑色の背景色サンプルです。</p>
<p>(段落2)緑色の背景色サンプルです。</p>
<p>(段落3)緑色の背景色サンプルです。</p></div>

いくつかの段落含んだエリアの背景色をまとめて変えたい場合は、div要素を使います。

背景色+枠線(点線)をつけたい場合

点線付きの青色背景のサンプルです。

今度は、background-blue-dottedという名前にしてみました。

.background-blue-dotted {
	background:#d6eaff;
	border: 4px dotted #7fbfff;
	padding: 1rem;
}

投稿ページのHTMLは下記のように書きます。

<p class="background-blue-dotted">
点線付きの青色背景のサンプルです。</p>

え?、かわいくない??

時間がある時に他のデザインも考えます…

引用(blockquote)のサンプル

コードの書き方は関連記事「“Blockquote要素”をおしゃれに装飾」をご覧くださいませ。

Wikipedia「老子道徳経、形式」より引用

『老子道徳経』は5千数百字(伝本によって若干の違いがある)からなる。全体は上下2篇に分かれ、上篇(道経)は「道の道とすべきは常の道に非ず(道可道、非常道)」、下篇(徳経)は「上徳は徳とせず、是を以て徳有り(上徳不徳、是以有徳)」で始まる。『道徳経』の書名は上下篇の最初の文句のうちからもっとも重要な字をとったもの。ただし馬王堆帛書では徳経が道経より前に来ている。

違いはズバリ"マークです。

背景色がついていると、引用みたいで読者が混乱するかな~っと思ったりもするのですが、当ブログでは、引用文には引用開始符をつけています。

投稿者: のろのろ

ブログのカスタマイズをしては、備忘録を書いています。2017年4月にワードプレスデビューし、試行錯誤しながら寝落ちする感じのへなちょこブロガーです。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください