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

2021 11/23

2021.11.23 2021.11.23

読者の悩み

悩む人

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

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

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

あいうえおLIFE

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

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

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

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

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

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

本記事で解決できること

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

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

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

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

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

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

下記のとおり。

くろーむ

シンプルがゆえに飽きちゃったんだけど、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";」に書き換える