引用文の装飾 blockquote

2019年11月15日

大好きなスティーブジョブズの名言を綴ってみたくて、こんなページを作ってみた

引用符をつけるためにblockquoteを使った引用文の表示を取り入れてみました

「もし今日が人生最後の日だとしたら、今日やろうとしていることは本当にやりたいことなのか？」
この問いに「NO」が何日も続くのなら、なにかを変えなくてはならない。

“If today were the last day of my life, would I want to do what I am about to do today?"
And whenever the answer has been “No" for too many days in a row,
I know I need to change something.
引用：Steve Jobs

ハングリーであれ。愚か者であれ。誰もやりたがらないことに成功のヒントが隠れている
Stay Hungry. Stay Foolish.　Thehint of success is hidden in the fact that no one wants to do it.
引用：Steve Jobs

結果の平等はともかく、挑戦する機会というものは誰にでも平等であると強く信じている。

I’m a very big believer in equal opportunity as opposed to equal outcome.
引用：Steve Jobs

未来を見て、点を結ぶことはできない。過去を振り返って点を結ぶだけだ。だから、
いつかどうにかして点は結ばれると信じなければならない。

You can’t connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future.

引用：Steve Jobs

墓場で一番の金持ちになることは私には重要ではない。夜眠るとき、我々は素晴らしいことをしたと言えること、それが重要だ。

Being the richest man in the cemetery doesn’t matter to me… Going to bed at night saying we’ve done something wonderful… that’s what matters to me./p>
引用：Steve Jobs

一番大切なのは、心の声や直感に従う勇気を持つこと。
And most important, have the courage to follow your heart and intuition.
引用：Steve Jobs

少しだけアレンジしてますが、そこは大目にみてください

まるまるコピペさせていただきました
【CSSコピペOK】おしゃれな引用blockquoteデザイン10選

<blockquote cite=”引用元URL”>
<p>引用文</p>
<cite>引用：<a href=”引用元URL”>引用元の記事タイトル</a></cite>
</blockquote>

引用元のURLをつけるとして、別ウィンドウで開く場合はURLのあとに「 rel="noopener" target="_blank"」を付けた方が良いと思います
この分もADDQuicktagでテキストエディタにボタンを追加しました
タグの閉じ忘れを防ぐために開始タグに閉めの</blockquote>までを入れて終了タグは空欄にしました

blockquote {
position: relative;
background-color: #f9fbf9;
border-top: 1px solid #B7D7B7;
border-bottom: 1px solid #B7D7B7;
box-shadow: 0 0 0 10px #f9fbf9;
padding: 20px;
}
blockquote p {
margin-top: 20px;
}
blockquote p::before {
font-family:’FontAwesome’;
content:’\f10d’;
font-size: 24px;
color: #B7D7B7;
position: absolute;
top: 10px;
left: 50%;
}
blockquote cite {
display: block;
font-size: 0.8rem;
text-align: right;
color: #B7D7B7;
}

もうひとつ、気になっているデザインが「Copypet」さんの吹き出し風でアイコンがついてるやつ
Copypetさんの「わかりやすい引用符（blockquote）デザイン[14種]」

CSSをそのままで使ったらシャドーの色が変な色になってしまったので
線や背景色、シャドーの色を同系色にして実装、こんな仕上がりになりました

引用符のマークが２つもついてる！！先に実装したものと被ってしまったようです
線上にあるピンクのが基本のアイコンで中央にも出てしまうので左上のアイコンを削除しました
違ったデザインで複数設置する場合はすべての「cp_quote」の後ろに番号を付って区別します

<div class="cp_quote"> 　/*cp_quoteに番号を付る

<blockquote>
There are two means of refuge from the miseries of life: music and cats.
</blockquote>
<div class="author">
<p>Albert Schweitzer<span>French-German theologian</span></p>
<img src="img.jpg" />
</div>
</div>

*, *:before, *:after {
	font-family: 'FontAwesome';
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_quote {                         /*cp_quoteに番号を付る
	position: relative;
	width: 90%;
	margin: 2em auto;
}
/* 引用 */
.cp_quote blockquote {               /*cp_quoteに番号を付る
	position: relative;
	margin: 0;
	padding: 1.5em 2em;
	border-radius: 0.3em;
	background: #FCE4EC;
	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
}
/* アイコン */   　　　　　　　　　　/*以下アイコン部分は削除しました
.cp_quote blockquote::before {
	font-size: 2.5em;
	line-height: 0;
	position: absolute;
	top: 0;
	left: 0.3em;
	content: '\f10d';
	color: #e91e63;
	filter: drop-shadow(3px 2px 0px #FCE4EC);
}
/* 吹き出しの▼ */
.cp_quote blockquote::after {         /*p_quoteに番号を付る
	position: absolute;
	right: 1em;
	bottom: -8px;
	width: 0;
	height: 0;
	content: '';
	border-width: 10px 10px 0 10px;
	border-style: solid;
	border-color: #FCE4EC transparent transparent transparent;  /*色を#d6e9caに変更
	filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.3));
}
/* 引用元名 */
.cp_quote .author {                  /*cp_quoteに番号を付る
	position: relative;
	top: 15px;
	right: 0;
	width: 100%;
	text-align: right;
}
.cp_quote .author img {               /*cp_quoteに番号を付る
	display: inline-block;
	width: 45px;
	height: 45px;
	border: 3px solid #e91e63;　　　/*色を#3cb371に変更
	border-radius: 50%;
	object-fit: cover;
	filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.3));
}
.cp_quote .author p {                /*cp_quoteに番号を付る
	font-size: 0.8em;
	font-weight: bold;
	position: absolute;
	top: -0.8em;
	right: 60px;
	width: calc(100% - 60px - 0.3em);
	padding: 0.3em;
}
.cp_quote .author p span {            /*cp_quoteに番号を付る
	font-size: 0.6em;
	font-weight: normal;
	font-style: italic;
	display: block;
	padding: 0.3em;
	border-top: 2px solid #e91e63;　　/*色を#3cb371に変更
}

と、こんな感じになりました