引用文のスタイル、もっと可愛くてもいいんじゃない?【CSSデザインサンプル】

2016-03-30Web制作

サイトURLが変更になりました!
https://0edition.net/
お手数ですがブックマーク・RSSの再登録お願いします。

こんにちは、とみーです。

ブログを書いていると他のサイトや本の文章を引用するときってありますよね。
そんなときはblockquoteタグで囲います。

ご使用のテーマによって表示デザインは様々ですが、大体シンプル。
いや、シンプルも悪くはないのですが、もっと可愛いものがあってもいいんじゃないかな? と思ったので、需要があるのかどうかは分かりませんが作ってみました。

作ってみたと言っても画像は配布サイトからお借りして、私はただCSSを組んだだけですが・・・。最近の悩みはイラストスキルがないことです。

ところで引用って引用符必須じゃないですよね。(あまりにも引用符を使ったデザインばかりなので作った後に不安になってきた)

スポンサーリンク

表示サンプル

20160330_01

スタイルシート

Flower Popに合うよう作成しましたので、Simplicity2で動作確認してます。他のテーマだと表示が崩れるかもしれません。

下記のコードをstyle.cssとmobile.cssにコピペしてください。

/*************************************************************************************************************************
 引用
*************************************************************************************************************************/
blockquote{
	background: none;
	margin: 0px;
	margin-top: 100px;
	padding: 10px;
	border: 2px solid #ce9e6d;
	border-radius: 10px;
	position: relative;
	z-index: 0;
}

blockquote:before{
	line-height: inherit;
	font-family: inherit;
	content: '引用';
	color: #FFF;
	font-size: 20px;
	position: absolute;
	top: -37px;
	left: 20px;
	display: inline-block;
	padding: 5px 20px;
	background-color: #ce9e6d;
	border-radius: 10px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

blockquote:after{
	content: '';
	position: absolute;
	top: -84px;
	left: auto;
	right: -10px;
	display: inline-block;
	width: 130px;
	height:85px;
	background-image: url(画像URL);
	background-repeat: no-repeat;
	z-index: 99;
}

 

blockquoteタグではなく他の要素(divとか)で使いたい方はこちらをstyle.cssにコピペしてください。
引用のところが icon-exclamation-circle に変わります。(要:アイコンフォント)

<div class="kotori-frame">ここに内容</div>

.kotori-frame{
	margin-top: 100px;
	padding: 10px;
	border: 2px solid #ce9e6d;
	border-radius: 10px;
	position: relative;
	z-index: 0;
}

.kotori-frame:before{
	font-family: 'FontAwesome';
	content: '\f06a';
	color: #FFF;
	font-size: 20px;
	position: absolute;
	top: -37px;
	left: 20px;
	display: inline-block;
	padding: 5px 20px;
	background-color: #ce9e6d;
	border-radius: 10px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.kotori-frame:after{
	content: '';
	position: absolute;
	top: -84px;
	left: auto;
	right: -10px;
	display: inline-block;
	width: 130px;
	height:85px;
	background-image: url(画像URL);
	background-repeat: no-repeat;
	z-index: 99;
}

この鳥の画像を任意のフォルダにアップロードし、コードの画像URLという箇所を修正してください。

kotori

icon-picture-o by GAHAG

あとがき

可愛かったので何となく鳥の画像で作っちゃいましたが、自分のサイトに合った画像を使ってみてくださいね。
その場合は:before/:afterのtop:の数値(画像が現在より大きくなればマイナス方向、小さくなればプラス方向に修正)と、:afterのwidth:/height:の数値(それぞれ画像の幅と高さ)を変更する必要があります。

こちらの記事もおすすめです