目次と見出しのデザインも変えたよって話
どうもhusahusaです！
ブログを初めて一週間も経ってないんですが、自分の中で色々デザインをこり出しています！
少し前の記事でも「デザイン変えたよ～」って記事を投稿したんですが、今回は第二弾！という事で目次と見出しの部分に注目してみました！
目次や見出し部分
さて、既に出ている目次の部分ですが、こんな感じ
目次部分
見出し部分
うーん、NICE！
上手くできてると思います！
いや、ネットからパクってきただけなんですけどね？
こうして日々成長しているんですよ俺は！
因みに現在のCSSコードはこちら
/*目次のデザイン変更*/
.entry-content .table-of-contents {
position:relative;
margin-left: 0;
padding: 15px 10px 15px 35px; /* 枠内の余白(上右下左) */
font-size: 100%; /* 文字の大きさ */
font-weight:bold;
list-style-type:decimal; /*数字以外が良ければ変更 */
background:#fff;
border-top:40px solid #ffd700; /* 「この記事の目次」周りの色 */
border-left:2px solid #90caf3; /* 線の太さ */
border-right:2px solid #90caf3;
border-bottom:2px solid #90caf3;
line-height: 200%; /* 行間 */
border-radius: 3px; /* 角丸にしない場合は不要 */
color:#444; /* 数字（マーク色変更） */
}
h1 {
color: #505050;/*文字色*/
padding: 0.5em;/*文字周りの余白*/
display: inline-block;/*おまじない*/
line-height: 1.3;/*行高*/
background: #dbebf8;/*背景色*/
vertical-align: middle;
border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}h1:before {
content: '●';
color: white;
margin-right: 8px;
}
/*「この記事の目次」の周囲変更*/
.entry-content .table-of-contents::before {
font-family: 'blogicon';
content: "\f039 この記事の目次";
display: block;
font-size: 130%;
font-weight: bold;
position: absolute;
top: -40px;/*上からの位置調整*/
left: 15px; /*左からの位置調整*/
color: #000 !important;
}
/*リンクの色変更と下線を消す*/
.entry-content .table-of-contents li a{
color:#444; /* 目次リスト部分のテキスト色 */
text-decoration:none; /* リンクの下線をつけたくない場合 */
}
.entry-content h3 {
position: relative;
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 2px white;
padding: 0.2em 0.5em;
color: #454545;
}.entry-content h3:after {
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #a8d4ff;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}
.entry-content h4 {
color: #010079;
text-shadow: 0 0 5px white;
border-left: solid 7px #010079;
background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
う～ん、俺は見慣れてるから大丈夫なんですけど、見る人によっては拒否反応を起こすかもｗｗ
コードの内容としては以下のサイトを参考にしました！
後はまあ自分なりに少しいじった感じですね。
これでブログとして前よりは見やすくなったかな？と思います。
デザインを変更する上での詰まった点
さて、最後に私が手こずった部分を紹介。
CSSコードの下部、
.entry-content h3 {
position: relative;
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 2px white;
padding: 0.2em 0.5em;
color: #454545;
}.entry-content h3:after {
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #a8d4ff;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}
.entry-content h4 {
color: #010079;
text-shadow: 0 0 5px white;
border-left: solid 7px #010079;
background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
の部分です。
始めに言っておくと.entry-content h3のh〇の部分
・h1が記事タイトルの部分（今回で言うと「目次と見出しのデザインも変えたよって話」の部分）
※ＣＳＳ内では中部
h1 {
color: #505050;/*文字色*/
padding: 0.5em;/*文字周りの余白*/
display: inline-block;/*おまじない*/
line-height: 1.3;/*行高*/
background: #dbebf8;/*背景色*/
vertical-align: middle;
border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}h1:before {
content: '●';
color: white;
margin-right: 8px;
}
がh1のコードになります。
・h2はわかりませんｗ
・h3は大見出し
・h4は中見出し
・h5は小見出し
を変更するという事になります。
ここであれ？と思った方もいるかもしれません。
そう、h1とh3、h4ではすこしコードの違いが出ています。
.entry-contentという文があるかないかですね。
なんでそういう変更をしたのか？
元々はてなブログには初めから見出しなどのデザインが設定されています。
しかしタイトル部分には特に設定されてはいないので、h1の部分についてはそのままで。
h3、h4の部分には元々のデザインの上に新しくデザインを被せるという事になります。
つまりデザインが重複し、自分で思っていたのと違う事になるのです。
そこで、.entry-contentという一文をh3、h4の前に記入する事により、自分が使いたいデザインを優先させ、イメージ通りの見出しに変更したと言う訳です。
もしかしたら元々の見出しデザインを使わないっていう設定があるのかもしれませんが、俺にはよくわからなかったですｗ
一応原因とかも探ってみたんですが、他の方々は特に問題なく設定できてる様子……。
もし同じ症状になってるって人がいれば応急処置ですが、一応直ったので参考までに！
もし原因を知っているって方がいればコメントで教えて頂けると幸いです！
