【はてなブログ】見出しデザインをたまたま変更できちゃった
「質素なブログのデザインだなー。」
「どうにかして少しでも見やすいブログができないかなー。」
と悩んでいました。
私、2週間くらいですがWebについてHTMLとCSSの勉強を
すこーしやっていたのでこの少しの知識でも
変更はできちゃったりしないのかなー。なんて思いながらいじっていたら
たまたま見出しのデザインを変更できてしまい、
とても簡単だったのでご紹介したいと思います。
こんな感じです↓
変更前↓
これ以外にもたくさんの種類が作ることができます。
コードをコピーして貼り付けるだけでできます。
アレンジしたい方は少し触って色なども変えられますのでぜひ！
見出しの作り方はこちらから
shioaji78.hatenablog.com
見出しデザインを変更しよう
①アカウントをクリック
②デザインをクリック
③カスタマイズをクリック
④{}デザインCSSクリック ここを押すと「/* <system section="theme" 〜」
と長々と文章が入っている四角が出てきますので、
この中のどこでもいいのでクリックします。
そうすると下のような画面になります。
安心してください。
この長ったらしい「/* <system section="theme" 〜」は全く触らなくてOKです。
私はこの下に↓を入れています。
h4{
position: relative;
padding: 0.5em;
background: #a6d3c8;
color: white;
}
h4::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px rgb(149, 158, 155);
}
これを入れるだけで先程の緑の見出しになるのです。
「なんだこれ」と思われるかと思いますが、
HTML,CSSの知識がなくとも大丈夫です。
こちらのサイトを開いてください。
サルワカ CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
サルワカさんのサイトを見てHTMLとCSSの勉強させていただいています。
一方的にお世話になっております。
サイトを開き、最後までざっと見てみてください。
見出しデザインがたくさん出てきますね。
本当に助かります。
とりあえず1番上のシンプルなデザインに変更してみようと思います。
画面真ん中くらいにあるオレンジのバー「コードを表示」をクリック。
下にグレーの背景が出てきますね。
これが「CSS」コードです。
デザインを変えるためのものだと思っておいて大丈夫です。
グレーの中身のh1〜}まで全てコピーし、
「{}デザインCSS」の中にペーストしましょう。
border-bottom: solid 3px black;
これを解説すると「下線を実線に、太さを3px,色を黒にする」という意味です。
/*〜*/の部分はメモとして使っています。ここでは分からなくてOKです。
ペーストしたら四角の外どこでもいいので押すと
更新されます。
そうすると、あっ…
見出しではなく、ブログタイトルと 記事タイトルの下に
適応されてしまいました。
ここで修正するのがCSS1番始めの「h1」です。
ここを修正します。
大見出しの場合＝h3
中見出しの場合＝h4
小見出しの場合＝h5
に直します。
今回の場合中見出しのデザイン変更なので「h4」 に直します。と
中見出しに無事適応されました！
色を変更したい
68種類も見出しデザインがあるので好みのものが見つかると思いますが、
ブログデザインに合わせたいと思うと色を変更したい。
と思われるかもしれません。
ですので色の変更方法を紹介します。
先程変更したシンプルな見出しの下線の色を変更してみます。
h○ {
/*線の種類（実線） 太さ 色*/
border-bottom: solid 3px blue;
}
これは線が青になります。
redは赤、greenは緑のように色名を入れても変わりますが、
もっと 好きな色にしたい場合もありますよね。
そんな時はカラーピッカーを使用します。
Googleで「カラーピッカー」と調べてもOKです。
○をいじってみてください。
左側に好きな色が出たらカラーピッカーすぐ下、
HEXに囲まれた「#○○○○○○」がありますね。
6桁の数字やアルファベットが混ざった文字があるのでそれをコピーし
色名を消してこちらをペーストします。
そうすると変更されます。
ちなみに私の好きなカラーコード#788f8a
ここら辺の色が大好きです。
長い文章読んでいただいてありがとうございました。
少しでもご参考になれば幸いです。
