【はてなブログ】記事タイトルの文字色と大きさ・行間を変えてみた～ナチュリ～【コピペＯＫ！ 】

使用させていただいているテーマはゴリアテさん制作のナチュリです

記事タイトルの色を変更＆文字を大きくカスタマイズしてみました

ってことで

今回は記事タイトルのカスタマイズ編！

自分がどのコードを使っているのか把握するための備忘録でもあります

色やデザインの参考になれば幸いです

必ず事前にバックアップをしてから追加しましょう！

記事タイトルの完成はこんな感じ

完成はこんな感じ☟

⇩⇩⇩

ナチュリのカスタマイズを検索しても出てこなかったのでナチュリ以外で使用しているCSSを参考にしています

ナチュリの記事タイトルはピンクで可愛らしいのですが少し落ち着かせるために文字色を変更

変更したら今度は文字が目立たなくなってしまったので少し大きくカスタマイズしてみました

今見てる記事タイトルの文字色＆大きさにカスタマイズしていくよ

記事タイトルの色を変える

記事タイトルをピンクから少し落ち着いた感じにするために色を茶系の黒に変えました

⇩⇩⇩

記事タイトルの文字色ＣＳＳはこちら

デザイン➡スパナマークのカスタマイズ➡デザインCSSにコピペしてください

/* 記事タイトル　色変更 */
.entry-title a{
　color: #402000!important;
}

この記事タイトルの色変えがなかなかできず、たどり着いたのがこちらの記事でした！

コピぺでOK！CSSのみで記事タイトルのデザインをおしゃれにする方法15【はてなブログカスタマイズ】 - North-Geek

こちらページの「うまくいかない場合～例：文字色が変わらない」で色変えすることが出来ました

色は＃402000の＃６桁の部分をお好みの色コードから変更してください

色コードはこちらを参考にしました☟

www.colordic.org

記事タイトルの文字の大きさ・行間を変えてみた

記事タイトルの文字色を変えたことにより、タイトルが目立たなくなってしまったのでほんの少し大きく変更

 

⇩⇩⇩

タイトル文字の大きさのＣＳＳはこちら☟

デザイン➡スパナマークのカスタマイズ➡デザインCSSにコピペしてください

/* 記事タイトルの大きさ・行間 */
.entry-title {
font-size: 20px;
line-height:1.5em;
}

色んな部分の文字サイズを変更したい！ 【CONTENTS】 - ▼・ｪ・▼にっき。

デフォルトでは17.6ｐｘですが２０ｐｘに変更

ほんの３ｐｘ変えるだけでもだいぶ見やすくなりました...♪*ﾟ

レスポンシブにしてあるのでこれ以上大きくするとスマホだとタイトルが大きすぎて見にくそうなので当ブログでは２０ｐｘに

font-size: 20px; の数字を変えると大きさが変わるので調節してね

ＰＣや iPhone からだとタイトルの文字幅は見やすいのですが android（Galaxy S8）で見たときにタイトル文字がぎゅうぎゅうになっていて見にくかったので

line-height:1.5em;　を追記しました

1.5の数値を変えると文字の幅が変わりますが、PC・iPhone からだと数値を変えても変わりなしでした

確認できない場合はそのまま1.5emで使ってみて下さい

さいごに

どのテーマにしようかテーマストアで選んでいたらブログタイトルにぴったりでかわいいテーマを発見☆。.:＊・゜

まさに一目ぼれ！！

それが当ブログで使用させて頂いているのゴリアテさん制作のナチュリ～Naturally

blog.hatena.ne.jp

このままでも十分かわいいのですがこのデザインを崩さず、少し落ち着いた感じにしたくてパソコンど素人がカスタマイズに挑戦しました

自分の備忘録でもあるカスタマイズシリーズ

今回は記事タイトルのカスタマイズの備忘録でした

ブログを始めるまではCSSすら何か知らなかったど素人の私でも出来たのは先人者様たちがCSSを残してくれたおかげです

ナチュリではないテーマを使用している方から頂いているCSSなのでどのテーマでも対応できるかと思いますが念のため、前のCSSをコピペしてメモに残してから書き加えましょう

もし失敗してもコピペで戻せば元に戻せるので安心感が違います

まだカスタマイズ未完なのでCSSのお勉強は暫く続きそうです！

テーマ製作者ゴリアテさんのブログはこちら☟

www.golyat.jp