読 み 込 み 中 ...

【SANGO】引用の囲みをおしゃれにカスタマイズする方法

SANGOの引用のカスタマイズ方法

SHARE

どうもおはようポテト(@ohayoupoteto22)です。

引用のデザインを可愛くしたいんだぞ

ということで今回は

「SANGOの引用のデザインを可愛くしたい」

「引用ボックスが地味に見える」

という方に向けて「SANGOの引用ボックスを可愛くカスタマイズする方法」をまとめました。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

ブログ主

早速いってみよう！

引用ボックスの完成イメージ

オレンジver

SANGOの引用ボックスのカスタマイズ

カスタマイズ後の引用ボックスのイメージは上の通り。ウチのデザインそのまんまです。

SANGOカラーver

SANGOユーザーのサイトのテーマカラーに使われがちな水色。その色合いverのものも作ってみました。

好きな方を選んでね！

くるみ

簡単にカスタマイズの内容を説明すると…

カギ括弧で挟んでるように

色を薄めにしてあえて目立ちすぎないように

こんな感じです。

引用ボックスのカスタマイズ手順

方法はいたってシンプルかつ簡単です。

手順
step1
CSSコードをコピペする
step2
お好みの色にカスタマイズする
step3
引用ボックスを中央に配置する
(※任意)

「上の完成イメージとは違う色合いにしたい…」という場合はstep2で色を変更してみてください。

すぐ終わりそうだね！

くるみ

バックアップを忘れずに

早速カスタマイズしていきたいところですが万が一の事態を考え、事前にバックアップを取っておくことをオススメします。

「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。

WordPressでのCSSのバックアップの取り方【WordPress】CSSをカスタマイズする際のバックアップの取り方

ブログ主

備えあれば何とやらだね

SANGOの引用デザインのカスタマイズ方法

CSSコードをコピペする

「追加CSS」に追加

「テーマエディター」を使って追加

FTPソフトを使って追加

以上のどれかの方法でカスタマイズコードをコピペします。

ブログ主

「追加CSS」が最もお手軽にできるよ

「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。

WordPressでCSSコードを追加する方法【初心者向け】WordPressでCSSを編集する3つの方法

オレンジver

.entry-content blockquote{
  display: inline-block;
  border:initial!important;
  font-size: .95em;
  padding: 2em 2.7em 1em 3.5em;
  color:#555; /*文字色*/
}
@media only screen and (max-width: 480px){
  .entry-content blockquote{
    padding: 1.7em 2em .7em 3.5em;
  }
}
.entry-content blockquote::before {
  border-left: 3px solid rgba(255,179,107,.3); /*囲みの色*/
  border-top: 3px solid rgba(255,179,107,.3); /*囲みの色*/
  width:2.1em;
  height:2.1em;
  top:0;
  left:0;
  padding-left: .6em;
  padding-top: .5em;
  color:rgba(255,179,107,.6); /*アイコンの色*/
}
.entry-content blockquote::after{
  content:"";
  position:absolute;
  border-right: 3px solid rgba(255,179,107,.3); /*囲みの色*/
  border-bottom: 3px solid rgba(255,179,107,.3); /*囲みの色*/
  width:4em;
  height:4em;
  bottom:0;
  right:0;
}
.entry-content blockquote{
  display: inline-block;
  border:initial!important;
  font-size: .95em;
  padding: 2em 2.7em 1em 3.5em;
  color:#555;
}
@media only screen and (max-width: 480px){
  .entry-content blockquote{
    padding: 1.7em 2em .7em 3.5em;
  }
}
.entry-content blockquote::before {
  border-left: 3px solid rgba(255,179,107,.3);
  border-top: 3px solid rgba(255,179,107,.3);
  width:2.1em;
  height:2.1em;
  top:0;
  left:0;
  padding-left: .6em;
  padding-top: .5em;
  color:rgba(255,179,107,.6);
}
.entry-content blockquote::after{
  content:"";
  position:absolute;
  border-right: 3px solid rgba(255,179,107,.3);
  border-bottom: 3px solid rgba(255,179,107,.3);
  width:4em;
  height:4em;
  bottom:0;
  right:0;
}

SANGOカラーver

.entry-content blockquote{
  display: inline-block;
  border:initial!important;
  font-size: .95em;
  padding: 2em 2.7em 1em 3.5em;
  color:#555; /*文字色*/
}
@media only screen and (max-width: 480px){
  .entry-content blockquote{
    padding: 1.7em 2em .7em 3.5em;
  }
}
.entry-content blockquote::before {
  border-left: 3px solid rgba(107,182,255,.25); /*囲みの色*/
  border-top: 3px solid rgba(107,182,255,.25); /*囲みの色*/
  width:2.1em;
  height:2.1em;
  top:0;
  left:0;
  padding-left: .6em;
  padding-top: .5em;
  color:rgba(107,182,255,.5); /*アイコンの色*/
}
.entry-content blockquote::after{
  content:"";
  position:absolute;
  border-right: 3px solid rgba(107,182,255,.25); /*囲みの色*/
  border-bottom: 3px solid rgba(107,182,255,.25); /*囲みの色*/
  width:4em;
  height:4em;
  bottom:0;
  right:0;
}
.entry-content blockquote{
  display: inline-block;
  border:initial!important;
  font-size: .95em;
  padding: 2em 2.7em 1em 3.5em;
  color:#555;
}
@media only screen and (max-width: 480px){
  .entry-content blockquote{
    padding: 1.7em 2em .7em 3.5em;
  }
}
.entry-content blockquote::before {
  border-left: 3px solid rgba(107,182,255,.25);
  border-top: 3px solid rgba(107,182,255,.25);
  width:2.1em;
  height:2.1em;
  top:0;
  left:0;
  padding-left: .6em;
  padding-top: .5em;
  color:rgba(107,182,255,.5);
}
.entry-content blockquote::after{
  content:"";
  position:absolute;
  border-right: 3px solid rgba(107,182,255,.25);
  border-bottom: 3px solid rgba(107,182,255,.25);
  width:4em;
  height:4em;
  bottom:0;
  right:0;
}

お好みの色にカスタマイズする

ここは「上の完成イメージとは違う色合いにしたい」という方向け。

コピペしたCSSの「/*〇〇色*/」とあるところのカラーコードを、それぞれお好みの色にしてください。

引用ボックスを中央に配置する

上のコードだけだと引用ボックスはPCから見ると左揃えで配置されます。

もし中央揃え配置したい場合は

<div style="text-align:center;">
...
</div>

このように中央揃えを指定したdivタグで囲んであげ、

 

.entry-content blockquote{
  text-align: left;
}

引用文を左揃えにしてあげればOKです。

 

ここまで終わればカスタマイズは終了。お疲れ様です！

お疲れ様！

くるみ

CSSの変更が反映されない場合

「あれ…?CSSが反映されないぞ…」となった場合は、キャッシュが原因であることが多いので以下の2つの方法を試してみてください。

キャッシュ系プラグイン

「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。

プラウザのキャッシュを削除

お使いのブラウザのキャッシュを削除してみてください。

Chromeをお使いの場合は

Windows :［Shift］＋［Ctrl］＋［Delete］キー

Mac：［shift］＋［command］＋［delete」キー

上のショートカットキーで削除できます。

まとめ

以上、SANGOの引用ボックスのカスタマイズ方法でした。

「もっとド派手にカスタマイズしたい」という方は、以下の記事で今までのSANGOカスタマイズをまとめているので参考にしてみてください。

コピペでできるSANGOのカスタマイズまとめ【SANGOカスタマイズ総まとめ】サイトをもっと魅力的に!

参考になれば幸いです！では⸝⸝- ̫ -⸝⸝

参考になったらシェアしよう

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


前の記事

SANGOの吹き出しのカスタマイズ方法
【SANGO】吹き出しの色をカスタマイズしておしゃれにする方法

次の記事

【SANGOカスタマイズ総まとめ】サイトをもっと魅力的に!
コピペでできるSANGOのカスタマイズまとめ