キャンペーン もっとみる エルピオでんき 切替は簡単! エルピオでんきへのお申し込みは、WEB(パソコン、スマートフォン)または、電話でおこなえます。 現在契約している電力会社の解約も自動的に行われる
ニュースリリース もっとみる OCN モバイル ONE もっとみる 楽天モバイル もっとみる Y!mobile もっとみる UQmobile もっとみる mineo NTT ドコモ と比較 au と比

バズ部「Xeory Extension」の引用タグのカスタマイズ

バズ部「Xeory Extension」で引用タグを用いた時のバックグラウンドの色などのカスタマイズ方法です。カスタマイズをおこなう場合は、あくまで自己責任でお願いいたします。

引用とは

自分の記事(ブログ)に公式サイトや本などから参考になった内容や公式サイトの記事そのものを一部転載する時ありますよね。

その時、自分の記事に他から引用・転載したことが分かるようにしなければなりません。

タグは

<blockquote>   </blockquote>

を使います。

分かりにくいですが引用されています。

20170125

カスタマイズ方法

今回は、バズ部「Xeory Extension」の引用タグの背景をもう少し濃くして、引用マークもはっきりさせたいと思います。

ワードプレス管理画面から

  1. 外観
  2. テーマの編集
  3. スタイルシート (style.css)

を選択すると

XeoryExtension: スタイルシート (style.css)の編集画面になります。

スタイルートのcontentの下記部分を探して下さい。

/* —————————————-
* content
—————————————- */

背景が薄かったので、background: #fafafa; の部分を枠線と同じ色 #e5e5e5; に変更しました。

変更前

.post-content blockquote {
clear: both;
margin: 0 0 28px;
padding: 30px 20px 35px 55px;
position: relative;
border: 1px #e5e5e5 solid;
background: #fafafa;
}

変更後

.post-content blockquote {
clear: both;
margin: 0 0 28px;
padding: 30px 20px 35px 55px;
position: relative;
border: 1px #e5e5e5 solid;
background: #e5e5e5;
}

引用マークの色も少し濃くしました。

変更前

.post-content blockquote:before {
content: '';
font-family: 'FontAwesome';
font-size: 36px;
color: #e7e7e7;
position: absolute;
top: 20px;
left: 10px;
}

変更後

.post-content blockquote:before {
content: '';
font-family: 'FontAwesome';
font-size: 36px;
color: #b2b2b2;
position: absolute;
top: 20px;
left: 10px;
}

どうですか少しだけ濃くなりました。

20170125-01

 

本日の注目記事はこちら



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です