メニュー

【SWELLカスタマイズ】引用部分をサルワカ風に変更するCSS【コピペOK】

SWELLquote引用

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

悩む人

SWELLの引用ブロックのスタイル「クオーテーションマーク表示」のデザインがシンプルすぎるので、サルワカサイト風にしたいです。

コピペ可能なCSSコードや手順を教えてください。

あいうえおLIFE

今日は「お悩み解決に役立つ内容」をお伝えしていきますね。

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

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

ぼくも「引用だって大事な部分だからグレースケールじゃ目立たないよ!」って思い、カスタマイズできるようにコードを探したり、試行錯誤しました。

本記事の結論
  • サルワカさん記事からお気に入り引用ブロックデザインを見つける→「SWELL設定」>「エディター設定」>「その他」>引用:スタイル「クオーテーションマーク表示」にする
  • 「SWELL設定」>「FontAwesome」>FontAwesomeの読み込み:読み込み方「CSSで読み込む」とバージョン「v5」にチェック
  • 選んだ引用ブロックデザインの「CSSコード」を編集してSWELLに対応させて、追加CSSへコピペ

本記事では手順の詳細や選んだCSSコードの編集ポイントを解説します。

おしゃれで魅力的な「引用ブロックデザイン」が30種類を掲載しているサルワカさん記事、CSSで作る!魅力的な引用デザインのサンプル30(blockquote)がおすすめ。

サルワカさん引用ブロックデザインおしゃれ
引用:魅力的な引用デザインのサンプル30

上記のようなおしゃれな引用ブロックデザインをSWELLにも実装したい。

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

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

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

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

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

コピペした2箇所の書き換え
コピペした2箇所の書き換え

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

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

編集したコードを「外観」>「カスタマイズ」>「追加CSS」へコピペして完了。

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

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

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

本記事を読むことで、SWELLの引用ブロックデザインをサルワカ風にすることが可能で、難易度は・所要時間は10分です。

事前準備にすることやコードをSWELL対応に編集する箇所も、細かくお伝えしていきます。

あいうえおLIFE

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

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

  • 「副業スキルで複数収入」がテーマ
  • 楽天銀行・楽天カード・楽天証券・イオン株・SWELL・UQモバイル・複数ASP愛用者
  • 2サイト合計最高月間1万5,000PV
  • ブログ収益:1万〜2万円 / 月
  • 「副業スキルで複数収入」がテーマ
  • 楽天銀行・楽天カード・楽天証券・イオン株・SWELL・UQ・ASP愛用者
  • 2サイト合計最高月間1万5,000PV
  • ブログ収益:1万〜2万円 / 月
タップできるもくじ

SWELLの引用ブロックのデザインを変更する手順

ロケットみたいな画像
Business vector created by pch.vector - www.freepik.com
STEP
サルワカさん記事からお気に入り引用ブロックデザインを見つける
サルワカ引用部分デザイントップページ画像
サルワカ「引用デザイン」サンプル

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

引用:サルワカ

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

おすすめの引用ブロックデザイン30個から選びます。

STEP
「SWELL設定」>「エディター設定」>「その他」>引用:スタイルで「クオーテーションマーク表示」にする

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

STEP
「SWELL設定」>「FontAwesome」>FontAwesomeの読み込み:読み込み方「CSSで読み込む」とバージョン「v5」にチェック

FontAwesomeアイコンを使うので、読み込み設定が必要です。

悩む人

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

STEP
選んだデザインの「CSSコード」をSWELL対応に編集する

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

  • blockquote
  • font-family: FontAwesome;
あいうえお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;
}

注意点とよくある質問

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

確認すること

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

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

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

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

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

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引用ブロックがおしゃれだと読者は満足する

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

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

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

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

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

読者満足度の高い記事が増えてきたら、SWELL導入時のテーマ購入費用の回収や、アドセンスより報酬単価の高いASPアフィリエイトで稼ぐことに挑戦しましょう。

A8.netでASP登録や、5万円以上をセルフバックしておくとよいので、A8.netのセルフバック【自己アフィリ】で5万円稼ぐ案件とは?【体験談】の記事がおすすめ。

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

スポンサーリンク

タップできるもくじ