【はてなブログ】最初にやっておきたい見出し大中小のカスタム(コピペで簡単)
新ブログ立ち上げ。見出しのカスタム設定
こんにちは。初めましてぴよこママです。
育児関連の内容を書いているぴよこママの徒然カンガルーとは別に、家計管理・資産管理などお金関係について発信するブログを立ち上げました。
はてなブログは1アカウントで複数ブログをぶら下げられるので便利ですね。
とはいえ、ブログのデザインはイチから設定が必要。
ということで、備忘も兼ねてブログ設定を残しておこうと思います。
もし、気に入った!という場合はまるっとコピペしてもらって大丈夫です^^
HTMLやCSSはちんぷんかんぷん・・・という方も、そのまま貼ればOKなので、よければ活用ください。
今回は見出しの設定です。育児ブログがピンク基調なので、こちらは青メインにしています。
見出しのデザイン(完成図)
こんな感じのデザイン&色になります。
コード(コピペ可)
管理画面(記事の管理)から、デザイン>カスタマイズ(スパナマーク)>デザインCSS(一番下)に以下コードを貼り付けてもらえればOKです。
見出し大のコード
/*見出し大*/ h3 { padding: 0.4em 0.5em; color: #494949;/*★文字の色*/ background: #f4f4f4;/*★背景の色*/ border-left: solid 5px #7db4e6;/*★左線の色*/ border-bottom: solid 3px #d7d7d7;/*★下線の色*/ }
見出し中のコード
/* 見出し中 */ h4 { position: relative; padding: 0.6em; background: #b0e0e6;/*★吹き出しの色*/ } h4:after { position: absolute; content: ''; top: 100%; left: 30px; border: 15px solid transparent; border-top: 15px solid #b0e0e6;/*★吹き出しの色*/ width: 0; height: 0; }
見出し小のコード
/* 見出し小 */ h5 { position: relative; padding-left: 1.2em; line-height: 1.4; } h5:before { font-family: "Font Awesome 5 Free"; content: "\f00c"; font-weight: 900; position: absolute; font-size: 1em; left: 0; top: 0; color: #5ab9ff; /*★チェックマークの色*/ font-weight: 900; }
見出しの色を変更したい場合
色を変更したい場合は、コードの「#」で始まる部分を好きな色のカラーコードに変更してください。ソースのコメントに★をつけている部分です。
私は色の設定をする際、下記サイトを参考にさせてもらいました。
注意:FontAwesomeの追加も忘れずに
小見出しのチェックマークはFontAwesomeの設定が必要です。
管理画面(記事の管理)>詳細設定>headに要素を追加に以下のコードを貼り付けてください。
console.log("<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">");
以上、見出しのカスタム設定でした。
ご参考になれば嬉しいです^^
<デザイン、コードで参考にさせていただいたサイト>
ありがとうございます✨
見出し:CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
合わせて運営している育児ブログはこちら。
ダブル育休の日々を綴っているのでよければ見てください。