サルワカの「CSSで作る！魅力的な引用デザインのサンプル30（blockquote）」を Google Browse Fonts ２０種の引用符でカスタマイズしてみました - ３０例

あの有名なサルワカサイトの「CSSで作る！魅力的な引用デザインのサンプル30（blockquote）」の引用ボックスのCSSサンプル３０本について、２０種のGoogle Browse fontsの引用符でカスタマイズしてみました。引用符は、Google Browse fontsの種類により色々な形をしています。

Font別「blockquote」引用符サンプル２０種｜CSSで作る！魅力的な引用デザインサンプル「blockquote」カスタマイズ３０例

Font別<blockquote>引用符サンプル２０種 - Google Browse fonts Quotation mark

つぎのGoogle Browse fonts サイトより任意に２０のFontを選びました。

Google Browse fonts（All language）：https://fonts.google.com/

(1) “Kiwi Maru 引用符”

(2) “Zen Loop 引用符”

(3) “Qahiri 引用符”

(4) “Noto Sans JP 引用符”

(5) “Zen Tokyo Zoo 引用符”

(6) “Yomogi 引用符”

(7) “Sawarabi Gothic 引用符”

(8) “Yusei Magic 引用符”

(9) “Rampart One 引用符”

(10) “Kaisei HarunoUmi 引用符”

(11) “Palette Mosaic 引用符”

(12) “Reggae One 引用符”

(13) “Dela Gothic One 引用符”

(14) “Potta One 引用符”

(15) “Stick 引用符”

(16) “Train One 引用符”

(17) “Otomanopee One 引用符”

(18) “Hachi Maru Pop 引用符”

(19) “Akronim 引用符”

(20) “Noto Sans KR 引用符”

▼ 全20種Font別blockquote引用符デモ

CSS Block Quotation Examples

ここに引用する文を書きます。引用符のfont-familyは、"Rampart One"。

CSSで作る！魅力的な引用デザインサンプル（blockquote）カスタマイズ３０例
　- Google Browse fonts 引用符使用

引用デザインサンプル（blockquote）のカスタマイズ事例３０例で使用する引用符のフォントは、上記「Font別引用符サンプル 20種」より任意に選んでいます。
なお、つぎの５つのフォント Zen Loop, Zen Tokyo Zoo, Yusei Magic, Potta One, Hachi Maru Popは、サンプルがありません。
サンプルとFont-family名（引用符）の対応表は、つぎのボタンをクリックすると表示（非表示）できます。 ↓表示する

サンプルとFont-family名の対応表
番号	引用符	Font-family名	サンプル項番	備考
(1)	“　”	Kiwi Maru	5
(2)	“　”	Zen Loop
(3)	“　”	Qahiri	2, 17, 18
(4)	“　”	Noto Sans JP	11, 22, 26, 27, 28
(5)	“　”	Zen Tokyo Zoo
(6)	“　”	Yomogi	3, 4, 21
(7)	“　”	Sawarabi Gothic	9
(8)	“　”	Yusei Magic
(9)	“　”	Rampart One	1, 30
(10)	“　”	Kaisei HarunoUmi	12, 23, 24
(11)	“　”	Palette Mosaic	29
(12)	“　”	Reggae One	13
(13)	“　”	Dela Gothic One	8, 10, 14, 25
(14)	“　”	Potta One
(15)	“　”	Stick	15
(16)	“　”	Train One	20
(17)	“　”	Otomanopee One	16
(18)	“　”	Hachi Maru Pop
(19)	“　”	Akronim	6
(20)	“　”	Noto Sans KR	7, 19

「blockquote」のカスタマイズに当たり、使用するGoogle Browse fontsのつぎの２つの情報を事前に取得します。
Google Browse fontsの情報取得方法は、≫ここを参照してください。

使用するGoogle Browse fontsの本体Font CSSの埋め込みコード

・<link>タグの場合
<link href="https://fonts.googleapis.com/css2?family=Rampart+One&display=swap" rel="stylesheet">  
 
・CSS @importプロパティの場合 
@import url('https://fonts.googleapis.com/css2?family=Rampart+One&display=swap');

使用するGoogle Browse fonts引用符のstyle font-family名
```
font-family: 'Rampart One', cursive;   
```

(上取得情報例は Google Browse fonts「Rampart One」）

以下に、カスタマイズ事例３０例を示します。タイトルの項番部分をクリックするとあたらしいページでそのサンプルのデモを見ることができます。

1. シンプルまずはオーソドックスなデザインから。どんなサイトにも馴染みやすいはずです。
1. デモ画像

Rampart One

このサンプルは、デモのキャプチャー画像です。デモを見るには、タイトルの項番部分をクリックしてください。以下同様。

・1.1 Font-family名（使用したいフォントを選択。サンプル1は、Rampart One です。）
blockquote用CSSのfont-familyに設定するfont-family名の値は、Google Browse fontsサイト https://fonts.google.com/より取得します。 Font-family名の設定例は、下HTML全体まとめコードの27行目参照。

font-family: 'Rampart One', cursive;

・1.2 Fontの埋め込みStylesコード - Google Browse fonts本体 CSSファイル（Font-family名により選択）
Google Browse fonts 本体CSSファイルの埋め込みStylesコードは、Google Browse fontsサイト https://fonts.google.com/より取得します。取得した埋め込みStylesコードは、HTMLの<head>内に配置します。

Font埋め込み <link>タグ２０選

<link href="https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Zen+Loop&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Qahiri&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Yomogi&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rampart+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kaisei+HarunoUmi:wght@700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Palette+Mosaic&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Reggae+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Potta+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Stick&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Train+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Otomanopee+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Akronim&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">

Font埋め込み CSS @importプロパティ２０選

@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Loop&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Qahiri&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yomogi&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rampart+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kaisei+HarunoUmi:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Palette+Mosaic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Reggae+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Potta+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Stick&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Train+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Otomanopee+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Akronim&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

・1.3 HTML - blockquote（各サンプル共通）

<blockquote>
 <p>CSS Block Quotation Examples</p>
 <p>ここに引用する文を書きます。引用符のfont-familyは、"Rampart One"。</p>
 <cite>ここに引用元のURLや文書名など表示します。（必要時）</cite>
</blockquote>

・1.4 CSS - blockquote用（各サンプル固有）
つぎのサイトhttps://saruwakakun.com/html-css/reference/blockquote より、すべてのサンプルのCSSをコピーできます。
コピーしたサンプル1.のCSSを、下のとおり修正カスタマイズします。

<style>
blockquote {
    position: relative;
    padding: 30px 15px 8px 15px;
    box-sizing: border-box;
    font-style: italic;
    background: #efefef;
    color: #555;
    width: 600px;
}
blockquote:before{
    display: inline-block;
    position: absolute;
    top: 5px;                    /* 13px → 5pxに変更 */                   
    left: 8px;                   /* 15px → 8pxに変更 */                     
    content: "“";               /* "\f10d"を全角初め引用符"“"に変更 */
    font-family: "Rampart One";  /* font-family名FontAwesomeをRampart Oneに変更 */
    color: #cfcfcf;              /* 引用符の色 変更しない */   
    font-size: 65px;             /* 引用符の大きさ28pxを 65pxに変更 */  
    line-height: 1;
    font-weight: 400;            /* 900 → 400に変更 */
}
以下省略

なお、修正箇所および修正値はサンプルにより異なります。

・1.5 HTML全体まとめ（全72行）
本サンプル「1. シンプルまずはオーソドックスなデザインから。」のHTMLですが、他のサンプルのテンプレートとして利用できます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>1.  シンプル まずはオーソドックスなデザインから。</title>
<!-- Google Browse fonts Rampart One 埋め込み <LINK>タグ -->
<link href="https://fonts.googleapis.com/css2?family=Rampart+One&display=swap" rel="stylesheet">
<!-- Google Browse fonts Rampart One 埋め込み CSS @importプロパティ 
<style>
@import url('https://fonts.googleapis.com/css2?family=Rampart+One&display=swap');
</style>
-->

<style>
blockquote {
    position: relative;
    padding: 30px 15px 8px 15px;
    box-sizing: border-box;
    font-style: italic;
    background: #efefef;
    color: #555;
    width: 600px;
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 3px; 
    content: "“";              /* 全角初め引用符 */
    font-family: "Rampart One"; /* sans-serif → Rampart One に変更 font-family名 */
    color: #cfcfcf;             /* 引用符の色 */ 
    font-size: 65px;            /* 引用符の大きさ 90px→ 65pxに変更 */
    line-height: 1;
    font-weight: 400;           /* font-weight 400 を追加 */
}
/* サルワカ サイト
blockquote:before{
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 3px;
    content: "“";
    font-family: sans-serif;
    color: #cfcfcf;
    font-size: 90px;
    line-height: 1;
}
*/
blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}
</style>
</head>
<body>
<!--引用HTML-->
<h3>1.  シンプル まずはオーソドックスなデザインから。どんなサイトにも馴染みやすいはずです。</h3>
<blockquote>
        <p>CSS Block Quotation Examples</p>
        <p>ここに引用する文を書きます。引用符のfont-familyは、"Rampart One"。</p>
</blockquote>
</body>
</html>

2. 引用符を横につけた場合違いが分かりづらいかもしれませんが、引用符が文の左側に配置されるようになっています。

Qahiri

↓ HTMLを表示する

3. 少しカラフルなカード風に影をつけて、少し浮き上がったように見せています。色は好みで変えてくださいませ（CSSの#9dd4ffで水色を指定しているので、これを好きな色コードに変えればOKです）。

Yomogi

↓ HTMLを表示する
4. 引用符を横に同じく引用マークを左に配置したバージョンです。

Yomogi

↓ HTMLを表示する
5. スマート締まった雰囲気を出したいときに使うのがおすすめです。引用符の色（blockquote:before {color:~}の部分）は、サイトに雰囲気に合わせて変えると良いでしょう。

Kiwi Maru

↓ HTMLを表示する
6. 少しカラフルに背景を少し濃い目の色で塗っています。文字は見えづらくならないように太字にしています。

Akronim

↓ HTMLを表示する
7. 力強いデザインに太めの枠で囲むとさらに力強いデザインになります。やや派手なので、使いどころは選ぶかもしれませんね。

Noto Sans KR

↓ HTMLを表示する
8. 引用符をボックス上に左上からピョコンと引用符がはみ出るようなデザインです。少し分かりづらいですかね。

Dela Gothic One

↓ HTMLを表示する
9. 引用符を白抜き比較的使いやすいデザインかと思います。背景色（blockquote {background: #ddeaff;}）は必要に応じて変えてくださいませ。

Sawarabi Gothic

↓ HTMLを表示する
10. 角の削れたデザイン少しユニークな見た目にしてみました。目を引きたい場合にご利用くださいませ。

Dela Gothic One

↓ HTMLを表示する
11. ホックスの角に丸い引用マークかわいく見せたいときに使うと良いでしょう。引用マークは左上だけでも良いかもしれません（blockquote:after {~}をまるっと削除すれば右下のマークは消えます）。

Noto Sans JP

↓ HTMLを表示する
12. モノクロバージョン白黒版です。こちらも必要に応じて右下の引用マークを消してくださいませ。

Kaisei HarunoUmi

↓ HTMLを表示する
13. メリハリのあるデザインに引用を示す部分と文章をはっきりと分けてみました。比較的使いやすいのではないでしょうか。borderプロパティのカラーコード「#3ca5d4」を書き換えることで、色を変えることができます。

Reggae One

↓ HTMLを表示する
14. 背景を薄く塗りつぶした場合線を使わずに塗りつぶしてみました。形はさきほどと同じです。

Dela Gothic One

↓ HTMLを表示する
15. モノクロ＋影質素な見た目にして、影をつけています。影が不要であれば、box-shadow:~;を削除してくださいませ。

Stick

↓ HTMLを表示する
16. 爽やか引用符を少しユニークな形にして、左角に配置しました。柔らかい雰囲気を出したいときに使うのが良いでしょう。

Otomanopee One

↓ HTMLを表示する
17. 引用符を丸で囲った場合引用符を円で囲み、オレンジ系統でまとめてみました。

Qahiri

↓ HTMLを表示する
18. ピンクバージョンさきほどの色違いです。ウェブサイトの雰囲気に合わせて選んで頂ければと思います。

Qahiri

↓ HTMLを表示する
19. 青バージョン青バージョンです。１番使いやすい配色かもしれません。

Noto Sans KR

↓ HTMLを表示する
20. 上から吊り下げてみた場合からぴょこんと垂れ下がったようなレイアウトにしてみました。上の線（border-top）は不要であれば消してくださいませ。

Noto Sans KR

↓ HTMLを表示する
21. ピンクバージョン上の色違いのものです。

Yomogi

↓ HTMLを表示する
22. 青バージョン同様に、色違いのものです。

Noto Sans JP

↓ HTMLを表示する
23. 華やかにリボンをつけたようなデザインにしてみました。少しは派手ですが、目を引くはずです。

Kaisei HarunoUmi

↓ HTMLを表示する
24. 少しシックな配色にさきほどと形は同じですが、落ち着きのある配色にしてみました。

Kaisei HarunoUmi

↓ HTMLを表示する
25.紙が折り込まれたようなデザインに横から紙が折り込まれているようなデザインです。必要に応じてボックスの下線（blockquote のborder-bottom:~;）を削除してもらえればと思います。

Dela Gothic One

↓ HTMLを表示する
26. 影を付けたみた場合使いやすい配色にして、さらに影をつけてみました。より奥行きがあるように見えるはずです。

Noto Sans JP

↓ HTMLを表示する
27. 上から折り込んだ場合上から折り目のついて紙がかかっているような見た目にしてみました。目を引くわりに派手すぎず使いやすいかもしれません。

Noto Sans JP

↓ HTMLを表示する
28. 引用符を背景に大きく配置引用符を思い切って大きくし、さらに文字の下に少し配置してみました。少し読みづらいかもしれませんが、その分ボックスのサイズはミニマムになります。

Noto Sans JP

↓ HTMLを表示する
29. かわいい配色になんとなく桜っぽい配色にしてみました。

Palette Mosaic

↓ HTMLを表示する
30. 爽やかでやさしい配色に爽やかで透明感のある配色にしてみました。

Rampart One

↓ HTMLを表示する