Simplicityの引用部分”blockquote”をcssでお洒落にカスタマイズ。コピペokのテンプレート

20160307-blockquote_imageSimplicity
Simplicityの引用部分”blockquote”をcssでお洒落にカスタマイズ。コピペokのテンプレート -アイキャッチ画像
2016.03.07
この記事は約21分で読めます。

Simplicityの引用部分”blockquote”をcssでお洒落にカスタマイズ。
コピペokのテンプレートを12種置いています。

Simplicityの引用”blockquote”部分、シックで素敵ですよね。
simplicity-blockquote
今回はこの引用”blockquote”部分を変更する方法です。(折角の素敵なデザインなのに・・・💦)

引用のデザインってあまり変更している方を見かけないので、需要があるかどうか疑問はありますが、
別のサイトで「あーでもない、こーでもない」と遊んでいる内に
色々なデザインが出来ましたので、置いておきます。

もしも気に入ったものが御座いましたらご利用下さい😊

因みにこのサイト「みてみた」では、
以下の様に両端にdotを入れてスタンプ(切手)の端っこ風にしています。

因みにこのサイト「みてみた」では、こんな感じで両端にdotを入れてスタンプ(切手)の端っこ風にしています。

blockquote {
	color: #2098a8;
	font-size: 13px;
	background-color: #EBF6F7;
	border-left-width: 8px;
	border-right-width: 8px;
	border-left-style: dotted;
	border-right-style: dotted;
}

blockquote:before {
	color: #2098a8;
	content: "“";
	font-family: serif;
	font-size: 600%;
	left: 0;
	line-height: 1em;
	position: absolute;
	top: 0;
}

blockquote:after {
	bottom: 0;
	color: #2098a8;
	content: "”";
	font-family: serif;
	font-size: 600%;
	line-height: 0;
	position: absolute;
	right: 0;
	bottom: -16px;
}

同じ感じにされたい場合は、色【#2098a8(濃色)と#EBF6F7(薄色)】の
指定部分をお好みのカラーに書き変えるだけです。

このサイトでは主に色をチェンジしただけなのですが、
サイト全体で使用しているテーマーカラーなので、纏まった感があって自己満足しています😅

では、では、幾つか書いていきます。貴方(貴女)のお好みが見つかりますように。

この作業に必要なファイル

📋 この作業に必要なファイルは、
Simplicity2の子テーマのスタイルシート【Simplicity child2 (style.css)】のみです。

ダッシュボード⇒テーマの編集画面で編集するか、
TJ Custom CSSの様なCSS系プラグインを使用している方や、
jetpackのCSSスタイルシートエディターを使用している方はそちらに書いてもOK。

blockquote-setting

因みに以下に貼り付けている画像はカスタマイザーの設定で「引用部分の幅を広げる」のチェックを外している状態でのキャプチャーです。

ここの設定はデザインそのものに影響はありません。

実際の表示は、DEMOサイトの方でご覧いただけます。
https://wp-demo.39ma.net/post-28/

サンプル1*引用の背景だけを変更する

背景ブラック#000000指定です。文字色は#fcf7f7です。
引用符「“”」はデフォルトのままなので一番シンプルに変更しやすいと思います。

blockquote-black

/*引用背景ブラック*/
blockquote {
  background-color: #000000;
  color: #fcf7f7;
}
DEMOSITEで実際の表示をみてみる

 

サンプル2*キーボードのスペースキー風 デザイン

キーボードのスペースキー風のデザインを作ってみました。
こちらも引用符「“”」をデフォルトのままで太字にして活かしています。
因みにこの引用デザイン使用の場合は改行等の行間スペースが必要です。 blockquote-keyboard

/*引用-キーボードのスペースキー風のデザイン*/
blockquote {
  background-color: #fafaf0;
  border-top-style: outset;
  border-top-width: 15px;
  border-top-color: #f0f0ed;
  border-left-style: outset;
  border-left-width: 31px;
  border-left-color: #dbdbd0;
  border-bottom-color: #c2c2b8;
  border-bottom-width: 18px;
  border-bottom-style: inset;
  border-right-color: #dbdbd0;
  border-right-width: 31px;
  border-right-style: inset;
  color: #8f8785;
  line-height: 3px;
  font-weight: bold;
}
DEMOSITEで実際の表示をみてみる

 

サンプル3*キーボードスペースキー風デザインに変化球!チョコレート風 デザイン

色の指定を変えればチョコレートっぽくする事も出来そうです。
チョコレート風・・・なのですが、それっぽく見えるかしら???　超、ブロックチョコじゃん🍫

因みにこの引用デザイン使用の場合は改行等の行間スペースが必要です。
<p>タグで行間スペースを入れても以下のような見え方をします。 blockquote-chocolate

/*引用”blockquote”部分　チョコレート風のデザイン*/
blockquote {
  background-color: #572619;
  border-top-style: outset;
  border-top-width: 15px;
  border-top-color: #5c1502;
  border-left-style: inset;
  border-left-width: 31px;
  border-left-color: #572619;
  border-bottom-color: #572619;
  border-bottom-width: 18px;
  border-bottom-style: outset;
  border-right-color: #5c1502;
  border-right-width: 31px;
  border-right-style: inset;
  color: #e647be;
  line-height: 3px;
  font-weight: bold;
}
DEMOSITEで実際の表示をみてみる

 

サンプル4*スタンプ(切手枠)風　ピンク

このサイトで行っている感じですが、両サイドだけでなく、四方を”dotted”で指定する事で、
スタンプ(切手の端)の様な感じになります。

“:before”,”:after”の擬似要素で、引用符が表示されていますので、
その文字色を#FFADDEに指定、変更しただけです。
blockquote-pink

/*引用スタンプ風ピンク*/
blockquote {
  background-color: #fae1f3;
  border-style: dotted;
  border-color: #ffffff;
  border-width: 7px;
}

blockquote:before {
	color: #FFADDE;
	content: "“";
	font-family: serif;
	font-size: 600%;
	left: 0;
	line-height: 1em;
	position: absolute;
	top: 0;
}

blockquote:after {
	bottom: 0;
	color: #FFADDE;
	content: "”";
	font-family: serif;
	font-size: 600%;
	line-height: 0;
	position: absolute;
	right: 0;
	bottom: -16px;
}
DEMOSITEで実際の表示をみてみる

 

サンプル5*破線枠で優しい水色

全体的にふんわりとした優しい水色にしたのですが、
文字色は”#b1d1f5″でなくってもう少し濃い色の方が良いかも知れません。

四辺のスタイルを破線”dashed:”で表示させています。
引用符「“”」のfont-size600%を700%とか、もう少し大きくすると可愛さがますます増すかも(笑;
blockquote-dashed

/*引用優しい水色*/
blockquote {
  background-color: #f0f5fa;
  border-width: 3px;
  border-style: dashed;
  border-color: #dce9f7;
  color: #b1d1f5;
  font-size: 15px;
}

blockquote:before {
	color: #b1d1f5;
	content: "“";
	font-family: serif;
	font-size: 600%;
	left: 0;
	line-height: 1em;
	position: absolute;
	top: 0;
}

blockquote:after {
	bottom: 0;
	color: #b1d1f5;
	content: "”";
	font-family: serif;
	font-size: 600%;
	line-height: 0;
	position: absolute;
	right: 0;
	bottom: -16px;
}
DEMOSITEで実際の表示をみてみる

 

サンプル6*枠を二重線で文字センタリング

blockquote-beige

/*引用二重線優しい色で文字センタリング*/
blockquote {
  background-color: #faf5e8;
  border-width: 8px;
  border-style: double;
  border-color: #f7efde;
  color: #c9ad71;
  font-size: 13px;
  text-align: center;
}

blockquote:before {
	color: #c9ad71;
	content: "“";
	font-family: serif;
	font-size: 600%;
	left: 0;
	line-height: 1em;
	position: absolute;
	top: 0;
}

blockquote:after {
	bottom: 0;
	color: #c9ad71;
	content: "”";
	font-family: serif;
	font-size: 600%;
	line-height: 0;
	position: absolute;
	right: 0;
	bottom: -16px;
}
DEMOSITEで実際の表示をみてみる

 

サンプル7*スクロール＆影付き

引用部分にスクロールって無いと思うんですけど、デザインって事で😓 blockquote-scroll

/*スクロール付き＆影付き*/
blockquote {
  overflow: scroll;
  overflow-x: scroll;
  overflow-y: scroll;
  background-color: #ffffff;
  box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
  border-top-width: 2px;
  border-top-style: dashed;
  border-top-color: #f7f2f2;
  border-left-width: 2px;
  border-left-style: dashed;
  border-left-color: #f7f2f2;
  font-size: 12px;
  height: 47px;
}

blockquote:after {
	bottom: 0;
	color: #ffffff;
	content: "";
	font-family: serif;
	font-size: 600%;
	line-height: 0;
	position: absolute;
	right: 0;
	bottom: -16px;
}
DEMOSITEで実際の表示をみてみる

 

サンプル8*黒板風

引用符を「“”」でなく、「>>」で表示しました。
よーく見ると、黒板ではないのですが、「黒板風」って事で。
文字はセンタリングしています。 blockquote-board

/*黒板風*/
blockquote {
  border-width: 5px;
  border-color: #573310;
  border-style: ridge;
  background-color: #1a5c09;
  color: #fcfcfc;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

blockquote:before {
	color: #fce565;
	content: ">>";
	font-family: serif;
	font-size: 300%;
	left: 38px;
	line-height: 1em;
	position: absolute;
	top: 28px;
}

blockquote:after {
	bottom: 0;
	color: #fcfcfc;
	content: "/ ";
	font-family: serif;
	font-size: 200%;
	line-height: 0;
	position: absolute;
	bottom: 14px;
}
DEMOSITEで実際の表示をみてみる

 

サンプル9*背景に画像を使ってみる

背景に画像を指定すると、ご自身の好みにより近いお洒落な感じにする事が簡単に出来ると思います。
引用符「“”」のfont-sizeを100pxにしています。影はぼかさない方がこのスタイルには良いかと。 blockquote-background image

/*背景に画像を使って*/
blockquote {
  background-color: #ffffff;
  box-shadow: 10px 10px rgba(0,0,0,0.2);
  border-top-width: 1px;
  border-top-style: double;
  border-top-color: #f7f2f2;
  border-left-width: 0px;
  font-size: 14px;
  border-bottom-width: 1px;
  border-bottom-style: double;
  border-bottom-color: #f7f2f2;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #f7f2f2;
  color: #4d4422;
  background-image: url("http://ここに画像のアドレス");
  text-align: center;
}

blockquote:before {
	color: #cccccc;
	content: "“";
	font-family: serif;
	font-size: 100px;
	left: 0;
	line-height: 1em;
	position: absolute;
	top: 0;
}

blockquote:after {
	bottom: 0;
	color: #cccccc;
	content: "”";
	font-family: serif;
	font-size: 100px;
	line-height: 0;
	position: absolute;
	right: 0;
	bottom: -16px;
}
DEMOSITEで実際の表示をみてみる

 

サンプル10*付箋風＆影付き、赤

よくある感じのデザインに暈しの影を付けてみました。
文字色とラインを同じカラーに。文字の大きさは12pxで小さめに。
(大きくする時は、”font-size: 12px”の部分を変更します。) blockquote-label1

/*付箋風＆影付き、赤*/
blockquote {
  background-color: #ffffff;
  box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
  border-top-width: 1px;
  border-top-style: double;
  border-top-color: #f7f2f2;
  border-left-width: 21px;
  border-left-style: double;
  border-left-color: #d41515;
  font-size: 12px;
  border-bottom-width: 1px;
  border-bottom-style: double;
  border-bottom-color: #f7f2f2;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #f7f2f2;
  color: #d41515;
}

blockquote:before {
	color: #f7f2f2;
	content: "“";
	font-family: serif;
	font-size: 600%;
	left: 0;
	line-height: 1em;
	position: absolute;
	top: 0;
}

blockquote:after {
	bottom: 0;
	color: #f7f2f2;
	content: "”";
	font-family: serif;
	font-size: 600%;
	line-height: 0;
	position: absolute;
	right: 0;
	bottom: -16px;
}
DEMOSITEで実際の表示をみてみる

 

サンプル11*付箋風＆太字、影付き、青

今度は、grooveで付箋風にしました。これもよくある感じですね。文字は太字で15pxに。blockquote-label2

/*付箋風＆太字、影付き、青*/
blockquote {
  background-color: #ffffff;
  box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
  border-top-width: 1px;
  border-top-style: double;
  border-top-color: #f7f2f2;
  border-left-width: 21px;
  border-left-style: groove;
  border-left-color: #1320d4;
  font-size: 15px;
  border-bottom-width: 1px;
  border-bottom-style: double;
  border-bottom-color: #f7f2f2;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #f7f2f2;
  color: #1320d4;
  font-weight: bold;
}
DEMOSITEで実際の表示をみてみる

 

サンプル12*もういっちょ!付箋風のおまけ🎯

見出しのデザインを置いてある有名なサイトさんの真似で、所謂アレっぽい奴です。
黒も赤も書いてみたけど。。。掲載を躊躇いました。とさ。一番分かり辛いのだけ載せてみた😅 blockquote-label3

/*付箋風・おまけ*/
blockquote {
  background-color: #f0ebeb;
  box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
  border-top-width: 1px;
  border-top-style: double;
  border-top-color: #bdb6b6;
  border-left-width: 33px;
  border-left-style: double;
  border-left-color: #bdb6b6;
  font-size: 15px;
  border-bottom-width: 1px;
  border-bottom-style: double;
  border-bottom-color: #bdb6b6;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #bdb6b6;
  color: #b85c66;
}
DEMOSITEで実際の表示をみてみる


他にもイロイロと書いているのですが、長くなってきたのでまた気が向いた時にでも。

サンプルのソースを見比べて頂くとお分かり頂けると思いますが、特に難しい指定はしていないので、
色、線の種類等々の組み合わせで色んなものが出来ます。

ブログカードなんかと併せると素敵ですよ。

ブログカードのデザインも色々と書いているので、また次の機会に。😌

ご閲覧ありがとうございます。

お粗末でした😌

コメント

タイトルとURLをコピーしました