メニュー

SWELL引用ブロックをカスタマイズする手順5つ【デザイン4例】

カスタマイズ
CSS SWELL
約7分
SWELLquote引用
記事内に広告を含みます

この記事には広告を含む場合があります。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

SWELLの引用ブロックのデザインをサルワカ風にしたい人

SWELLの引用ブロックのスタイル「クオーテーションマーク表示」のデザインがシンプルすぎるので、サルワカサイト風にしたいです
コピペ可能なCSSコードや手順を教えてください

あいうえおLIFE

今日は「お悩み解決に役立つ内容」をお伝えしていきます！信頼性の担保は下記を参照ください。

あいうえおLIFEのアバター あいうえおLIFE

サイト運営者について : 「副業スキルで複数収入」がテーマ / 楽天銀行・楽天カード・楽天証券・イオン株・SWELL・UQモバイル・複数ASP愛用者 / 2サイト合計最高月間1万5,000PV / ブログ収益：月3万〜4万円

SWELLの引用ブロック「クオーテーションマーク表示」のデザインはシンプルなので、「おしゃれなWordPressテーマSANGOで代表的なサルワカサイト風のデザインに変更したい」と思うことありますよね…

ぼくも「引用だって大事な部分だからグレースケールじゃ目立たないよ！」と思い、コピペ可能なCSSコードや手順が知りたくて日々試行錯誤しました。

結論（本記事の内容）
  • SWELLの引用ブロックのデザインをサルワカ風に変更する5つの手順
  • デフォルトの引用デザインのデメリットと変更するメリット

目次以降では詳細な理由や具体例を、画像も用いて解説します。

SWELLの引用ブロックのデフォルト

SWELL設定_エディター設定_その他_引用-スタイル【クオーテーションマーク表示】
デフォルトのデザインはがシンプル

準備から導入までの手順は下記のとおり（先にデザインコードを見る）。

  1. サルワカさん記事からお気に入り引用ブロックデザインを見つける
  2. 「SWELL設定」＞「エディター設定」＞「その他」＞引用：スタイルで「クオーテーションマーク表示」にする
  3. 「SWELL設定」＞「FontAwesome」＞FontAwesomeの読み込み：読み込み方「CSSで読み込む」とバージョン「v5」にチェック
  4. 選んだデザインの「CSSコード」をSWELL対応に編集する
  5. 編集したコードを「外観」＞「カスタマイズ」＞「追加CSS」へコピペ

選んだデザインの「CSSコード」をSWELL対応に編集するには2つのポイントがあります。

SWELL対応にコードを編集する2箇所

  • blockquote
  • font-family: FontAwesome;

ぼくも実際に活用して、作業時間はコードの書き換えのみで10分でできました。

姉妹サイトの引用ブロックデザイン

人生を変えた映画・アニメBlogの引用ブロックデザイン
人生を変えた映画・アニメBlog

本記事を読むことで、SWELLの引用ブロックデザインをサルワカ風にすることが可能で、難易度は・所要時間は10分。事前準備にすることやコードをSWELL対応に編集する箇所も、細かくお伝えしていきます。

あいうえおLIFE

ブログやサイトのテーマに合った表現ができるので、SWELLユーザーとの差別化や、読者満足度アップにもつながりますよ。

今日はどうぞ最後まで、お読みくださいね。

タップできるもくじ

SWELLの引用ブロックのデザインをサルワカ風に変更する5つの手順

ロケットみたいな画像
Business vector created by pch.vector - www.freepik.com

SWELLの引用ブロックを下記のようなデザインに変更する手順を5STEPで解説します。

サルワカさん引用ブロックデザインおしゃれ
引用：魅力的な引用デザインのサンプル30
STEP
サルワカさん記事からお気に入り引用ブロックデザインを見つける
サルワカ引用部分デザイントップページ画像
引用：サルワカ「引用デザイン」サンプル

サルワカはあらゆることを分かりやすく解説するメディアです。何か分からないことがあったときはサルワカへどうぞ！

引用：サルワカ

WordPressテーマ「SANGO」でおなじみのサルワカさんです。

おしゃれで魅力的な「引用ブロックデザイン」が30種類を掲載しているサルワカさん記事、CSSで作る！魅力的な引用デザインのサンプル30（blockquote）から選びます。

サルワカ | サルでも分かる図解説...
CSSで作る！魅力的な引用デザインのサンプル30（blockquote）
STEP
スタイルを「クオーテーションマーク表示」にする

「SWELL設定」＞「エディター設定」＞「その他」＞「引用」と進みます。

SWELLのエディター設定で「引用ブロック」のスタイルを切り替え

その他＞引用：スタイルでクオーテーションマーク表示
引用：スタイルでクオーテーションマーク表示

デフォルトではスタイルが「シンプル」になっているので変更。

STEP
「CSSで読み込む」とバージョン「v5」にチェック

「SWELL設定」＞「FontAwesome」＞「FontAwesomeの読み込み：読み込み方」と進みます。FontAwesomeアイコンを使うので、読み込み設定が必要。

※表示速度が遅くなることはないです

FontAwesome読み込む準備
FontAwesome読み込む準備

表示速度が遅くなるかもしれないと思って、「読み込まない」設定にしてたよ…

STEP
選んだデザインの「CSSコード」をSWELL対応に編集する
コピペした2箇所の書き換え
コピペした2箇所の書き換え

サルワカさんコードを書き換える箇所

  • blockquote →「.post_content blockquote」と書き換え
  • font-family: FontAwesome; →「font-family: "Font Awesome 5 Free";」と書き換え
あいうえおLIFE

該当箇所はすべて変更するので、長いコードだと複数箇所書き換えが必要です。

STEP
編集したコードを「外観」＞「カスタマイズ」＞「追加CSS」へコピペ
追加CSSにコピペ箇所画像
コピペは追加CSSへ

コードをコピペするときは「半角入力や半角スペース」など間違えないように注意。

以上の5ステップです。サルワカデザインをSWELLに対応させた引用部分ブロックCSSコードを下記から紹介（サルワカさん、ありがとうございます）。


①：少しカラフルなカード風で引用符を横に

カラフル引用符
左端に帯と影付きイタリック
/*SWELL引用デザインCSS*/
.post_content blockquote {
    position: relative;
    padding: 10px 15px 10px 60px;
    box-sizing: border-box;
    font-style: italic;
    background: #f5f5f5;
    color: #777777;
    border-left: 4px solid #9dd4ff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}

.post_content blockquote:before{
    display: inline-block;
    position: absolute;
    top: 15px;
    left: 15px;
    content: "\f10d";
    font-family: "Font Awesome 5 Free";
    color: #9dd4ff;
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
}

.post_content blockquote p {
    padding: 0;
    margin: 7px 0;
    line-height: 1.7;
}

.post_content blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}
あいうえおLIFE

ぼくが運営している他のサイトで以前使用していました。

②：スマートデザイン

スマートデザイン引用符
当サイトでも採用のおしゃれさ
/*SWELL引用デザインCSS*/
.post_content blockquote {
    position: relative;
    padding: 10px 15px 10px 50px;
    box-sizing: border-box;
    font-style: italic;
    border: solid 2px #464646;
    color: #464646;
}

.post_content blockquote:before{
    display: inline-block;
    position: absolute;
    top: 20px;
    left: 15px;
    content: "\f10d";
    font-family: "Font Awesome 5 Free";
    color: #77c0c9;
    font-size: 25px;
    line-height: 1;
    font-weight: 900;
}

.post_content blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}

.post_content blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

③：ボックスの角に丸い引用マーク

ボックスの角に丸い引用マーク
ポップなデザインが好きな人へ
/*SWELL引用デザインCSS*/
.post_content blockquote {
    position: relative;
    padding: 7px 16px;
    box-sizing: border-box;
    font-style: italic;
    color: #464646;
    border: solid 3px #72ccf4;
}

.post_content blockquote:before{
    display: inline-block;
    position: absolute;
    top: -20px;
    left: -20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    text-align: center;
    content: "\f10d";
    font-family: "Font Awesome 5 Free";
    background: #72ccf4;
    color: #FFF;
    font-size: 22px;
    font-weight: 900;
}

.post_content blockquote:after{
    display: inline-block;
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    text-align: center;
    content: "\f10e";
    font-family: "Font Awesome 5 Free";
    background: #72ccf4;
    color: #FFF;
    font-size: 22px;
    font-weight: 900;
}

.post_content blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}

.post_content blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

④：上から吊り下げてみた場合（SWELL仕様）

引用ブロックSWELL仕様デザイン
引用ブロックSWELL仕様デザイン

2022年11月時点の情報で当サイトが採用する「SWELL仕様」の引用ブロックデザインで、参考コードを少し調整して使いやすくしました。

上部線とアイコンの背景色を「サイトに設定しているメインカラー」にブロック背景色を「サイトに設定している薄いメインカラー」に

/*サルワカ引用デザインCSS-22青バージョン*/
.post_content blockquote {
    position: relative;
    padding: 20px 20px 5px 50px;
    box-sizing: border-box;
    font-style: italic;
    color: #555; /*テキストカラー*/
    background-color: var(--color_main_thin)!important;
    border-top: solid 3px var(--color_main)!important;
}
.post_content blockquote:before{
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 30px;
    text-align: center;
    content: "\f10d";
    font-family: "Font Awesome 5 Free";
    color: #fcfcfc;
    font-size: 20px;
    line-height: 30px;
    background: var(--color_main)!important;
    font-weight: 900;
}
.post_content blockquote p {
    position: relative;
    padding: 0;
    margin: 10px 0;
    z-index: 3;
    line-height: 1.7;
}
.post_content blockquote cite {
    display: block;
    text-align: left;
    color: #888888;
    font-size: 0.9em;
}
.post_content blockquote::after {
	display:none;/*右下の引用符アイコンなし*/
}

注意点とよくある質問

うまくCSSが反映しない…←まずはキャッシュのクリアを試す

確認すること

  • 「blockquoate」の部分を「.post_content blockquote」に変更しているか
  • 「font-family: Font Awesome;」という部分を「font-family: "Font Awesome 5 Free";」に書き換えているか
SWELL用に書き換えポイント
サルワカサイトから少し編集が必要

コードの書き換えや「半角表示・半角スペース」を確認。

他の引用ブロックデザインにするには？

サルワカ記事「CSSで作る！魅力的な引用デザインのサンプル30（blockquote）」から、好きなデザインを選び、本記事で紹介したSWELLユーザーが編集すべきポイントだけコード変更します。

右下の引用符のデフォルトデザインを消したいんだけど？
右下デフォルト引用符を消したい

下記のCSSをコードに追加してください。

.post_content blockquote::after {
	display:none;/*右下の引用符アイコンなし*/
}

デフォルトの引用デザインはシンプルでカッコいいが飽きる

cssデザイナー
Technology vector created by pikisuperstar - www.freepik.com

下記のデザインのとおり、非常にシンプルです。

SWELLデフォルト引用
SWELLのデフォルトの引用デザイン

シンプルがゆえに飽きちゃったから、SANGOのサルワカさん風におしゃれデザイン変えたいんだよな。

あいうえおLIFE

引用部分って、流し読まれることも多いけど、SWELLに慣れてきたらデザインこだわりたいよね。

①：デフォルト引用デザインのデメリット

quote画像
Background vector created by Harryarts - www.freepik.com
  • 飽きがくる
  • 見慣れすぎて、スルーされやすい

装飾が目に止まらないと、「あー、引用だから読み飛ばしていいか」って思っちゃうのが本音かも。

②：サルワカデザインに変更するメリット

  • 埋め込んだTwitterがリンク切れでも、ツイート内容をおしゃれに表示してくれる
  • 引用部分が1つのデザインとして、ブログ・サイトに溶け込む
あいうえおLIFE

引用部分もコンテンツとして、妥協せずこだわれたら最高だよね。

本記事では「そのままコピペできるSWELL用に編集したCSSコード」を紹介したので、ぜひ使ってくださいね。SWELLでオリジナル「見出しデザイン」にしたい場合は、SWELLの見出しをCSSでサルワカデザインに【SANGO風でおしゃれ】を参照してください。

あわせて読みたい
SWELLの見出しをCSSで変更する3つの手順【デザイン5例】

まとめ | SWELL引用ブロックがおしゃれだと読者は満足する

SWELL引用ブロックがおしゃれだと読者は満足する
SWELL引用ブロックがおしゃれだと読者は満足する

今日はSWELLの引用ブロックのデザインをサルワカ風にしたい人に向けて、下記を解説しました。

  • サルワカさん記事で選んだお気に入り引用ブロックデザインの「CSSコード」をSWELL対応に編集させて追加CSSへコピペする手順
  • 事前準備する「SWELL設定」や「FontAwesome」の設定と注意点の解説
あいうえおLIFE

SWELLのデフォルト引用ブロックデザインがサルワカさんサイト風になるとおしゃれ度が一気に増しますし、記事内に抑揚がついて読者満足度もアップしますね。

SWELLでのブログ運営が楽しくなると記事投稿数やSEO評価も増えるので、収益アップにつながっていくこと間違いなし。

読者満足度の高い記事が増えてきたら、SWELL導入時のテーマ購入費用の回収や、アドセンスより報酬単価の高いASPアフィリエイトで稼ぐことに挑戦しましょう。A8.netでASP登録や、合計5万円以上のセルフバックからスタート。

A8.netのセルフバック【自己アフィリ】で5万円稼ぐ案件とは？【体験談】の記事をあわせてお読みください。

あわせて読みたい
SBI証券のセルフバックもオススメ【A8で5万稼ぐ案件を紹介】

今日は最後までお読みいただき、ありがとうございました！

カスタマイズ
CSS SWELL
タップできるもくじ