サイトは大事

WordPressの引用(blockquote)をオシャレにしたい

更新日:

こんにちは、マユハルです

みなさんWordpressでブログ書いてますか?
WordPressはテーマを使って簡単にオシャレなページができて便利です。

今のテーマも使いやすくて良いのですが、1つ変えたいなと思っているところがあります。
それは、引用(blockquote)です。

今回はCSSで自分好みのblockquoteに変えてみたいと思います。

スポンサーリンク

テーマで設定されている引用の形式

まずは現状の確認です。

WordPressは引用する文章を選択して、引用ボタンを押すだけで引用の形式にしてくれます。
これはなかなか便利ですね。

今のテーマで引用すると次のような形式になります。
(画像で表示しています。)

2017-01-10_15h33_41

なんだか色が地味ですね。
引用部分の周りの余白も大きすぎるような気がします。

気になる点をCSSで修正していきましょう。
ただし、引用として守らないといけない部分は残すようにします。具体的には・・

  • ダブルコーテーションで始める
  • 引用部分が明確にわかるように枠・色の表現を変える

オシャレな引用の方法

オシャレな引用に変えるために次の3つの作業を行います。

  1. ダブルコーテーションをオシャレに変える
  2. 余白を調整する
  3. 色を調整する

ダブルコーテーションをオシャレに変える

元の引用のダブルコーテーションは画像を使っていました。

その画像をリセットして、FontAwesomeのフォントを使います。

.post blockquote{
    background-image:none;
}

.entry-content blockquote::before {
    content: '\f10d';
    font-family: 'FontAwesome';
}

少し小さくなってかわいらしい感じになりましたね。

2017-01-10_16h49_31

余白を調整する

続いて余白を調整します。

先ほどのbackground-imageをリセットした部分の下に余白の設定を追加します。

.post blockquote{
    background-image:none;
    padding-top: 5px;
    padding-bottom: 5px;
}

上下の余白が詰まっていい感じになりました。

2017-01-10_16h58_17

色を調整する

最後に色の調整です。

さらに枠の指定と背景色の指定を追加します。

.post blockquote{
    background-image:none;
    padding-top: 5px;
    padding-bottom: 5px;
    border-color:#0000ff;
    border-width: 1px;
    border-style: solid;
    background-color:#e6ffff;
}

いかがでしょうか、最初よりだいぶオシャレになったような気がします。
場所も取らないので見やすくもなったのではないでしょうか。

引用は権利者に無断で行われるもので、法(日本では著作権法第32条)で認められた合法な行為であり、権利者は引用を拒否することはできない[3]。権利者が拒否できるのは、著作権法の引用の要件を満たさない違法な無断転載等に限られる。

引用:Wikipedia(引用)

大事なこと

WordPressはテーマを使うだけでいろいろなデザインが使えます。

そこに加えてCSSを少し追加すれば自分の好みに合わせて微調整も可能です。

CSSの修正方法さえ覚えれば後は一つづつ変えていくだけです。
慣れるまでは何度も確認しながらになりますが、難しいことではないのでぜひ挑戦してみてください。


mayuharu-ad2

スポンサーリンク

mayuharu-ad2

スポンサーリンク

前後の記事

-サイトは大事

Copyright© 40代で無職になるとどうなる? , 2017 AllRights Reserved.