レスポンシブデザインに変更してからカスタマイズが楽しすぎてブログから目が離せないこーにゃーです。
ここ２、３日でブログにいろいろと手を加えたのでそれを紹介したいと思います。
文字のサイズを大きく
PCやスマホで記事を読む際、少し文字が小さいかなって思ってました。
調べてみたところ、簡単に文字サイズを変更できました！
【やり方】
以下のコードをダッシュボード⇒デザイン⇒スパナアイコン⇒デザインCSSに張り付けてください。
.entry-content {
font-size:18px;
line-height:1.8em;
私の記事の文字の大きさと高さはこの通りです。もう少しサイズを大きくしたいときは18pxを好きな数字に変更して下さい。
目安となる数字として、文字の大きさは
font-size:15px~17px
行間は
line-height:1.5em~2.0emです。
貼り付け場所はダッシュボード⇒デザイン⇒スパナアイコン⇒デザインCSSです。
レスポンシブデザインを導入していない方は、スマホ版のコードを打ち込む必要があります。
【スマホ版】
以下のコードをダッシュボード⇒デザイン⇒スマホアイコン⇒記事⇒記事下に張り付けてください
<style type=text/css>
.entry-content {
font-size:18px;
line-height:1.8em;
}
</style>
この文字サイズと行間も好きな大きさに調整してください。
スマホの目安は
font-size: 13px 〜 14px
line-height: 1.5em 〜 2.0em
です。
見出しを強調する
↑の見出しのように、背景とラインを入れて強調してみました！
見出しを目立たせて内容を分かりやすく伝えたかったので満足！
【やり方】
以下のコードをダッシュボード⇒デザイン⇒スパナアイコン⇒デザインCSSに張り付けてください。
.entry-content h3{
color: #444444;
background: #f3f3f3;
padding: 10px 15px;
border-left: 10px solid #e07000;
}
こちらのコードは大見出しをカスタマイズする場合に使用します。
中見出しをカスタマイズしたい場合
⇒コードの一行目のｈ３をｈ４に
小見出しをカスタマイズしたい場合
⇒コードの一行目のｈ３をｈ５に
それぞれ変更してください。
【スマホ版】
以下のコードをダッシュボード⇒デザイン⇒スマホアイコン⇒ヘッダ⇒タイトル下に貼り付けてください。
<style type="text/css">
.entry-content h3{
color: #444444;
background: #f3f3f3;
padding: 10px 15px;
border-left: 10px solid #e07000;
}
</style>
見出しのデザインは参考にさせていただいた記事に多数紹介されていましたので是非自分の気に入ったデザインを使用してください。
参考にした記事↓
スポンサーリンク
枠を作る
枠を作ってみました(*'▽')
伝えたいことを分かりやすくまとめることが出来ると思ったので使い始めました！お気に入り！
【やり方】
①以下のコードをダッシュボード⇒デザイン⇒スパナアイコン⇒デザインCSSに張り付けてください。
.box26 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #95ccff;
border-radius: 8px;
}
.box26 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #FFF;
color: #95ccff;
font-weight: bold;
}
.box26 p {
margin: 0;
padding: 0;
}
②以下のコードをHTML編集にコピペし、タイトルと文章を書きかえれば完成！
<div class="box26"><span class="box-title">ここにタイトル</span>
<p>ここに文章</p>
</div>
枠のデザインもいろいろありました。参考にした記事でたくさん紹介されていたのでお気に入りのものを見つけてみてください！
記事のタイトルのデザインをお洒落に
ブログのタイトルに背景とラインを入れてみました！
簡単にお洒落になり、ブログの見栄えも良くなった気がします！
【やり方】
以下のコードをダッシュボード⇒デザイン⇒スパナアイコン⇒デザインCSSに張り付けてください。
.entry-title {
font-weight: bold;
font-size: 20px;
padding: .75em 1em;
border: 1px solid #ccc;
border-top: 3px solid #3498db;
background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
}
以上！簡単！
こちらも参考にした記事に沢山のデザインがあったので参考にしてください！
文字にラインを入れて強調する
太字の文章にラインを入れ、さらに目立たせる方法がありました！
こんな感じで水色のマーカーを入れれます！
【やり方】
以下のコードをダッシュボード⇒デザイン⇒スパナアイコン⇒デザインCSSに張り付けてください。
.entry-content strong {
background: linear-gradient(transparent 60%, #96E6E6 40%);
}
【スマホ版】
以下のコードをダッシュボード⇒デザイン⇒スマホアイコン⇒記事⇒記事下に張り付けてください
<style type=text/css>
.entry-content strong {
background: linear-gradient(transparent 60%, #96E6E6 40%);
}
</style>
まとめ
ブログを初めてもうすぐ５カ月が経過したのですが、これまでカスタマイズを行おうとしてもなかなかうまくいきませんでした。
ですが最近レスポンシブデザインにしてから、ようやくカスタマイズができるようになり、楽しくて仕方がありません！
今後もいろいろと挑戦してみたいと思います！