はてなブログ 見出しのカスタマイズ
こんにちは！あひる不動産です。
はてなブログ初心者で、ブログの装飾に四苦八苦させられております。。
というか、もっと簡単にならないんですかね？
少しややこしすぎるかと笑
さて、自分なりに使いたい見出しや装飾があるけど、いちいちCSSだのHTML をいじることができません！おじさんなので。。
そこで、使いたい装飾を見出しの設定に組み込んで、すぐに使えるようにしておいたので、自分の備忘録として残しておきたいと思います。
まとめの箇所で使いたかった装飾は、こういうやつです。
でも、これを使うのに、CSSをいじって、記事を書くときにまたHTMLをいじってって、考えると、使いづらいなぁと。というか、忘れちゃうんです。
こういうのをCSSに入れておいたこと自体を。
初心者すぎて申し訳ございません。
そこで、この見出しを小見出しに当てはめることにしました。小見出しであれば、見たまま編集画面で簡単に設定できるので。
昨日した投稿 営業マンやる気が出ない時にやるべき3ステップ - あひる不動産の業務日誌 のまとめの部分も、当初太字だけで装飾していたのを、更新して以下に変えてみました。
この✔を使いたかったんです！！
何をしたのかというと、✔checkの中に書きたいことをまず書いて、その箇所を選択した状態で小見出しをクリックすれば、✔checkで囲まれた中に文字が書かれるようになっております。
では、設定の仕方の説明ですが、ダッシュボードのデザイン→スパナアイコン(カスタマイズ)→デザインCSSに、以下の内容をコピペするだけです。
今現在僕のブログの見出しに設定してある、各見出しを記載しておきますので、よかったら、参考にしてみてください。そのままコピペで使えると思います。
************************************************************************************
大見出しです
h3 {
padding: 0.5em;/*文字周りの余白*/
color: #494949;/*文字色*/
background: #fffaf4;/*背景色*/
border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
}
中見出しです
h4 {
background: linear-gradient(transparent 70%, #ffaf58 70%);
}
小見出しです
h5 {
position: relative;
color: black;
background:
#d0ecff;
line-height: 1.4;
padding: 0.25em 0.5em;
margin: 2em 0 0.5em;
border-radius: 0 5px 5px 5px;
}
h5:after {
/*タブ*/
position: absolute;
font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif
;
content: '00c Check';
background: #2196F3;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 3px 7px 1px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em
}
************************************************************************************
上記のCSSは、すべてこちらのサイトを参考にさせて頂いております。
いや本当に、ブログ書き始めた人みんな見ているんじゃないか？っていうぐらい便利なサイトですけど、作っている方はすごいですよね。。見やすいし、ボリュームも豊富だし、どんな人が作られているのでしょうか。
今日のまとめです。
使いたい装飾は、編集画面で直感的に使えるように割り当てたい
いやほんと、使いたいだけなんです笑
まだまだ、会話風のやつとか、何故か斜めになってしまうシェアボタンを修正したりとか、ヘッダーを画面いっぱいにしたかったりとか、全部凄い時間をかけてこころみているのですが、思い通りにいきません（泣）
思い通りのブログにしていくべく、カスタマイズに挑戦していきたいです！
