SWELLの引用ブロックのデザインをサルワカ風にしたい人
悩む人SWELLの引用ブロックのスタイル「クオーテーションマーク表示」のデザインがシンプルすぎるので、サルワカサイト風にしたいです。
コピペ可能なCSSコードや手順を教えてください。
あいうえおLIFE今日は「お悩み解決に役立つ内容」をお伝えしていきますね。
SWELLの引用ブロック「クオーテーションマーク表示」のデザインはシンプルなので、「おしゃれなWordPressテーマSANGOで代表的なサルワカサイト風のデザインに変更したい」と思うことありますよね…
ぼくも「引用だって大事な部分だからグレースケールじゃ目立たないよ！」って思い、カスタマイズできるようにコードを探したり、試行錯誤しました。
- サルワカさん記事からお気に入り引用ブロックデザインを見つける→「SWELL設定」＞「エディター設定」＞「その他」＞引用：スタイル「クオーテーションマーク表示」にする
- 「SWELL設定」＞「FontAwesome」＞FontAwesomeの読み込み：読み込み方「CSSで読み込む」とバージョン「v5」にチェック
- 選んだ引用ブロックデザインの「CSSコード」を編集してSWELLに対応させて、追加CSSへコピペ
本記事では手順の詳細や選んだCSSコードの編集ポイントを解説します。
おしゃれで魅力的な「引用ブロックデザイン」が30種類を掲載しているサルワカさん記事、CSSで作る！魅力的な引用デザインのサンプル30（blockquote）がおすすめ。
上記のようなおしゃれな引用ブロックデザインをSWELLにも実装したい。
SWELLのエディター設定で「引用ブロック」のスタイルを切り替え
※表示速度が遅くなることはないです
選んだデザインの「CSSコード」をSWELL対応に編集するには2つのポイントがあります。
サルワカさんコードを書き換える箇所
- blockquote →「.post_content blockquote」と書き換え
- font-family: FontAwesome; →「font-family: "Font Awesome 5 Free";」と書き換え
編集したコードを「外観」＞「カスタマイズ」＞「追加CSS」へコピペして完了。
ぼくも実際に活用して、作業時間はコードの書き換えのみで10分でできました。
姉妹サイトの引用ブロックデザイン
本記事を読むことで、SWELLの引用ブロックデザインをサルワカ風にすることが可能で、難易度は・所要時間は10分です。
事前準備にすることやコードをSWELL対応に編集する箇所も、細かくお伝えしていきます。
あいうえおLIFEブログやサイトのテーマに合った表現ができるので、SWELLユーザーとの差別化や、読者満足度アップにもつながりますよ。
今日はどうぞ最後まで、お読みくださいね。
SWELLの引用ブロックのデザインを変更する手順
サルワカはあらゆることを分かりやすく解説するメディアです。何か分からないことがあったときはサルワカへどうぞ！
引用：サルワカ
WordPressテーマ「SANGO」でおなじみのサルワカさんです。
おすすめの引用ブロックデザイン30個から選びます。
デフォルトではスタイルが「シンプル」になっているので、変更していきます。
FontAwesomeアイコンを使うので、読み込み設定が必要です。
悩む人表示速度が遅くなるかもしれないと思って、「読み込まない」設定にしてたよ…
SWELL対応にコードを編集する2箇所
- blockquote
- font-family: FontAwesome;
あいうえおLIFE該当箇所はすべて変更するので、長いコードだと複数箇所書き換えが必要です。
コードをコピペするときは「半角入力や半角スペース」など間違えないように注意。
以上の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;
}ぼくが運営している他のサイトで以前使用していました。
②：スマートデザイン
/*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";」に書き換えているか
コードの書き換えや「半角表示・半角スペース」を確認。
- 他の引用ブロックデザインにするには？
-
サルワカ記事「CSSで作る！魅力的な引用デザインのサンプル30（blockquote）」から、好きなデザインを選び、本記事で紹介したSWELLユーザーが編集すべきポイントだけコード変更します。
デフォルトの引用デザインはシンプルでカッコいいが飽きる
下記のとおりですね。
悩む人シンプルがゆえに飽きちゃったから、SANGOのサルワカさん風におしゃれデザイン変えたいんだよな。
あいうえおLIFE引用部分って、流し読まれることも多いけど、SWELLに慣れてきたらデザインこだわりたいよね。
デフォルト引用デザインのデメリット
- 飽きがくる
- 見慣れすぎて、スルーされやすい
悩む人装飾が目に止まらないと、「あー、引用だから読み飛ばしていいか」って思っちゃうのが本音かも。
サルワカデザインに変更するメリット
- 埋め込んだTwitterがリンク切れでも、ツイート内容をおしゃれに表示してくれる
- 引用部分が1つのデザインとして、ブログ・サイトに溶け込む
あいうえおLIFE引用部分もコンテンツとして、妥協せずこだわれたら最高だよね。
本記事では「そのままコピペできるSWELL用に編集したCSSコード」を紹介したので、ぜひ使ってくださいね。
SWELLでオリジナル「見出しデザイン」にしたい場合は、SWELLの見出しをCSSでサルワカデザインに【SANGO風でおしゃれ】を参照してくださいね。
まとめ | SWELL引用ブロックがおしゃれだと読者は満足する
今日はSWELLの引用ブロックのデザインをサルワカ風にしたい人に向けて、下記を解説しました。
- サルワカさん記事で選んだお気に入り引用ブロックデザインの「CSSコード」をSWELL対応に編集させて追加CSSへコピペする手順
- 事前準備する「SWELL設定」や「FontAwesome」の設定と注意点の解説
あいうえおLIFESWELLのデフォルト引用ブロックデザインがサルワカさんサイト風になるとおしゃれ度が一気に増しますし、記事内に抑揚がついて読者満足度もアップしますね。
SWELLでのブログ運営が楽しくなると記事投稿数やSEO評価も増えるので、収益アップにつながっていくこと間違いなし。
読者満足度の高い記事が増えてきたら、SWELL導入時のテーマ購入費用の回収や、アドセンスより報酬単価の高いASPアフィリエイトで稼ぐことに挑戦しましょう。
A8.netでASP登録や、5万円以上をセルフバックしておくとよいので、A8.netのセルフバック【自己アフィリ】で5万円稼ぐ案件とは？【体験談】の記事がおすすめ。
今日は最後までお読みいただき、ありがとうございました！