引用のデザインを楽々変更 スタイルCSSテンプレート

CSSコードをコピーぺーするだけで引用のデザインが変わる

ご訪問ありがとうございます!今回は引用のデザインについてのお話をしたいと思います。

引用を使って記事内でのアクセントしたい部分を注目させる。

「テーマ(テンプレート)は気に入っているけど、引用はあまり目立ちません・・・」と思っている人が沢山います。そういう時にテーマを変えるのではなく、引用のCSSスタイルだけ変更すれば良い!

五つの引用スタイルを紹介いたしますので、気に入りましたらお使いください。

CSSスタイルの変更方法

生のコードを見るだけで固まってしまう人が多いので、出来る限り分かりやすくやり方を頑張って教えます。

では、始めましょう!

先ずは 新しい引用コードを入れる所を探す。まぁ、探すって言うかガイドラインに従えばOKです。

  1. ワードプレスのアドミニストレーターパネルにログイン
  2. 外観
  3. カストマイズ
  4. カスタマイズメニュの中にCustom CSS(追加CSS)を探す
  5. Custom CSS(追加CSS)を開く
  6. 出てきた枠に気に入った引用のコードをコピーペーストする
  7. 保存

完了です。

スタイル1

CSSコート

blockquote {
max-width: 600px;
margin: 20px;
padding: 20px;
text-align: center;
font-family: serif;
font-size: 22px;
color: #38b6cd;
}

スタイル2

CSSコード

blockquote {
max-width: 600px;
margin: 20px;
padding: 20px;
text-align: center;
font-family: sans-serif;
font-size: 16px;
color: #7f7f7f;
border-top: 2px solid #38b6cd;
border-bottom: 2px solid #38b6cd;
}

スタイル3

CSSコード

blockquote {
max-width: 600px;
margin: 20px;
padding: 10px;
text-align: center;
font-family: sans-serif;
font-size: 16px;
color: #7f7f7f;
border-left: 6px solid #38b6cd;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}

スタイル4

CSSコード

blockquote {
max-width: 600px;
margin: 20px;
padding: 20px;
text-align: center;
font-family: sans-serif;
font-size: 16px;
color: #ffffff;
background-color: #38b6cd;
border-radius: 20px;
}

スタイル5

CSSコード

blockquote {
max-width: 600px;
margin: 20px;
padding: 20px;
text-align: center;
font-family: sans-serif;
font-size: 16px;
color: #5e5d5d;
background-color: #f1fbff;
border-radius: 20px;
}

是非、上記のCSSスタイルを使ってみてください。

返事を書く

コメントを入力してください
お名前を入力してください