ゆるーくいきましょー

ゆるーくいきましょー

自分が興味を持ったことについてゆるーく書いていきます。元は仮想通貨メインだった。。。

【備忘】見出しをカスタマイズする

こんばんは、いっとりです。

 

ブログの見出しをカスタマイズしてみたので、その方法を備忘として、、、

 

見出しを以下の感じに変えました!!!

新しい見出しスタイル

ちょっとカッコよさげ。

 

 前までリボンだったので可愛すぎてチョット、、、と思ってたので。。。

 

この辺りを参考にさせていただきました。

 

mudaide.hatenablog.com

 

saigonotoride.hatenablog.com

 

簡単に言うと、

管理画面⇒デザイン⇒カスタマイズ⇒デザインCSS

で、赤字を追加しただけ。。。

 

/* <system section="theme" selected="handwriting"> */
@import "/css/theme/handwriting/handwriting.css";
/* </system> */

/*あらかじめある背景の初期化*/
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
background: none;
border: none;
border-radius: 0;
}

.entry-content h3{
color: #3f3f3f;
padding: 10px 15px;
border-bottom: 3px double #000080;
}

/* <system section="background" selected="default"> */
/* default */
/* </system> */

 

これがないとデフォルトで設定されているリボンが表示されて変な感じになる

/*あらかじめある背景の初期化*/
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
background: none;
border: none;
border-radius: 0;
}

 

 これで、大見出し(html的にh3)を青色二重下線にする

.entry-content h3{
color: #3f3f3f;
padding: 10px 15px;
border-bottom: 3px double #000080;
}

 

もっといじればスマートな感じにできそうですね。

タイトルの下にメニューが一列に並んでるやつとかできたらいいなと思います。

 

それでは、そんな感じで。。。

 

見出しを新しくしたよって記事で見出しを使わないとは、、、