隣の花の育てかた

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

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

f:id:Sakuranbox:20191012214107j:image

このブログのテーマはゴリアテさんが作ってくれたナチュリに一目ぼれして使わせて頂いています

ナチュリのカスタマイズを検索してもなかったのでナチュリ以外でも対応できるコードを使用

パソコン初心者が一つカスタマイズするのにかかるのは1分単位ではなく1時間単位!!

CSSの意味すら分からなかった私でも調べながらなんとか出来ました!

 

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

 

まだまだ全体のカスタマイズは未完ですが

自分がどのコードを使っているのか把握するためにも備忘録として残しておきます

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

 

はてなブログで使っているテーマはナチュリ~Naturally

f:id:Sakuranbox:20191012213048j:image

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

 

まさに一目ぼれ!!

 

それがこちらのナチュリ~Naturally

blog.hatena.ne.jp

 

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

 

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

今回は記事タイトルに関するカスタマイズです

ご参考にしてください

 

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

f:id:Sakuranbox:20191012213055j:image

ナチュリでは記事タイトルがピンクで可愛らしいのですが少し落ち着いた感じにするために色を茶系の黒に変えてみました

 

f:id:Sakuranbox:20191012180617j:image

 

⇩⇩⇩

f:id:Sakuranbox:20191012180636j:image

 

コードはこちら☟

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

 

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

 

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

 

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

 

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

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

www.colordic.org

 

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

f:id:Sakuranbox:20191012213244j:image

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

 

 f:id:Sakuranbox:20191012180658j:image

 

⇩⇩⇩

f:id:Sakuranbox:20191012180706j:image

 

コードはこちら☟

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

 

/* 記事タイトルの大きさ */
.entry-title {
font-size: 20px;
}

 

 

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

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

 

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

 

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

 

さいごに

f:id:Sakuranbox:20191012211549j:image

今回は記事タイトルのカスタマイズの備忘録でした☆。.:*・゜

 

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

 

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

 

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

 

次は記事本文のカスタマイズの備忘録を残そうかなと思います☆。.:*・゜

 

 

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

www.golyat.jp