ブログ開設・改造

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

本ブログは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はデフォルトでも十分オシャレなテーマなので、あまりカス...

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


以上です。

本記事は参考になりましたか?
もし、少しでも参考になったことがあれば、フォロー&シェアしていただけるとうれしいです!!


また、「1分で読める書評ブログ」も運営していますので、興味があれば、ぜひご覧ください。

ABOUT ME
小田やかた
小田やかた
二人の子どもを持つ共働きサラリーマンパパ。現在、小学生と保育園児の子育てに奮闘中です。 本ブログは、iPhoneとPCでの情報管理、文章作成、タスク管理がメインテーマのブログです。知的生産のある暮らし(新しい価値を生む暮らし)を目指しています。 『アウトライナーのレシピ 〜思考・情報整理・文章作成がはかどる20の使い方〜』、『モブログの極意 〜モブログからモバイル知的生活へ〜』、『Apple Watchで何ができるか〜Apple Watchユーザーの起床から就寝までの実際の使い方を徹底公開〜』を出版。
関連記事