楽しくブログを書くための5％ masanori_ver2

コピペOK！でも、誰も気にしないようなブログのカスタマイズ【初心者向け】

【2016年4月6日　追記】デザインを変更しました。

ブログを本格的に始めてから約3ヶ月が経ちました。

これまでブログのデザインについてはあまり触れてきませんでしたが、実はかなり勉強して細かいことをしているんです。

やってることが細かすぎて読者の方に伝わっているのか否かが不安なので、今回は記事にします。

ブログのデザインをデフォルトのまま使っている初心者の方は、気に入ったものがあればコピペして使ってもらっても大丈夫です。

上級者の方でぼくのコードの間違いに気がついた方は是非ご指摘をお願いします。

気にしない人にとっては本当にどうでもいいカスタマイズ

気に入ったカスタマイズがあれば

ダッシュボード→デザイン→カスタマイズ→デザインCSS

とすすみ、デザインCSS内へ各コードをコピペしてください。

基本的には「はてなブログ」をお使いの方向けのカスタマイズですが、他ブログの方もちょっと変えれば使えるはず。

↓にはてなブログの場合のスクリーンショットを貼っておきます。
f:id:masanori_ver2:20160402155216p:plain

f:id:masanori_ver2:20160402155211p:plain

本文のフォント

/*本文文字サイズ*/
.entry-content {
font-size:20px;
font-family: "游明朝体", "Yu Mincho","ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

ぼくは個人的にどうしても本文のフォントを明朝にしたかったんです。

なぜかって？

それは明朝が読みやすい（読みやすいと思っている）から

ものすごい個人的な理由です。

ちなみにフォントのサイズは「font-size:20px;」の20の数字を変えて調整してみてください。

強調部分のフォント

/*強調部分*/
strong, em, b{font-family: "ＭＳ Ｐゴシック","ＭＳ ゴシック",sans-serif;}
strong:before, em:before, b:before { content:" ";}
strong:after, em:after, b:after { content:" "; }

強調部分はゴシックにしたかった。

明朝の強調ってわかりづらいんですよ。

ちょっと比較をだしておきます。

f:id:masanori_ver2:20160402162558p:plain
↑は、「強調」という字を強調してます。

うん、超微妙な違いですね。

ちなみに上記コードでは強調部分の前後に半角スペースが自動的に入りますのでもう少しわかりやすいはず。

こんな感じで強調されます

見出しの行間

/*見出し*/
.entry-content h3{
margin-top:2em;
color: #800080;
font-family:  "ＭＳ Ｐゴシック","ＭＳ ゴシック",sans-serif;
}

このコードを丸写しするとぼくと同じ見出しになります。

ぼくが最も言いたいのは「margin-top:2em;」の部分。

見出しの上ってちょっと開けたいですよね。

でも普通にやると1行分の空段落を入れないと行けないんですよ。

こんな感じで

<p>ここが前段落の最後の行</p>

<p> </p>　←1行分開けるための空段落

<h3>見出し</h3>

ぼくは、これが嫌なんです。多分これやってもなんの問題もありません。見た目には関係ないし、クッソどうでもいいことだと思います。

でも、嫌だ。嫌なものはしょうがない。

まとめ

今回は3つほど、ぼくのこだわりのデザインをご紹介しました。

「そんな細かいこと気にするより、記事の内容を気にしろよ！ 」

その意見わかります。

でも、ごだわっちゃうんだから仕方ない。

これからも勉強して小さなこだわりをデザインとして形にしていきますので、よろしくおねがいします。

以上、フジイマサノリ（＠masanori_ver3）でした。

《追記》

こんなのもあるみたいです↓

~約8,000名の受講生と80社以上の導入実績~
現役エンジニアのオンライン家庭教師CodeCamp

もうひと記事いかがですか？

人気記事はこちら

こちらもオススメ

このブログについて

この記事が気に入ったら
いいね ! しよう

シェアする
ツイートする
Twitter でフジーを

RECOMMENDこちらの記事も人気です。