こーにゃーの結婚2年生

知らない土地で暮らし始めました。

【簡単】PC知識ゼロがはてなブログで行ったカスタマイズを紹介します。

f:id:kooonyaaa:20171025222930p:plain


レスポンシブデザインに変更してからカスタマイズが楽しすぎてブログから目が離せないこーにゃーです。

 

ここ2、3日でブログにいろいろと手を加えたのでそれを紹介したいと思います。

 

 

文字のサイズを大きく

 

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

です。

 

f:id:kooonyaaa:20171025205537p:plain

見出しを強調する

↑の見出しのように、背景とラインを入れて強調してみました!

見出しを目立たせて内容を分かりやすく伝えたかったので満足!

 

【やり方】

以下のコードをダッシュボード⇒デザイン⇒スパナアイコン⇒デザインCSSに張り付けてください。

 

.entry-content h3{
color: #444444;
background: #f3f3f3;
padding: 10px 15px;
border-left: 10px solid #e07000;
}

 

こちらのコードは大見出しをカスタマイズする場合に使用します。

 

中見出しをカスタマイズしたい場合

⇒コードの一行目のh3をh4に

小見出しをカスタマイズしたい場合

コードの一行目のh3をh5に

 

それぞれ変更してください。

 

スマホ版】

以下のコードをダッシュボード⇒デザイン⇒スマホアイコン⇒ヘッダ⇒タイトル下に貼り付けてください。

 

<style type="text/css">

.entry-content h3{
color: #444444;
background: #f3f3f3;
padding: 10px 15px;
border-left: 10px solid #e07000;
}

</style>

見出しのデザインは参考にさせていただいた記事に多数紹介されていましたので是非自分の気に入ったデザインを使用してください。

 

参考にした記事↓

www.yukihy.com

 

枠を作る

こんな風に

枠を作ってみました(*'▽')

 伝えたいことを分かりやすくまとめることが出来ると思ったので使い始めました!お気に入り!

 

 【やり方】

①以下のコードをダッシュボード⇒デザイン⇒スパナアイコン⇒デザイン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>

 

 

f:id:kooonyaaa:20171025212619p:plain

 

枠のデザインもいろいろありました。参考にした記事でたくさん紹介されていたのでお気に入りのものを見つけてみてください!

 

saruwakakun.com

 

記事のタイトルのデザインをお洒落に

ブログのタイトルに背景とラインを入れてみました!

 

f:id:kooonyaaa:20171025213821p:plain

簡単にお洒落になり、ブログの見栄えも良くなった気がします!

 

【やり方】

 

以下のコードをダッシュボード⇒デザイン⇒スパナアイコン⇒デザイン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;
}

 

以上!簡単!

 

こちらも参考にした記事に沢山のデザインがあったので参考にしてください!

 

www.north-geek.com

 

文字にラインを入れて強調する

 

太字の文章にラインを入れ、さらに目立たせる方法がありました!

こんな感じで水色のマーカーを入れれます!

 

【やり方】

 

以下のコードをダッシュボード⇒デザイン⇒スパナアイコン⇒デザイン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>

まとめ

ブログを初めてもうすぐ5カ月が経過したのですが、これまでカスタマイズを行おうとしてもなかなかうまくいきませんでした。

 

ですが最近レスポンシブデザインにしてから、ようやくカスタマイズができるようになり、楽しくて仕方がありません!

 

今後もいろいろと挑戦してみたいと思います!