見出しデザインを変えて読みやすい記事にしよう！【カスタマイズ】

見出しとは？

見出しとは記事の内容を記事内で分類したときに、それぞれに分かりやすくタイトルをつけて見やすくするという役割があります。
これによりダラダラと長文の記事になることを防ぎ、記事の節目になりまとまりのあるデザインになります。
記事作成者にも読者にも優しい機能です。

デザイン

これが↓

私が現在使っているデザインになります。
はてなブログは初期状態だと、文字は大きく太くはなりますが背景は色がないので、記事文章との区別がしにくいっていうのがあります。
そこでラインを付けたり、背景に色を付けることによって「見出し」と「本文」の区別をはっきりさすことができます。

【追記】現在は違うデザインのカスタマイズデザインを採用しています。

参考にした記事

www.yukihy.com

またもやゆきひーさんデザイン！！
もはや私はゆきひー信者なのかもしれない。

いや、でもゆきひーさんのデザインは豊富でとっても分かりやすい！！この私が使っているデザインの他にもこの記事では多く紹介しているので、自分に合ったデザインでカスタマイズしてみてください。

設定方法

今回はＰＣカスタマイズの方だけ紹介しますね。
っていうのも、本来はＰＣカスタマイズとスマホカスタマイズでそれぞれにコードを入れるんですが、スマホカスタマイズの方は有料版（ＰＲＯ）じゃないと記述できない場所にコードをはめ込んでいたのでいたので私はＰＣカスタマイズしかしてないんですよ。（無料版でもできる方法は「まとめ」の最後で紹介します）

ではでは、設定方法ですが、

手順①

下のコードコピペ（コピー＜複製＞＆ペースト＜貼り付け）します。

.entry-content h3{
    color: #444444;
    background: #f3f3f3;
    padding: 10px 15px; 
    border-left: 10px solid #e07000;
    }

ダッシュボード（管理画面）
　　↓
デザイン
　　↓
カスタマイズ（スパナマーク）
　　↓
デザインＣＳＳに貼り付けます。以上です。

確認

[記事]項目をクリックすると「記事ページをプレビュー」をいうボタンがあるのでクリックしたら、右のプレビュー画面が記事のプレビューボタンに切り替わります。

見出しデザインが変更していれば、上部の「変更を保存する」をクリックして完了です。

おまけ

またコード内の数値を変更することによって好きな色にすることができます。

・文字色はcolor
・背景色はbackground
・左の線の色はborder-left

の右の数値を変更で各部分色を変えれます。

色コード参考資料

html-color-codes.info

自分の理想色を直感的に探せて、とても使いやすいサイトです。

color.hailpixel.com

マウスを動かすことにより画面の色が変わり自分の求めている色が探せます。近未来的でカッコイイデザインのサイトです。

まとめ

すごい簡単なのであなたがこの記事を読んでいる時には見出しデザインをコロコロ変えているかもしれません。

先述でも言いましたが、今回私が紹介したのはＰＣカスタマイズだけです。
今は無料版を使っているので私ではスマホカスタマイズの資格がありません。

にもかかわらず今この記事をスマホで見ている方、何か気づきませんか？
そうです。スマホで見てるのに見出しのデザインが同じように変更しています。

それはなぜでしょう！
有料版にした？いえいえまだ無料版です。
答えは、「使っているテーマがレスポンシブデザイン対応だから」です。

元々はレスポンシブ非対応のテーマなんですが、コードを少し変更したらレスポンシブ対応できたんですよ！
これによりカスタマイズができることが増えたのでＰＣカスタマイズしたらスマホも自動で同じカスタムになってるということです。
詳しくはこちらの記事で説明・やり方を紹介しているので読んでみてください。
life-is-rpg.hatenablog.jp

また一つ読者にやさしいブログになりました★

・目次に【表示】【隠す】機能を追加するカスタマイズ
・「続きを読む」をボタン化してホームをスッキリしよう！
・当ブログが無料ユーザー時に行ってきたカスタマイズ集