SWELLテーマのガチレビューはこちら記事を読む

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

sponsored link

読者の悩み

悩む人

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

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

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

あいうえおLIFE

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

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

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

例:見出しデザインのワンタッチ
見出しワンタッチ
ワンタッチでデザインを変更

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

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

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

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

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

もくじ

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

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

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

下記のとおり。

SWELLデフォルト引用
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を拝借します。

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

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

追加CSSにコピペ箇所画像
コピペは追加CSSへ

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

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でオリジナル「見出しデザイン」にしたい場合は、下記の記事を参照してくださいね。

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

もくじ
閉じる