引用文の装飾

Google Material Symbolsで引用文を装飾

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur error totam porro maiores at! Sit, amet, commodi distinctio eius error quia et quam sint quas aspernatur fuga! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

引用：引用元の記事タイトル
ソースはここをクリック

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>

<body>
<blockquote class="quote01" cite="引用元URL">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit・・・</p>
	<cite>引用：<a href="引用元URL">引用元の記事タイトル</a></cite>
</blockquote>
</body>


blockquote.quote01 {
	position: relative;
	margin: 0;
	padding: 3rem 6rem 3rem 7rem;
	border: 1px solid #ccc;
	border-radius: 1rem;
	}
blockquote.quote01::before,
blockquote.quote01::after {
	display: block;
	position: absolute;
	width: 50px;
	height: 50px;
	font-family: "Material Symbols Outlined";
	content: "\e244";
	font-size: 50px;
	white-space: nowrap;
	word-wrap: normal;
	color: #ccc;
	}
blockquote.quote01::before {
	transform: rotate(-180deg);
	top: 20px;
	left: 10px;
	}
blockquote.quote01::after {
	right: 10px;
	bottom: 20px;
	}

cite {
	display: block;
	text-align: right;
	font-size: 15px;
	padding: 1rem;
	}

CLOSE

Font Awesome CDN版 v.4で引用文を装飾 1

CSSに記述する

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur error totam porro maiores at! Sit, amet, commodi distinctio eius error quia et quam sint quas aspernatur fuga! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

引用：引用元の記事タイトル
ソースはここをクリック

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
<blockquote class="quote02" cite="引用元URL">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit・・・</p>
	<cite>引用：<a href="引用元URL">引用元の記事タイトル</a></cite>
</blockquote>
</body>


blockquote.quote02 {
	position: relative;
	margin: 0;
	padding: 3rem 6rem 5rem 7rem;
	border: 1px solid #ccc;
	}
blockquote.quote02::before,
blockquote.quote02::after {
	display: block;
	position: absolute;
	width: 50px;
	height: 50px;
	font-family: "fontawesome";
	content: "\f10d";
	font-size: 40px;
	white-space: nowrap;
	word-wrap: normal;
	color: #ddd;
	}
blockquote.quote02::before {
	top: .5rem;
	left: 1.5rem;
	}
blockquote.quote02::after {
	transform: rotate(-180deg);
	right: 1rem;
	bottom: 1rem;
	}

cite {
	display: block;
	text-align: right;
	font-size: 15px;
	padding: 1rem;
	}

CLOSE

Font Awesome CDN版 v.4で引用文を装飾 2

引用符を直接記述する

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur error totam porro maiores at! Sit, amet, commodi distinctio eius error quia et quam sint quas aspernatur fuga! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

ソースはここをクリック

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<blockquote class="quoteBox"><i class="fa fa-quote-left fa-2x pull-left"></i>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit..........
	</p>
<i class="fa fa-quote-right fa-2x pull-right"></i></blockquote>


 /*すべて必須ではありません。お好みで。*/
.fa-quote-left:before,
.fa-quote-right:before {
	color:#ccc;
	}
	.quoteBox {
		overflow: hidden;
		padding:2px 4px;
		border:1px #ccc solid;
		}
	.quoteBox p {
		margin: 2em 1em .5em;
		}

CLOSE

Font Awesome CDN版 v.5で引用文を装飾

引用符を直接記述する

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur error totam porro maiores at! Sit, amet, commodi distinctio eius error quia et quam sint quas aspernatur fuga!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. amet, commodi distinctio eius error quia et quam sint quas aspernatur fuga!

ソースはここをクリック

<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
</head>

	<blockquote class="quoteBox"><i class="fas fa-quote-left fa-2x pull-left"></i>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit..........
		</p>
	<i class="fas fa-quote-right fa-2x fa-pull-right"></i></blockquote>


 /*すべて必須ではありません。お好みで。*/
.fa-quote-left:before,
.fa-quote-right:before {
	color:#ccc;
	}
	.quoteBox {
		overflow: hidden;
		padding:2px 4px;
		border:1px #ccc solid;
		}
	.quoteBox p {
		margin: 1em 1em .5em;
		}

CLOSE


TOP