こんにちはユウスケです。
今使っているワードプレステーマは「stork19」です。デザインも好きだし、使いやすくてあまり不満もありません。しかし、１つあげるとすれば「文字が小さいこと」です。スマホで見ていると目が疲れます。そこで、少しだけデザインをいじってみました。
目次
デザインをカスタムしてみた【Stork１９は文字が読みにくい】
それでは、今回やった変更点をみていきましょう。変更点は以下のとおりです。
- H2〜H4見出しの変更
- 本文の文字サイズの変更と行間の変更
- Boxのカスタマイズ
以上の3点です。順番にみていきましょう。
H2〜H4見出しと文字サイズの変更
Stork19のデフォルトの見出しはこんな感じです。
✔︎変更前
これでも問題ないですが。もっとシンプルな見出しが好きなんです。
✔︎変更後
マナブログ的な見出しにしてみました。シンプルすぎると思ったのですが、僕的には読みやすいので問題なしです。
H2〜H4の見出しソースコード
今回行った見出しのソースコードを貼っておきます。コピペして使って見てください。
✔︎H2
- /* H2見出し */
- .entry-content h2 {
- font-size:130%!important;
- font-weight:800!important;
- background: white !important;
- color:black !important;
- background: #f5f5f5 !important;
- border-left: 13px solid #3b5998!important;
- padding: 15px 0px 15px 10px ;
- margin: 30px 0px 30px;
- border-top:none;
- border-bottom:none;
- }
✔︎H3
- /* H3見出し */
- .entry-content h3 {
- font-size:130%!important;
- font-weight:800;
- border-left: 8px solid #3b5998 !important;
- padding: 15px 0px 15px 20px!important ;
- margin: 30px 0px 30px;
- border-top:none!important;
- border-bottom:none!important;
- }
✔︎H4
- /* H4見出し */
- .entry-content h4 {
- font-size:130%!important;
- font-weight:800;
- padding: .25em 0 .25em .75em;
- border-left:6px solid #3b5998!important;
- }
本文の文字サイズの変更と行間の変更
「Stork１９」の本文の文字は小さくて読みにくいです。１番変えたかった部分ですが、なかなか重い腰が上がらずやっと変更できました。
✔︎変更前
✔︎変更後
※少しわかりづらくてすいません。（これでも一生懸命やっているつもりです。）
多少ですけど、文字サイズと間隔が広くなって読みやすくなっていると思います。画像だとわかりづらいと思うので、ご自分のサイトと比較してみてください。
本文の文字サイズと行間のコード
- /* 本文 */
- .entry-content p {
- font-size: 110%;
- font-weight:500;
- line-height:2.0;
- padding:３０px 30px;
- margin:50px 10px;
- }
Boxのカスタマイズ
作ったBOXは２つです。Storkにはショートコードで簡単にいろんなBOXが使えます。でも、あんまり好きじゃないのが悩みです。やっぱり、もっとシンプルなものがいい。ブログを始めた当初、デザインでいいなと思ったのは、マナブさんが運営する「manablog」です。なので、マナブログを参考にして作ってみました。
✔︎manablog風BOX１
✔︎manablog風BOX2
BOXのコード
✔︎シンプルな青いBOXのコード
- /* シンプルな青いBOX */
- .wk2{ background: #f0f7ff;
- color:black;
- font-size:105%;
- border-top:dashed 1px #5b8bd0;
- border-right: dashed 1px #5b8bd0;
- border-bottom: dashed 1px #5b8bd0;
- border-left: dashed 1px #5b8bd0; line-height:2.0 important;
- padding:6% 6%;
- margin:auto;
- }
✔︎シンプルすぎるBOXのコード
- /* シンプルなBOX */
- .wk1{ background:#fbfbfb;
- border:2px solid #eee;
- line-height:2.0 important;
- padding:15px 0 15px 10px;
- margin:auto;
- color:#666;
- font-size:105%;
- }
まとめ
『Stork19』の文字はデフォルトの状態だと、文字が小さく行間も狭いのでハッキリ言って読みづらいです。ブログは「デザインに凝りずぎるな」とか言われますけど、『読みやすさ』は凝ったほうがいいと思うのが、僕の意見です。
「Stork」はダメみたいな記事になってしまいましたが、そんなことはありません。デザインも綺麗だし、操作性もシンプルだから本当に使いやすいテーマです。ただ、文字が気に入らなかっただけで・・・これからブログを始める方や、ブログを書くことに専念したい人にはオススメなテーマだと思います。それでは以上です。
コメントを残す