【Stork19は文字が読みにくい】デザインをカスタマイズしてみた

ストーク19は文字が読みにくい】デザインをカスタマイズしてみた

こんにちはユウスケです。
今使っているワードプレステーマは「stork19」です。デザインも好きだし、使いやすくてあまり不満もありません。しかし、1つあげるとすれば「文字が小さいこと」です。スマホで見ていると目が疲れます。そこで、少しだけデザインをいじってみました。

デザインをカスタムしてみた【Stork19は文字が読みにくい】

ストーク19は文字が読みにくい】デザインをカスタマイズしてみた

それでは、今回やった変更点をみていきましょう。変更点は以下のとおりです。

  • H2〜H4見出しの変更
  • 本文の文字サイズの変更と行間の変更
  • Boxのカスタマイズ

以上の3点です。順番にみていきましょう。

H2〜H4見出しと文字サイズの変更

Stork19のデフォルトの見出しはこんな感じです。
✔︎変更前

これでも問題ないですが。もっとシンプルな見出しが好きなんです。
✔︎変更後

マナブログ的な見出しにしてみました。シンプルすぎると思ったのですが、僕的には読みやすいので問題なしです。

H2〜H4の見出しソースコード

今回行った見出しのソースコードを貼っておきます。コピペして使って見てください。

※追加方法はダッシューボードから「外観」→「カスタマイズ」で「追加CSS」にコードを貼り付けてください。

✔︎H2

  1. /* H2見出し */
  2. .entry-content h2 {
  3.     font-size:130%!important;
  4.     font-weight:800!important;
  5.     background: white !important;
  6.     color:black !important;
  7.   background: #f5f5f5 !important;
  8.   border-left: 13px solid #3b5998!important;
  9.   padding: 15px 0px 15px 10px ;
  10.   margin: 30px 0px 30px;
  11.     border-top:none;
  12.     border-bottom:none;
  13. }

✔︎H3

  1. /* H3見出し  */
  2. .entry-content h3 {
  3.     font-size:130%!important;
  4.     font-weight:800;
  5.     border-left: 8px solid #3b5998 !important;
  6.   padding: 15px 0px 15px 20px!important ;
  7.   margin: 30px 0px 30px;
  8.     border-top:none!important;
  9.     border-bottom:none!important;
  10. }

✔︎H4

  1. /* H4見出し  */
  2. .entry-content h4 {
  3.     font-size:130%!important;
  4.     font-weight:800;
  5.  padding: .25em 0 .25em .75em;
  6.         border-left:6px solid #3b5998!important;
  7. }

本文の文字サイズの変更と行間の変更

「Stork19」の本文の文字は小さくて読みにくいです。1番変えたかった部分ですが、なかなか重い腰が上がらずやっと変更できました。
✔︎変更前

✔︎変更後

※少しわかりづらくてすいません。(これでも一生懸命やっているつもりです。)

多少ですけど、文字サイズと間隔が広くなって読みやすくなっていると思います。画像だとわかりづらいと思うので、ご自分のサイトと比較してみてください。

本文の文字サイズと行間のコード

  1. /* 本文  */
  2.  .entry-content p {
  3.  font-size: 110%;
  4.      font-weight:500;
  5.      line-height:2.0;
  6.      padding:30px 30px;
  7.      margin:50px 10px;
  8.  }

Boxのカスタマイズ

作ったBOXは2つです。Storkにはショートコードで簡単にいろんなBOXが使えます。でも、あんまり好きじゃないのが悩みです。やっぱり、もっとシンプルなものがいい。ブログを始めた当初、デザインでいいなと思ったのは、マナブさんが運営する「manablog」です。なので、マナブログを参考にして作ってみました。

✔︎manablog風BOX1

シンプルな青いBOX

✔︎manablog風BOX2

シンプルすぎるBOX

BOXのコード

✔︎シンプルな青いBOXのコード

  1. /* シンプルな青いBOX  */
  2. .wk2{ background: #f0f7ff;
  3.     color:black;
  4. font-size:105%;
  5. border-top:dashed 1px #5b8bd0;
  6. border-right: dashed 1px #5b8bd0;
  7. border-bottom: dashed 1px #5b8bd0;
  8. border-left: dashed 1px #5b8bd0;    line-height:2.0 important;
  9. padding:6% 6%;
  10. margin:auto;
  11. }

✔︎シンプルすぎるBOXのコード

  1. /* シンプルなBOX */
  2. .wk1{ background:#fbfbfb;
  3. border:2px solid #eee;
  4. line-height:2.0 important;
  5. padding:15px 0 15px 10px;
  6. margin:auto;
  7. color:#666;
  8. font-size:105%;
  9. }

まとめ

『Stork19』の文字はデフォルトの状態だと、文字が小さく行間も狭いのでハッキリ言って読みづらいです。ブログは「デザインに凝りずぎるな」とか言われますけど、『読みやすさ』は凝ったほうがいいと思うのが、僕の意見です。

「Stork」はダメみたいな記事になってしまいましたが、そんなことはありません。デザインも綺麗だし、操作性もシンプルだから本当に使いやすいテーマです。ただ、文字が気に入らなかっただけで・・・これからブログを始める方や、ブログを書くことに専念したい人にはオススメなテーマだと思います。それでは以上です。

シェアをお願いします!

コメントを残す

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