![](https://hrdyuic.com/wp-content/uploads/8335d558d151e09a696fb916ebabfbd5.png)
WordPress側で用意してくれている「コアブロック」に対してSWELL独自のスタイルを加えた引用のデザインサンプルやカスタマイズ方法、使い方について教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- 引用ブロックのデザインサンプル26選
- 引用ブロックのカスタマイズ方法
- 引用ブロックの使い方
是非、最後までご覧ください。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
SWELL独自の引用ブロックのデザインサンプル26選
デザインサンプルのコードの入力場所
執筆画面から、「投稿を表示」または「
(プレビュー)」を選択します。![](https://hrdyuic.com/wp-content/uploads/1a0b078097fee3bb7dd7c79e27060a12.jpg)
![](https://hrdyuic.com/wp-content/uploads/1a0b078097fee3bb7dd7c79e27060a12.jpg)
プレビューから、「カスタマイズ」を選択します。
![](https://hrdyuic.com/wp-content/uploads/163292e14e9098fcc9cf8900eb26b4ee.jpg)
![](https://hrdyuic.com/wp-content/uploads/163292e14e9098fcc9cf8900eb26b4ee.jpg)
左サイドバーから、「追加CSS」を選択します。
![](https://hrdyuic.com/wp-content/uploads/49fe64b39a50e0128e779f10d45a7228.jpg)
![](https://hrdyuic.com/wp-content/uploads/49fe64b39a50e0128e779f10d45a7228.jpg)
追加CSS(下記、赤枠内)にこれから紹介するコードをコピペすることでデザインをリアルタイムで確認することができます。
![](https://hrdyuic.com/wp-content/uploads/c28ce0c0cece98e7d6823a29f456dc0a.jpg)
![](https://hrdyuic.com/wp-content/uploads/c28ce0c0cece98e7d6823a29f456dc0a.jpg)
SWELL独自の引用スタイル
スタイル
以下の2つが用意されています。
シンプル
![](https://hrdyuic.com/wp-content/uploads/18c495d0be35799e3ea2b15bab7bb201.jpg)
![](https://hrdyuic.com/wp-content/uploads/18c495d0be35799e3ea2b15bab7bb201.jpg)
クオーテーションマーク表示
![](https://hrdyuic.com/wp-content/uploads/f5bab7602f3e8bfebb2695dfdad170d5.jpg)
![](https://hrdyuic.com/wp-content/uploads/f5bab7602f3e8bfebb2695dfdad170d5.jpg)
設定方法
管理画面メニューから、「SWELL設定」>「エディター設定」を選択します。
![](https://hrdyuic.com/wp-content/uploads/1abf41dbab2e49ab17c620cb6cc09013.jpg)
![](https://hrdyuic.com/wp-content/uploads/1abf41dbab2e49ab17c620cb6cc09013.jpg)
エディター設定から、「その他」を選択します。
![](https://hrdyuic.com/wp-content/uploads/7310d56086a9eb26483f574d9b5847f0.jpg)
![](https://hrdyuic.com/wp-content/uploads/7310d56086a9eb26483f574d9b5847f0.jpg)
その中に「引用」がありますので、そこからスタイルが選択できます。
![](https://hrdyuic.com/wp-content/uploads/92669a3c83583b661c57a1462dab2aaa.jpg)
![](https://hrdyuic.com/wp-content/uploads/92669a3c83583b661c57a1462dab2aaa.jpg)
デザインサンプル26選
※ 引用スタイルを「クオーテーションマーク表示」にしておきます。
サンプル 1
![](https://hrdyuic.com/wp-content/uploads/a13f717c03688bfa45e35c6ea473d63a.jpg)
![](https://hrdyuic.com/wp-content/uploads/a13f717c03688bfa45e35c6ea473d63a.jpg)
コードを表示
.post_content blockquote::before {
color: #c7254e;
}
.post_content blockquote::after {
border-left: solid 1px #c7254e;
border-right: solid 1px #c7254e;
content: "";
display: block;
height: 100%;
left: 0;
top: 0;
width: 5px;
}
サンプル 2
![](https://hrdyuic.com/wp-content/uploads/0cb3196c05bace45d2be41e588efa81c.jpg)
![](https://hrdyuic.com/wp-content/uploads/0cb3196c05bace45d2be41e588efa81c.jpg)
コードを表示
.post_content blockquote::before {
color: #c7254e;
}
.post_content blockquote::after {
border-left: solid 1px #c7254e;
border-right: solid 1px #c7254e;
content: "";
display: block;
height: 100%;
left: 0;
top: 0;
width: 100%;
}
サンプル 3
![](https://hrdyuic.com/wp-content/uploads/339bfb4fbddbd61dcc68035fbfc8aa08.jpg)
![](https://hrdyuic.com/wp-content/uploads/339bfb4fbddbd61dcc68035fbfc8aa08.jpg)
コードを表示
.post_content blockquote::before {
color: #c7254e;
}
.post_content blockquote::after {
border-right: solid 1px #c7254e;
content: "";
display: block;
height: 100%;
left: 0;
top: 0;
width: 5px;
}
サンプル 4
![](https://hrdyuic.com/wp-content/uploads/aa8ee7d0605bb7cf586758f13595c09e.jpg)
![](https://hrdyuic.com/wp-content/uploads/aa8ee7d0605bb7cf586758f13595c09e.jpg)
コードを表示
.post_content blockquote::before {
color: #c7254e;
}
.post_content blockquote::after {
border-bottom: solid 1px #c7254e;
border-top: solid 1px #c7254e;
content: "";
display: block;
height: 5px;
left: 0;
top: 0;
width: 100%;
}
サンプル 5
![](https://hrdyuic.com/wp-content/uploads/6a505d0dfea2b160a2aaec21ad68a098.jpg)
![](https://hrdyuic.com/wp-content/uploads/6a505d0dfea2b160a2aaec21ad68a098.jpg)
コードを表示
.post_content blockquote::before {
color: #c7254e;
}
.post_content blockquote::after {
border-bottom: solid 1px #c7254e;
border-top: solid 1px #c7254e;
content: "";
display: block;
height: 100%;
left: 0;
top: 0;
width: 100%;
}
サンプル 6
![](https://hrdyuic.com/wp-content/uploads/e58858f762e2bd94e9588e57d373c793.jpg)
![](https://hrdyuic.com/wp-content/uploads/e58858f762e2bd94e9588e57d373c793.jpg)
コードを表示
.post_content blockquote::before {
color: #c7254e;
}
.post_content blockquote::after {
border-bottom: solid 1px #c7254e;
content: "";
display: block;
height: 5px;
left: 0;
top: 0;
width: 100%;
}
サンプル 7
![](https://hrdyuic.com/wp-content/uploads/9e47ad67fbabd59fe56b27a1ad3be89f.jpg)
![](https://hrdyuic.com/wp-content/uploads/9e47ad67fbabd59fe56b27a1ad3be89f.jpg)
コードを表示
.post_content blockquote::before {
color: #c7254e;
}
.post_content blockquote::after {
border-bottom: solid 1px #c7254e;
border-right: solid 1px #c7254e;
content: "";
display: block;
height: 100%;
left: 0;
top: 0;
width: 100%;
}
サンプル 8
![](https://hrdyuic.com/wp-content/uploads/0414410650ac7b9915ec797f3b49e871.jpg)
![](https://hrdyuic.com/wp-content/uploads/0414410650ac7b9915ec797f3b49e871.jpg)
コードを表示
.post_content blockquote::before {
border-left: solid 1px #c7254e;
border-top: solid 1px #c7254e;
color: #c7254e;
height: 56px;
padding-left: 8px;
width: 56px;
}
.post_content blockquote::before {
left: 0;
top: 0;
}
.post_content blockquote::after {
display: none;
}
サンプル 9
![](https://hrdyuic.com/wp-content/uploads/f2610daeea67616bfc66c927f38872b2.jpg)
![](https://hrdyuic.com/wp-content/uploads/f2610daeea67616bfc66c927f38872b2.jpg)
コードを表示
.post_content blockquote::before {
background: #c7254e;
border-radius: 50%;
color: #ffffff;
text-align: center;
height: 40px;
left: 4px;
line-height: 90px;
top: 2px;
width: 40px;
}
.post_content blockquote::after {
border-bottom: solid 1px #c7254e;
border-right: solid 1px #c7254e;
content: "";
display: block;
height: 100%;
left: 0;
top: 0;
width: 100%;
}
サンプル 10
![](https://hrdyuic.com/wp-content/uploads/718f6dc16e555c30dd624ef800ef7a92.jpg)
![](https://hrdyuic.com/wp-content/uploads/718f6dc16e555c30dd624ef800ef7a92.jpg)
コードを表示
.post_content blockquote::before {
background: #c7254e;
border-radius: 50%;
color: #ffffff;
text-align: center;
height: 40px;
left: 4px;
line-height: 90px;
top: 2px;
width: 40px;
}
.post_content blockquote::after {
border-right: solid 1px #c7254e;
content: "";
display: block;
height: 100%;
left: 0;
top: 0;
width: 100%;
}
サンプル 11
![](https://hrdyuic.com/wp-content/uploads/1066e1b732fed59d4e94a5332a067506.jpg)
![](https://hrdyuic.com/wp-content/uploads/1066e1b732fed59d4e94a5332a067506.jpg)
コードを表示
.post_content blockquote::before {
background: #c7254e;
border-radius: 50%;
color: #ffffff;
text-align: center;
height: 40px;
left: 4px;
line-height: 90px;
top: 2px;
width: 40px;
}
.post_content blockquote::after {
border-bottom: solid 1px #c7254e;
content: "";
display: block;
height: 100%;
left: 0;
top: 0;
width: 100%;
}
サンプル 12
![](https://hrdyuic.com/wp-content/uploads/32adab41ebf26e2097e7e53c4f5f2393.jpg)
![](https://hrdyuic.com/wp-content/uploads/32adab41ebf26e2097e7e53c4f5f2393.jpg)
コードを表示
.post_content blockquote::before {
background: #c7254e;
color: #ffffff;
height: 40px;
left: 0px;
line-height: 90px;
text-align: center;
top: 0;
width: 40px;
}
.post_content blockquote::after {
border-bottom: solid 1px #c7254e;
border-right: solid 1px #c7254e;
content: "";
display: block;
height: 100%;
left: 0;
top: 0;
width: 100%;
}
サンプル 13
![](https://hrdyuic.com/wp-content/uploads/d6248b76bd3001f9accc2c95f5497354.jpg)
![](https://hrdyuic.com/wp-content/uploads/d6248b76bd3001f9accc2c95f5497354.jpg)
コードを表示
.post_content blockquote::before {
background: #c7254e;
color: #ffffff;
height: 40px;
left: 0px;
line-height: 90px;
text-align: center;
top: 0;
width: 40px;
}
.post_content blockquote::after {
border-right: solid 1px #c7254e;
content: "";
display: block;
height: 100%;
left: 0;
top: 0;
width: 100%;
}
サンプル 14
![](https://hrdyuic.com/wp-content/uploads/7d154d2e8f0870c64edd8c40f3b1dc8f.jpg)
![](https://hrdyuic.com/wp-content/uploads/7d154d2e8f0870c64edd8c40f3b1dc8f.jpg)
コードを表示
.post_content blockquote::before {
background: #c7254e;
color: #ffffff;
height: 40px;
left: 0px;
line-height: 90px;
text-align: center;
top: 0;
width: 40px;
}
.post_content blockquote::after {
border-bottom: solid 1px #c7254e;
content: "";
display: block;
height: 100%;
left: 0;
top: 0;
width: 100%;
}
サンプル 15
![](https://hrdyuic.com/wp-content/uploads/0b6d08e6887f90327979fef15faa81a1.jpg)
![](https://hrdyuic.com/wp-content/uploads/0b6d08e6887f90327979fef15faa81a1.jpg)
コードを表示
.post_content blockquote::before {
color: #c7254e;
}
.post_content blockquote::after {
display: none;
}
サンプル 16
![](https://hrdyuic.com/wp-content/uploads/648e6b56fc282d5e810b19d4bfbf379e.jpg)
![](https://hrdyuic.com/wp-content/uploads/648e6b56fc282d5e810b19d4bfbf379e.jpg)
コードを表示
.post_content blockquote::before {
color: #c7254e;
}
.post_content blockquote::after {
border: solid 1px #c7254e;
content: "";
display: block;
height: 100%;
left: 0;
top: 0;
width: 100%;
}
サンプル 17
![](https://hrdyuic.com/wp-content/uploads/ac818cad25b0fdb8e2d9e555aa7cfbda.jpg)
![](https://hrdyuic.com/wp-content/uploads/ac818cad25b0fdb8e2d9e555aa7cfbda.jpg)
コードを表示
.post_content blockquote::before {
background: #c7254e;
border-radius: 50%;
color: #ffffff;
text-align: center;
height: 40px;
left: 4px;
line-height: 90px;
top: 2px;
width: 40px;
}
.post_content blockquote::after {
border: solid 1px #c7254e;
content: "";
display: block;
height: 100%;
left: 0;
top: 0;
width: 100%;
}
サンプル 18
![](https://hrdyuic.com/wp-content/uploads/7c858a91479d3b5438e3aaf46cf4c14d.jpg)
![](https://hrdyuic.com/wp-content/uploads/7c858a91479d3b5438e3aaf46cf4c14d.jpg)
コードを表示
.post_content blockquote::before {
background: #c7254e;
color: #ffffff;
top: 0;
text-align: center;
height: 40px;
left: 0;
line-height: 90px;
width: 40px;
}
.post_content blockquote::after {
border: solid 1px #c7254e;
content: "";
display: block;
height: 100%;
left: 0;
top: 0;
width: 100%;
}
サンプル 19
![](https://hrdyuic.com/wp-content/uploads/406e2132e0e176072bb8998cfe67f615.jpg)
![](https://hrdyuic.com/wp-content/uploads/406e2132e0e176072bb8998cfe67f615.jpg)
コードを表示
.post_content blockquote::before {
background: #c7254e;
border-radius: 50%;
color: #ffffff;
height: 40px;
left: 4px;
line-height: 90px;
text-align: center;
top: 2px;
width: 40px;
}
.post_content blockquote::after {
display: none;
}
サンプル 20
![](https://hrdyuic.com/wp-content/uploads/14e7cb47695399c5c157343b069f92f2.jpg)
![](https://hrdyuic.com/wp-content/uploads/14e7cb47695399c5c157343b069f92f2.jpg)
コードを表示
.post_content blockquote::before {
background: #c7254e;
color: #ffffff;
top: 0;
text-align: center;
height: 40px;
left: 0;
line-height: 90px;
width: 40px;
}
.post_content blockquote::after {
display: none;
}
サンプル 21
![](https://hrdyuic.com/wp-content/uploads/578bb763bf0949ab9f63f9a77da351d0.jpg)
![](https://hrdyuic.com/wp-content/uploads/578bb763bf0949ab9f63f9a77da351d0.jpg)
コードを表示
.post_content blockquote::before, .post_content blockquote::after {
border-left: solid 1px #c7254e;
border-top: solid 1px #c7254e;
color: #c7254e;
height: 56px;
padding-left: 8px;
width: 56px;
}
.post_content blockquote::before {
left: 0;
top: 0;
}
.post_content blockquote::after {
bottom: 0;
right: 0;
}
サンプル 22
![](https://hrdyuic.com/wp-content/uploads/f9ec08b4c3342176e9820f2f0802c1d7.jpg)
![](https://hrdyuic.com/wp-content/uploads/f9ec08b4c3342176e9820f2f0802c1d7.jpg)
コードを表示
.post_content blockquote::before, .post_content blockquote::after {
background: #c7254e;
border-radius: 50%;
color: #ffffff;
height: 40px;
line-height: 90px;
text-align: center;
width: 40px;
}
.post_content blockquote::before {
left: 4px;
top: 2px;
}
.post_content blockquote::after {
bottom: 2px;
right: 4px;
}
サンプル 23
![](https://hrdyuic.com/wp-content/uploads/9d05a7fffda4aae37d5608838cd28834.jpg)
![](https://hrdyuic.com/wp-content/uploads/9d05a7fffda4aae37d5608838cd28834.jpg)
コードを表示
.post_content blockquote::before, .post_content blockquote::after {
background: #c7254e;
color: #ffffff;
height: 40px;
line-height: 90px;
text-align: center;
width: 40px;
}
.post_content blockquote::before {
left: 0;
top: 0;
}
.post_content blockquote::after {
right: 0;
bottom: 0;
}
サンプル 24
![](https://hrdyuic.com/wp-content/uploads/3290ba7c89c1d1279f752ecadc548a88.jpg)
![](https://hrdyuic.com/wp-content/uploads/3290ba7c89c1d1279f752ecadc548a88.jpg)
コードを表示
.post_content blockquote::before {
color: #ffffff;
left: 4px;
}
.post_content blockquote::after {
background: #c7254e;
content: "";
display: block;
height: 100%;
left: 0;
top: 0;
width: 40px;
z-index: -1;
}
サンプル 25
![](https://hrdyuic.com/wp-content/uploads/fcebdd0770c6b168fbf744d12aacda1f.jpg)
![](https://hrdyuic.com/wp-content/uploads/fcebdd0770c6b168fbf744d12aacda1f.jpg)
コードを表示
.post_content blockquote::before {
background: #ffffff;
border-radius: 50%;
color: #c7254e;
height: 40px;
left: 0;
line-height: 90px;
text-align: center;
top: 0;
width: 40px;
}
.post_content blockquote::after {
background: #c7254e;
content: "";
display: block;
height: 100%;
left: 0;
top: 0;
width: 40px;
z-index: -1;
}
サンプル 26
![](https://hrdyuic.com/wp-content/uploads/2a8cf4f946afd8cd19215b85d2ed3489.jpg)
![](https://hrdyuic.com/wp-content/uploads/2a8cf4f946afd8cd19215b85d2ed3489.jpg)
コードを表示
.post_content blockquote::before {
background: #ffffff;
color: #c7254e;
height: 40px;
left: 0;
line-height: 90px;
text-align: center;
top: 0;
width: 40px;
}
.post_content blockquote::after {
background: #c7254e;
content: "";
display: block;
height: 100%;
left: 0;
top: 0;
width: 40px;
z-index: -1;
}
SWELL独自の引用ブロックのカスタマイズ方法
これから紹介するカスタマイズ方法を組み合わせることで以下のような引用デザインにすることもできます。
組み合わせ例
以下を組み合わせて引用ブロックを作成しました。
- テキストをイタリックへ
- 引用元を右寄せ
- 背景色の変更
- Font Awesomeのアイコン(quote)に変更
- 上下左右にボーダー(dashed)
- クオーテーションマークの中央寄せ
![](https://hrdyuic.com/wp-content/uploads/75b26dca78ac798411cdc36701dc674a.jpg)
![](https://hrdyuic.com/wp-content/uploads/75b26dca78ac798411cdc36701dc674a.jpg)
シンプルのカラーを変更
※ まずはスタイルを「シンプル」にします。
![](https://hrdyuic.com/wp-content/uploads/c347fdccd56bef4f47b5f14a664dcc9e.jpg)
![](https://hrdyuic.com/wp-content/uploads/c347fdccd56bef4f47b5f14a664dcc9e.jpg)
コードを表示
.post_content blockquote::before {
border-left: solid 1px #c7254e;
border-right: solid 1px #c7254e;
}
※ ここから先のカスタマイズはスタイルを「クオーテーションマークを表示」にします。
クオーテーションマークのカラーを変更
![](https://hrdyuic.com/wp-content/uploads/7201bd5dd509c590565a8bd16d6b7368.jpg)
![](https://hrdyuic.com/wp-content/uploads/7201bd5dd509c590565a8bd16d6b7368.jpg)
コードを表示
.post_content blockquote::before, .post_content blockquote::after {
color: #c7254e;
}
quoteをイタリックへ
※ 分かりやすいようにクオーテーションマークに色を付けています。
![](https://hrdyuic.com/wp-content/uploads/d7ae3210fa8918176669c49183a5eff9.jpg)
![](https://hrdyuic.com/wp-content/uploads/d7ae3210fa8918176669c49183a5eff9.jpg)
コードを表示
.post_content blockquote::before, .post_content blockquote::after {
color: #c7254e;
font-style: italic;
}
右下のクオーテーションマークを消す
![](https://hrdyuic.com/wp-content/uploads/73de352d09278c4ae5f8060d6c1dcc68.jpg)
![](https://hrdyuic.com/wp-content/uploads/73de352d09278c4ae5f8060d6c1dcc68.jpg)
コードを表示
.post_content blockquote::after {
display: none;
}
テキストをイタリックへ
![](https://hrdyuic.com/wp-content/uploads/7b29a17703d1a60c617a68e1d56334c3.jpg)
![](https://hrdyuic.com/wp-content/uploads/7b29a17703d1a60c617a68e1d56334c3.jpg)
コードを表示
.post_content blockquote p {
font-style: italic;
}
引用元のイタリックをノーマルへ
![](https://hrdyuic.com/wp-content/uploads/9bd26e7ff5b63d316a850f5bdb60d991.jpg)
![](https://hrdyuic.com/wp-content/uploads/9bd26e7ff5b63d316a850f5bdb60d991.jpg)
コードを表示
.post_content blockquote cite {
font-style:normal;
}
引用元を右寄せ
![](https://hrdyuic.com/wp-content/uploads/0062b174afec0de15262246e551ec7c9.jpg)
![](https://hrdyuic.com/wp-content/uploads/0062b174afec0de15262246e551ec7c9.jpg)
コードを表示
.post_content blockquote cite {
text-align: right;
}
背景色の変更
![](https://hrdyuic.com/wp-content/uploads/f995766af280e19d17b2e19044cb97f9.jpg)
![](https://hrdyuic.com/wp-content/uploads/f995766af280e19d17b2e19044cb97f9.jpg)
コードを表示
.post_content blockquote {
background: #f9f2f4;
}
Font Awesomeのアイコン(quote)に変更
※ 分かりやすいようにクオーテーションマークに色を付けています。
![](https://hrdyuic.com/wp-content/uploads/c7a92990f031cb73e2cee82cf00a0033.jpg)
![](https://hrdyuic.com/wp-content/uploads/c7a92990f031cb73e2cee82cf00a0033.jpg)
コードを表示
.post_content blockquote::before, .post_content blockquote::after {
color: #c7254e;
content: "\f10d";
font-family: "Font Awesome 6 free";
font-size: 2em;
font-weight: 600;
}
※ Font Awesomeを使うには設定が必要ですので以下を参考にして下さい。
Font Awesomeを使えるようにする
管理画面メニューから、「SWELL設定」>「SWELL設定」を選択します。
![](https://hrdyuic.com/wp-content/uploads/190310c02c74666654985c9b26fd5a45.jpg)
![](https://hrdyuic.com/wp-content/uploads/190310c02c74666654985c9b26fd5a45.jpg)
SWELL設定から、「Font Awesome」を選択後、以下を設定します。
- 読み込み方:CSSで読み込む
- バージョン:v6
![](https://hrdyuic.com/wp-content/uploads/1e2b5dea582c143bd2063c0be789a4e8.jpg)
![](https://hrdyuic.com/wp-content/uploads/1e2b5dea582c143bd2063c0be789a4e8.jpg)
ボーダーの引き方
デザインサンプルのコード内にある「border-○○
: ○○ ○○ ○○
;」の○○
の部分を書き換えるこでボーダーが引けます。
上下左右に線を引く
![](https://hrdyuic.com/wp-content/uploads/bc7a6fe8ccfd441c1e589444d1e3161c.jpg)
![](https://hrdyuic.com/wp-content/uploads/bc7a6fe8ccfd441c1e589444d1e3161c.jpg)
.post_content blockquote::before {
border: solid 1px #c7254e;
}
上のみに線を引く
![](https://hrdyuic.com/wp-content/uploads/847923f2482bde2f52befc7c7d9e1f56.jpg)
![](https://hrdyuic.com/wp-content/uploads/847923f2482bde2f52befc7c7d9e1f56.jpg)
.post_content blockquote::before {
border-bottom: solid 1px #c7254e;
}
右のみに線を引く
![](https://hrdyuic.com/wp-content/uploads/27f442ffd38abb3191796ffe61828e0f.jpg)
![](https://hrdyuic.com/wp-content/uploads/27f442ffd38abb3191796ffe61828e0f.jpg)
.post_content blockquote::before {
border-left: solid 1px #c7254e;
}
下のみに線を引く
![](https://hrdyuic.com/wp-content/uploads/9a8ee1b99a93e636d32261db8ab3ef31.jpg)
![](https://hrdyuic.com/wp-content/uploads/9a8ee1b99a93e636d32261db8ab3ef31.jpg)
.post_content blockquote::before {
border-top: solid 1px #c7254e;
}
左のみに線を引く
![](https://hrdyuic.com/wp-content/uploads/768b6db94c6b93346a6586813a21419c.jpg)
![](https://hrdyuic.com/wp-content/uploads/768b6db94c6b93346a6586813a21419c.jpg)
.post_content blockquote::before {
border-right: solid 1px #c7254e;
}
ボーダーのカスタマイズ
デザインサンプルのコード内にある「border-○○
: ○○ ○○ ○○
;」や「width: ○○
;」の○○
を書き換えるこでボーダーをカスタマイズできます。
太線
![](https://hrdyuic.com/wp-content/uploads/5e711298cc68f238f182f41b09c81388.jpg)
![](https://hrdyuic.com/wp-content/uploads/5e711298cc68f238f182f41b09c81388.jpg)
.post_content blockquote::before {
border-bottom: solid 5px #c7254e;
}
線の長さを調整
![](https://hrdyuic.com/wp-content/uploads/e6fdaa589a92d4dd48fd47466f7f2327.jpg)
![](https://hrdyuic.com/wp-content/uploads/e6fdaa589a92d4dd48fd47466f7f2327.jpg)
.post_content blockquote::before {
border-bottom: solid 1px #c7254e;
width: 56px;
}
破線
![](https://hrdyuic.com/wp-content/uploads/0013c4d585cf1f29cc9c44d1135f2004.jpg)
![](https://hrdyuic.com/wp-content/uploads/0013c4d585cf1f29cc9c44d1135f2004.jpg)
.post_content blockquote::before {
border-bottom: dashed 1px #c7254e;
}
二重線
![](https://hrdyuic.com/wp-content/uploads/2575b8c29fda0f384787d040e9bf0b92.jpg)
![](https://hrdyuic.com/wp-content/uploads/2575b8c29fda0f384787d040e9bf0b92.jpg)
.post_content blockquote::before {
border-top: double 5px #c7254e;
}
背景色透過
以下を変更することで、beforeからafterへ変更することができます。
- background: #c7254e; → 「border: solid 1px #c7254e;」に変更。
- color: #ffffff; → 「color: #c7254e;」に変更。
before
after
![](https://hrdyuic.com/wp-content/uploads/406e2132e0e176072bb8998cfe67f615.jpg)
![](https://hrdyuic.com/wp-content/uploads/406e2132e0e176072bb8998cfe67f615.jpg)
![](https://hrdyuic.com/wp-content/uploads/a4cfa69615eabccf98f1dbbc09cce7b4.jpg)
![](https://hrdyuic.com/wp-content/uploads/a4cfa69615eabccf98f1dbbc09cce7b4.jpg)
コードを表示
.post_content blockquote::before {
background: #c7254e;
border-radius: 50%;
color: #ffffff;
height: 40px;
left: 4px;
line-height: 90px;
text-align: center;
top: 2px;
width: 40px;
}
.post_content blockquote::after {
display: none;
}
.post_content blockquote::before {
border: solid 1px #c7254e;
color: #c7254e;
}
.post_content blockquote::after {
display: none;
}
クオーテーションマークの中央寄せ
※ 「コードを表示」を開き、右側のコードを左側のコードに追加することで中央寄せになります。
before
after
![](https://hrdyuic.com/wp-content/uploads/0b6d08e6887f90327979fef15faa81a1.jpg)
![](https://hrdyuic.com/wp-content/uploads/0b6d08e6887f90327979fef15faa81a1.jpg)
![](https://hrdyuic.com/wp-content/uploads/e543e765735292ea1ddda42cfce06869.jpg)
![](https://hrdyuic.com/wp-content/uploads/e543e765735292ea1ddda42cfce06869.jpg)
コードを表示
.post_content blockquote::before {
color: #c7254e;
}
.post_content blockquote::after {
display: none;
}
.post_content blockquote::before {
height: 45px;
top: 50%;
transform: translateY(-50%);
}
before
after
![](https://hrdyuic.com/wp-content/uploads/406e2132e0e176072bb8998cfe67f615.jpg)
![](https://hrdyuic.com/wp-content/uploads/406e2132e0e176072bb8998cfe67f615.jpg)
![](https://hrdyuic.com/wp-content/uploads/6ce5ad169fd4d12dc8926ee2f4604fb0.jpg)
![](https://hrdyuic.com/wp-content/uploads/6ce5ad169fd4d12dc8926ee2f4604fb0.jpg)
コードを表示
.post_content blockquote::before {
background: #c7254e;
border-radius: 50%;
color: #ffffff;
height: 40px;
left: 4px;
line-height: 90px;
text-align: center;
top: 2px;
width: 40px;
}
.post_content blockquote::after {
display: none;
}
.post_content blockquote::before {
top: 50%;
transform: translateY(-50%);
}
before
after
![](https://hrdyuic.com/wp-content/uploads/fcebdd0770c6b168fbf744d12aacda1f.jpg)
![](https://hrdyuic.com/wp-content/uploads/fcebdd0770c6b168fbf744d12aacda1f.jpg)
![](https://hrdyuic.com/wp-content/uploads/e44355cd043fbbd67f119a48e6349299.jpg)
![](https://hrdyuic.com/wp-content/uploads/e44355cd043fbbd67f119a48e6349299.jpg)
コードを表示
.post_content blockquote::before {
background: #ffffff;
border-radius: 50%;
color: #c7254e;
height: 40px;
left: 0;
line-height: 90px;
text-align: center;
top: 0;
width: 40px;
}
.post_content blockquote::after {
background: #c7254e;
content: "";
display: block;
height: 100%;
left: 0;
top: 0;
width: 40px;
z-index: -1;
}
.post_content blockquote::before {
top: 50%;
transform: translateY(-50%);
}
SWELL独自の引用ブロックの使い方
引用ブロックの挿入
管理画面メニューから、「投稿」>「新規投稿を追加」を選択します。
![](https://hrdyuic.com/wp-content/uploads/f1f9eda2239899763a2ea23bf72b3006.jpg)
![](https://hrdyuic.com/wp-content/uploads/f1f9eda2239899763a2ea23bf72b3006.jpg)
(ブロック挿入ツールを切り替え)から、「ブロック」>「テキスト」>「引用」を選択します。
![](https://hrdyuic.com/wp-content/uploads/817f6a7daf9f01548a302683e82dc1f7.jpg)
![](https://hrdyuic.com/wp-content/uploads/817f6a7daf9f01548a302683e82dc1f7.jpg)
これで引用ブロックが使えます。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
今回は以上です。