【CSS】blockquoteタグのデザイン

HTMLとCSSでデザインされた引用（<blockquote>）のサンプルです。ホームページ作りにご利用ください。

基本HTML

<blockquote cite="引用元URL">
  <p>ここに引用する文を書きます。</p>
  <p>比較的長いテキストを段落ごと引用する際に使用されます。</p>
  <cite>引用元：<a href="引用元URL">ページタイトル</a></cite>
</blockquote>

基本になるHTMLです。

Font Awesomeがアカウント登録制になったようです。下のサイトを参考にしてチャレンジしてみてください。

Webアイコンフォントの【Font Awesome】がアカウント登録必須になったので、使い方をおさらいしました

管理画面内の貼り付ける場所

CSS
管理画面のHEAD間編集かCSS編集へコピペしてください。
HTML
管理画面の編集枠へコピペしてください。
HEAD間編集に記述する際は <style> と </style> の中に書いてください。CSS編集に記述する場合は <style> と </style> は書いてはダメです。

分からないことは「ユーザー助け合い掲示板」で聞いてみよう

それではデザインサンプルをご覧ください。

ここに引用する文を書きます。

比較的長いテキストを段落ごと引用する際に使用されます。

引用元：ページタイトル
コードを見てみる

CSS

blockquote{
  position:relative;
  width:90%;
  margin:20px auto;
  padding:34px 12px 12px 12px;
  font-style:italic;
  color:#505556;
  background:#f6f7f8;
}
blockquote:before{
  font-family:"Font Awesome 5 Free";
  content:"\f10d";
  color:#ccc;
  font-size:32px;
  font-weight:bold;
  display:inline-block;
  position:absolute;
  top:12px;
  left:15px;
  line-height:1;
}
blockquote p{
  margin:5px 0;
  padding:5px 0;
  line-height:1.6;
}
blockquote cite{
  display:block;
  font-size:0.9em;
  color:#737373;
  text-align:right;
}

ここに引用する文を書きます。

比較的長いテキストを段落ごと引用する際に使用されます。

引用元：ページタイトル
コードを見てみる

CSS

blockquote{
  position:relative;
  width:90%;
  margin:20px auto;
  padding:2px 12px 12px 52px;
  font-style:italic;
  color:#505556;
  background:#f6f7f8;
}
blockquote:before{
  font-family:"Font Awesome 5 Free";
  content:"\f10d";
  color:#ccc;
  font-size:32px;
  font-weight:bold;
  display:inline-block;
  position:absolute;
  top:12px;
  left:15px;
  line-height:1;
}
blockquote p{
  margin:5px 0;
  padding:5px 0;
  line-height:1.6;
}
blockquote cite{
  display:block;
  font-size:0.9em;
  color:#737373;
  text-align:right;
}

ここに引用する文を書きます。

比較的長いテキストを段落ごと引用する際に使用されます。

引用元：ページタイトル
コードを見てみる

CSS

blockquote{
  position:relative;
  width:90%;
  margin:20px auto;
  padding:2px 12px 12px 12px;
  font-style:italic;
  color:#27313d;
  background:#f6f7f8;
}
blockquote:before{
  font-family:"Font Awesome 5 Free";
  content:"\f10d";
  color:#ccc;
  font-size:62px;
  font-weight:bold;
  display:inline-block;
  position:absolute;
  top:12px;
  left:15px;
  line-height:1;
}
blockquote p{
  position: relative;
  margin:5px 0;
  padding:5px 0;
  line-height:1.6;
  z-index:2;
}
blockquote cite{
  position: relative;
  display:block;
  font-size:0.9em;
  color:#737373;
  text-align:right;
  z-index:2;
}

ここに引用する文を書きます。

比較的長いテキストを段落ごと引用する際に使用されます。

引用元：ページタイトル
コードを見てみる

CSS

blockquote{
  position:relative;
  width:90%;
  margin:20px auto;
  padding:12px 12px 12px 62px;
  font-style:normal;
  color:#27313d;
  background:#fff;
  border-right:5px solid #2699f7;
}
blockquote:before{
  position:absolute;
  top:0;
  left:0;
  width:50px;
  height:100%;
  content:'';
  background:#2699f7;
}
blockquote:after{
  font-family:"Font Awesome 5 Free";
  content:"\f10d";
  font-size:2em;
  line-height:1;
  position:absolute;
  top: calc(50% - .5em);
  left:10px;
  text-align:center;
  color:#fff;
}
blockquote p{
  position:relative;
  margin:5px 0;
  padding:5px 0;
  line-height:1.6;
}
blockquote cite{
  position: relative;
  display:block;
  font-size:0.9em;
  color:#737373;
  text-align:right;
}

ここに引用する文を書きます。

比較的長いテキストを段落ごと引用する際に使用されます。

引用元：ページタイトル
コードを見てみる

CSS

blockquote{
  position:relative;
  width:90%;
  margin:20px auto;
  padding:12px 12px 12px 62px;
  font-style:normal;
  color:#27313d;
  background:#fff;
}
blockquote:before{
  position:absolute;
  top: calc(50% - 25px);
  left:0;
  width:50px;
  height:50px;
  content:'';
  background:#2699f7;
  border-radius:50%;
}
blockquote:after{
  font-family:"Font Awesome 5 Free";
  content:"\f10d";
  font-size:2em;
  line-height:1;
  position:absolute;
  top: calc(50% - .5em);
  left:10px;
  text-align:center;
  color:#fff;
}
blockquote p{
  position:relative;
  margin:5px 0;
  padding:5px 0;
  line-height:1.6;
}
blockquote cite{
  position: relative;
  display:block;
  font-size:0.9em;
  color:#737373;
  text-align:right;
}

ここに引用する文を書きます。

比較的長いテキストを段落ごと引用する際に使用されます。

引用元：ページタイトル
コードを見てみる

CSS

blockquote{
  position:relative;
  width:90%;
  margin:20px auto;
  padding:2px 12px 12px 12px;
  font-style:italic;
  color:#505556;
  background:#fce3ea;
}
blockquote:before,
blockquote:after{
  font-family:"Font Awesome 5 Free";
  color:#f27398;
  font-size:32px;
  font-weight:bold;
  display:inline-block;
  position:absolute;
  line-height:1;
}
blockquote:before{
  content:"\f10d";
  top:12px;
  left:15px;
}
blockquote:after{
  content:"\f10e";
  bottom:12px;
  right:15px;
}
blockquote p:first-child{
  padding-left:52px;
}
blockquote p{
  margin:5px 0;
  padding:5px 0;
  line-height:1.6;
}
blockquote cite{
  display:block;
  font-size:0.9em;
  color:#737373;
  padding-right:46px;
  text-align:right;
}

ここに引用する文を書きます。

比較的長いテキストを段落ごと引用する際に使用されます。

引用元：ページタイトル
コードを見てみる

CSS

blockquote{
  position: relative;
  width:90%;
  margin:20px auto;
  padding:20px;
  font-style:italic;
  background-repeat:no-repeat;
  background-position:left top,left top,right bottom,right bottom;
  background-size:40px 2px,2px 40px,40px 2px,2px 40px;
  background-image:
  linear-gradient(#79d1b0,#79d1b0),
  linear-gradient(#79d1b0,#79d1b0),
  linear-gradient(#79d1b0,#79d1b0),
  linear-gradient(#79d1b0,#79d1b0);
  z-index:1;
}
blockquote:after{
  font-family:"Font Awesome 5 Free";
  content:"\f10d";
  font-size:3em;
  line-height:1;
  position:absolute;
  top:calc(50% - 40px);
  left:calc(50% - 40px);
  width:80px;
  height:80px;
  line-height:80px;
  text-align:center;
  color:#fff;
  background:#d6f1e7;
  border-radius:50%;
  z-index:2;
}
blockquote p{
  position: relative;
  line-height:1.6;
  z-index:3;
}
blockquote p + p{
  margin:5px 0;
  padding:5px 0;
}
blockquote cite{
  display:block;
  font-size:0.9em;
  color:#737373;
  padding-right:6px;
  text-align:right;
}

ここに引用する文を書きます。

比較的長いテキストを段落ごと引用する際に使用されます。

引用元：ページタイトル
コードを見てみる

CSS

blockquote{
  position:relative;
  width:90%;
  margin:30px auto 30px;
  padding:2px 12px 32px 12px;
  font-style:italic;
  color:#505556;
  background:#fff;
  border:1px solid #2c5379;
}
blockquote:after,
blockquote:before{
  font-family:"Font Awesome 5 Free";
  color:#ccc;
  background:#fff;
  width:46px;
  text-align:center;
  font-size:32px;
  font-weight:bold;
  display:inline-block;
  position:absolute;
  line-height:1;
}
blockquote:before{
  content:"\f10d";
  top:-12px;
  left:-6px;
}
blockquote:after{
  content:"\f10e";
  bottom:-12px;
  right:-6px;
}
blockquote p:first-child{
  padding-left:30px;
}
blockquote p{
  margin:5px 0;
  padding:5px 0;
  line-height:1.6;
}
blockquote cite{
  display:block;
  font-size:0.9em;
  color:#737373;
  text-align:right;
}

ここに引用する文を書きます。

比較的長いテキストを段落ごと引用する際に使用されます。

引用元：ページタイトル
コードを見てみる

CSS

>blockquote{
  position:relative;
  width:90%;
  margin:20px auto;
  padding:12px 0 12px 0;
  font-style:italic;
  color:#0c555d;
  background:#f4f8f4;
}
blockquote:before{
  font-family:"Font Awesome 5 Free";
  content:"\f10d";
  color:#ccc;
  font-size:32px;
  font-weight:bold;
  display:inline-block;
  position:absolute;
  bottom:12px;
  left:15px;
  line-height:1;
}
blockquote p{
  margin:5px 0;
  padding:5px 12px;
  line-height:1.6;
}
blockquote cite{
  display:block;
  font-size:0.9em;
  color:#737373;
  text-align:right;
  padding:12px;
  border-top:2px solid #2c5379;
}

ここに引用する文を書きます。

比較的長いテキストを段落ごと引用する際に使用されます。

引用元：ページタイトル
コードを見てみる

CSS

blockquote{
  position:relative;
  width:90%;
  margin:20px auto;
  padding:12px 0 12px 0;
  font-style:italic;
  color:#e9edf1;
  background:#2c5379;
}
blockquote:before{
  font-family:"Font Awesome 5 Free";
  content:"\f10d";
  color:#2c5379;
  font-size:32px;
  font-weight:bold;
  display:inline-block;
  position:absolute;
  bottom:13px;
  left:15px;
  line-height:1;
}
blockquote p{
  margin:5px 0;
  padding:5px 12px;
  color:#e9edf1;
  line-height:1.6;
}
blockquote cite{
  display:block;
  font-size:0.9em;
  color:#2c5379;
  text-align:right;
  padding:12px;
  background:#e9edf1;
}