こんにちは、りくやです。
WordPressテーマの「JIN」を使っていて、大変満足しているものの、
初期設定だと、太文字の濃さが薄かったり、記事幅に少し違和感があったりしたので、
他のブロガーさんのサイトを参考に、追加CSSを少しいじくりました。
ちなみに現在、当ブログではAFFINGER5を使用しておりますが、
紹介しているコードなどはJINでも適用できますので、ぜひ参考にしてください。
追加したCSS
- 文字のフォントや太字の濃さ
- 行間や改行幅や文字幅
- 記事の幅と文字の大きさ
- オリジナルデザインの見出し(h2,h3,h4)
- ブログカード
こちらについて解説していきますので、ぜひ参考にしてください。
記事を見やすくするCSS
初期設定でも十分なのですが、こだわりたいという人向けですので。
文字のフォント
JINのフォントは3種類あり、サイト基本設定のフォント選択で選ぶことができます。
- デフォルト(no font)
- 角ゴシック(Noto Sans)
- 角丸ゴシック(Rounded M+ 1c)
デフォルトや角ゴシックが多いかと思いますが、太字にしたときに、
PC画面で見ると薄いというか、濃さが普通の文字とあまり変わらないんですよね。
body#nofont-style {
font-family: Noto, Hiragino Sans,Helvetica,Arial,sans-serif;
}
strong {
font-weight: 600;
}
こちらのフォントに変更したところ、太文字もくっきりと濃く表示されるようになりました。
また、フォントを変更しただけでも太字は濃くなりますが、より濃くするためにfont-weightを600に指定しました。
こちらは600の数字を900までにすることで濃さを選べるので、お好みで調節してみて下さい。
ちなみにこのフォント
実はこのフォントは、manablogのマナブさんが使われているフォントなのです。
manablogはすごく見やすいので、記事の幅や文字色など他にも参考にさせてもらっています。
行間や改行幅
文字が詰めこんであると、圧迫感があってどうも見づらいんですよね。
.cps-post-main p {
padding-bottom: 3em;/*改行後の余白の幅*/
line-height: 2em;/*行間*/
letter-spacing: 0.05em;/*文字間*/
}
改行後の余白が3em、文と文の行間を2em、文字と文字の間隔を0.05emに設定しました。
こちらは好みによって変えてみて下さい。
記事の幅
どのWordpressテーマも初期設定だと記事幅が設定されてなかったりするんですよね。
PCで見ると大丈夫なのですが、スマホで見ると画面いっぱいまで広がって圧迫感を感じるので、
お好みで92%から96%くらいの間で設定してあげましょう。
.cps-post {
width: 96.5%;
margin: 0 auto;
}
スマホ表示を確認しよう
レイアウトで気をつけたいのが、スマホ表示でも見やすいかどうか。
設定するのはPC画面だと思うので、PC用のレイアウトはきれいになっても、スマホで見るといまいち見づらいことが多々あります。
記事幅や文字の大きさの参考として、
スマホ画面で、横に19文字から21文字が収まるくらいの幅と文字の大きさがベストです。
当ブログもスマホ表示だと横に20文字が表示されるように設定して、他のサイトを見ても20文字か21文字のケースが多かったです。
ちなみに文字の大きさは14pxから17pxあたりがベストです。font-size: 14px; などのCSSで指定できます。
オリジナル見出しデザイン
JINに最初から備わっている見出しでも、種類が多いので困ることはないのですが、
どうしてもこだわりたかったので、オリジナルデザインの見出しを設定しました。
h2見出しのCSS
PC画面用はこちら、
.hl-custom h2{
padding: 20px 15px 18px;
margin-bottom: 35px;
font-size: 25px;
font-weight: 600;
padding-left: 40px;
padding-right: 40px;
letter-spacing: 1.2px;
color: #494949;/*文字色*/
background: #f7f7f7;/*背景色*/
border-left: solid 9px #c65151;/*左線（実線 太さ 色）*/}
スマホ画面用はこちら、
@media (max-width: 768px) {
.hl-custom h2 {
font-size: 16px;
font-weight: bold;
padding-left: 18px;
padding-right: 18px;}
}
h3見出しのCSS
PC画面用はこちら、
.hl-custom h3{
padding: 5px 15px 0px;
padding-bottom: 5px;
margin-bottom: 45px;
margin-top: 10px;
font-size: 20px;
font-weight: 600;
letter-spacing: 1.2px;
color: #333;/*文字色*/
border-left: solid 9px #c65151;/*左線（実線 太さ 色）*/}
スマホ画面用はこちら、
@media (max-width: 768px) {
.hl-custom h3 {
font-size: 16px;
font-weight: bold;
padding-left: 12px;
padding-right: 12px;}
}
h4見出しのCSS
PC画面用はこちら、
.hl-custom h4:before{font-family: “jin-icons”;
content: “\e90b”;/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1.2em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #c65151; /*アイコン色*/}
.hl-custom h4{position: relative;
font-size: 20px;
font-weight: 600;
margin-bottom: 30px;
padding-left: 1.5em;/*アイコン分のスペース*/
line-height: 1.4;}
h4見出しはチェックマークを使っているので、h4:beforeでチェックマークアイコンの設定をしています。
こちらはfontawesomeは使用せず、JINに備わっているアイコンを使うので、font-family: “jin-icons”;としています。
ちなみにチェックマークは、\e90bです。JINの公式ページにコードはのっているので参照して下さい。
スマホ画面用はこちら、
@media (max-width: 768px) {
.hl-custom h4:before{
padding-left: 10px;
}
.hl-custom h4 {
font-size: 16px;
padding-left: 2.2em;/*アイコン分のスペース*/
padding-right: 10px;
font-weight: bold;}
}
ブログカード
他のブロガーさんの記事を参考に、ブログカードも少しオリジナルにしてみました。
CSSはこちら、
/*ブログカードのタイトルをリンク色に変更*/
.blog-card-title {
color: #337ab7;
font-weight: bold;
text-decoration: none;}
/*ブログカードの説明文を消す*/
.blog-card-excerpt{
display:none;}
/*ブログカードに「続きを読む」を追加*/
a.blog-card{
padding-bottom:40px;
width: 92%;
margin: 0 auto;}
a.blog-card{
position: relative;}
a.blog-card:after{
position: absolute;
font-family: sans-serif,’Font Awesome 5 Free’;
content:’続きを読む \f101′;
font-weight: bold;
right:10px;
bottom: 10px;
padding:1px 10px;
background: #337ab7; /*背景色*/
color:#fff; /*文字色*/
font-size: .8em;
border-radius:2px;}
/*「あわせて読みたい」を消す*/
.blog-card-hl-box{
display:none;}
こちらもお好みでCSSを調整してみて下さい。なお、ブログカードの内部リンクについては、
ブログカードを使わずに、テキストスタイルのリンクもシンプルで気に入ってます。
これで記事の見やすさをアップするCSSは以上ですが、これからもいじくることがあれば追記していきたいと思っています。
