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

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

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

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

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

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

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

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

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

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

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

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

本文のフォント

/*本文文字サイズ*/
.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:" "; }

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

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

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

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

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

見出しの行間

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

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

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

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

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

こんな感じで

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

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

まとめ

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

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

その意見わかります。

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

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

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

《追記》

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

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

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

人気記事はこちら

• 批判の90％は取るに足らない「バカげたこと」や「カス」である。（スタージョンの法則）：その他役立つ法則のまとめ
• 誹謗中傷は救いを求める心の叫び！ ：『なぜ僕は「炎上」を恐れないのか（イケダハヤト著）』の書評
• 読書好きならKindlePaperwhite（キンドルペーパーホワイト）を買うべきたった1つの理由

こちらもオススメ

• 【自己啓発本 １０選】 ２０００冊以上の本を読んだ ぼくが厳選してご紹介！
• 教師が聖職者という期待をもう辞めませんか!?小学生の親として思うこと。
• この10冊であなたのブログが変わる!? 読めばアクセスアップにつながる本10選!
• はてなブックマーク(はてブ）を50以上獲得するための５つの戦略（仮説）
• ストレングスファインダーで自分の「強み」を診断した。あと無料サイトの診断もね。

このブログについて

• プロフィール
• プライバシーポリシー及びその他の注意事項について