読者の悩み

SWELLで引用の部分のデザインをおしゃれにしたいです。
おすすめのCSSありますか?
コピペ可能なコード教えて欲しいです。



こんにちは!あいうえおLIFE(@pledge17uchs)です。
今日は、上記のお悩みを解決します。
SWELLは簡単におしゃれデザインできるのが特徴ですが、見出しや引用など、細かいデザイン変更できないのかな?って思いますよね。


ぼくもかつては悩んだので、CSSコードでできないかと試行錯誤の日々でした。
- SWELLで引用デザインをサルワカ風にする
- CSSを追加CSSにコピペするだけの簡単解説
- デザインはCSSごとで着せ替え可能
ブログやサイトの見た目にもこだわることで、離脱率の改善・滞在時間の上昇にも役立ちますよ。
どうぞ最後まで、お読みくださいね。
SWELLの引用デザイン【デフォルト】


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


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



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



わかりますよー。
引用部分って、流し読まれることも多いけど、SWELLに慣れてきたらデザインこだわりたいよね。
本記事で、SWELLユーザーが引用部分デザインを変えるには、「難易度・所要時間は5分」です。
SWELLの引用デザインをサルワカデザインに


引用部分のデザインをCSSで変更するのは、追加CSSにコピペだけなので、超簡単。
サルワカデザインに変更するメリット
- 埋め込んだTwitterがリンク切れでも、ツイート内容をおしゃれに表示してくれる
- 引用部分が1つのデザインとして、ブログ・サイトに溶け込む



引用部分もコンテンツとして、妥協せずこだわれたら最高だよね。
デフォルト引用デザインのデメリット
- 飽きがくる
- 見慣れすぎて、スルーされやすい



装飾が目に止まらないと、「あー、引用だから読み飛ばしていいか」って思っちゃうのが本音。
引用部分をCSSでサルワカデザインに


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


上記のサイトからCSSを拝借します。
手順は追加CSSにコピペのみ
引用デザインリストから選ぶ→WordPress管理画面→外観→カスタマイズ→追加CSSにコピペ。


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





上記では、「SWELL用に編集するポイント」を掲載。
とはいえ、本記事では「そのままコピペできるSWELL用にプログラミングしたCSSコード」を下記から解説していきます。
引用部分デザインのCSSコード


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



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



ブログは資産形成にもなるので、同時に仮想通貨投資で資産運用するなら、コインチェックもセルフバックして、始めちゃいましょう。
今日は最後まで、お読みいただきありがとうございました!