ブログのカスタマイズ

WordPressのテーマ「JIN」の引用の囲みのカスタマイズ

このブログ「いつもていねいに」を書いている小田やかたです。
プロフィール @ottaka18

本ブログはWordPressの有料テーマ「JIN」を使っています。

JINはデフォルトでも十分オシャレなテーマなので、あまりカスタマイズはしていないのですが、引用の囲みを少しおしゃれにしようと思いカスタマイズしました。

これまでの引用の囲みは左の画像、それを右の画像のとおり、青地にして左に青線を入れました。

さて、その方法ですが、私はCSSについてはほとんどわかっていません。

ということで、いつもそうなのですが、ネットで公開されている同じような事例のCSSのコードを参考にさせていただきました。

CSSに書いたコードは以下です。


/*-- 引用 --*/
.cps-post-main blockquote {/*ボックス全体*/

padding: 1em 1.5em 0.1em 3em;/*ボックスの中のアキ調整*/
background: #f2faff;/*最初に設定した背景色*/
border-left: 4px solid #9dd4ff;/*左に線を引く*/
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);/*少し影をつける*/
}
.cps-post-main blockquote cite{/*ボックスの参照先部分*/
display: block;/*ブロック要素にして*/
text-align: right;/*右寄せに*/
margin:0;
}

コードを書く場所は、WordPressの 外観>カスタマイズ>追加CSS です。

参考にさせていただいたのは、次のサイトです。

ちなみに、先日、リストの表示もカスタマイズしましたので、以下の記事も参考にしてください。

WordPressのテーマ「JIN」のリストのカスタマイズ 本ブログはWordPressの有料テーマ「JIN」を使っています。 JINはデフォルトでも十分オシャレなテーマなので、あまりカス...

リストの行間の幅を整え、マークを大きくしました。

この記事は以上です。

もし、少しでも参考になった内容があれば、下の「いいね」ボタンを押してください。励みになります!

小田やかた
小田やかた
このブログの更新情報や、iPhone・iPadを活用した効率的なインプット・アウトプットの方法をツイッターで発信しています。ぜひフォローしてください。

今すぐFollow!

小田やかた を

このブログには、iPhone・iPad・Apple Watch、アプリ、Kindle出版、ブログ運営などに関する記事があります。カテゴリーページや下にある「関連記事」を、ぜひご覧ください。

ABOUT ME
小田やかた
ブロガー&Kindle作家。二人の子どもを持つ共働き家庭のサラリーマンです。(プロフィールの詳細
関連記事