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

あいうえおLIFE

登録販売者∞WordPress∞動画編集

広島在住 / 医薬品登録販売者【薬・漢方・サプリメント】をお届けする営業パーソン / 衣食住ライフスタイルやメンタルヘルスケア/ 配置薬10年・WordPress2年・動画編集1年半 / 雑記ブログ:あいうえおLIFE【健康のススメ】「好きや得意なことを情報価値に」 / 特化ブログ:人生を変えた映画・アニメBlog「映画・アニメの体験価値を」/ 2サイト計月間7,000PV / 収益1万

プロフィール

読者の悩み

悩む人

SWELLで引用の部分のデザインをおしゃれにしたいです。

おすすめのCSSありますか？

コピペ可能なコード教えて欲しいです。

あいうえおLIFE

こんにちは！あいうえおLIFE(@pledge17uchs)です。

今日は、上記のお悩みを解決します。

SWELLは簡単におしゃれデザインできるのが特徴ですが、見出しや引用など、細かいデザイン変更できないのかな？って思いますよね。

例：見出しデザインのワンタッチ

ぼくもかつては悩んだので、CSSコードでできないかと試行錯誤の日々でした。

特に、難しいプログラミング知識も不要ですのでご安心を。

本記事で解決できること

SWELLで引用デザインをサルワカ風にする
CSSを追加CSSにコピペするだけの簡単解説
デザインはCSSごとで着せ替え可能

ブログやサイトの見た目にもこだわることで、離脱率の改善・滞在時間の上昇にも役立ちますよ。

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

目次（もくじ）

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

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

SWELLのデフォルトの引用デザインは、シンプルでカッコいいです。

下記のとおり。

「SWELL設定」＞「エディター設定」＞「その他」＞「引用：スタイル」で「クオーテーションマーク表示」にしておくと、本記事のCSSが綺麗に適用されます。

くろーむ

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

あいうえおLIFE

わかりますよー。

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

本記事で、SWELLユーザーが引用部分デザインを変えるには、「難易度・所要時間は5分」です。

SWELLの引用デザインをサルワカデザインに

quote画像 — Background vector created by Harryarts - www.freepik.com

引用部分のデザインをCSSで変更するのは、追加CSSにコピペだけなので、超簡単。

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

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

あいうえおLIFE

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

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

飽きがくる
見慣れすぎて、スルーされやすい

くろーむ

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

引用部分をCSSでサルワカデザインに

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

サルワカ | サルでも分かる図解説...

CSSで作る！魅力的な引用デザインのサンプル30（blockquote）画像を使わずにHTMLとCSSだけで実装できる「引用ボックス」のデザインを30個紹介します。シンプルなものからカッコイイものまで。

上記のサイトからCSSを拝借します。

手順は追加CSSにコピペのみ

引用デザインリストから選ぶ→WordPress管理画面→外観→カスタマイズ→追加CSSにコピペ。

CSSコードをSWELL用に書き換えるポイント

あいうえおLIFE

上記では、「SWELL用に編集するポイント」を掲載。

とはいえ、本記事では「そのままコピペできるSWELL用にプログラミングしたCSSコード」を下記から解説していきます。

引用部分デザインのCSSコード

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

サンプルとして、そのままコピペできるSWELL版コードを紹介します（サルワカさん！ありがとうございます！）。

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

/*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;
}

スマートデザイン

/*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ユーザーの場合は下記2点を確認

①「blockquoate」の部分を「.post_content blockquote」に変更する

②「font-family: Font Awesome;」という部分を「font-family: "Font Awesome 5 Free";」に書き換える

他のデザインにするには？: サルワカサイトから、好きなデザインを選び、本記事で紹介したSWELLユーザーが編集すべきポイントだけコード変更します。

以上、今日はSWELLの引用部分をサルワカデザインに追加CSSで変更する方法や、コピペできるコードを解説しました。

SWELLではワンタッチデザインに慣れているので、引用部分デザインをCSSで変更する発想は少なかったのではないでしょうか。

希望のサルワカデザインにCSSで変更してみてくださいね。

SWELLでオリジナル「見出しデザイン」にしたい場合は、下記の記事を参照してくださいね。

SWELLの見出しをCSSでサルワカデザインに【SANGO風でおしゃれ】

くろーむ

ブログ運営しながら、セルフバックで収益得つつ、アフィリエイトの感覚つかむなら下記の記事。

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

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

SWELLの引用デザインをサルワカデザインに

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

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

引用部分をCSSでサルワカデザインに

手順は追加CSSにコピペのみ

CSSコードをSWELL用に書き換えるポイント

引用部分デザインのCSSコード

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

スマートデザイン

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

注意点とよくある質問

サイト内キーワード