隣の花の育てかた

~気になるお隣さん【5人家族+ねこ】の家庭事情~

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

f:id:Sakuranbox:20191012214107j:image

 

 

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

 

 

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

 

 

ってことで

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

 

 

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

 

 

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

 

 

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

 

 

 

 

 

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

 

完成はこんな感じ☟

f:id:Sakuranbox:20191012180617j:plain

 

⇩⇩⇩

f:id:Sakuranbox:20191012180706j:plain

 

 

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

 

 

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

 

 

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

 

 

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

 

 

 

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

 

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

 

f:id:Sakuranbox:20191012180617j:image

 

⇩⇩⇩

f:id:Sakuranbox:20191012180636j:image

 

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

 

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

 

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

 

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

 

 

 

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

 

 

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

 

 

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

www.colordic.org

 

 

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

 

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

 f:id:Sakuranbox:20191012180658j:image

 

⇩⇩⇩

f:id:Sakuranbox:20191012180706j:image

 

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

 

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

 

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

 

 

 

デフォルトでは17.6pxですが20pxに変更

 

 

ほんの3px変えるだけでもだいぶ見やすくなりました...♪*゚

 

 

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

 

 

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

 

 

 

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

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

 

 

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

 


f:id:Sakuranbox:20191211111654j:image

f:id:Sakuranbox:20191211111651j:image

 

 

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

 

 

 

さいごに

 

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

 

 

まさに一目ぼれ!!

 

 

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

 

blog.hatena.ne.jp

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

www.golyat.jp