見出しのカスタマイズ、挿入枠の縦幅変更、戻るボタンの色変更でオシャレな色にした

f:id:r2okarain:20190711103816p:image

沢山のブログを見るにつれ、ああしたい、こうしたい・・と思い、なかなか決められない

色の統一を目指して大中小見出しを変更した
戻るボタンがグレーで味気ないから色を変えよう
- color:rgba(0,0,0,0.6); }

色の統一を目指して大中小見出しを変更した

コードをいつもの様にコピペ。
だが、またもや出来ない

h3 困った点

コピペするが、見ると、多分、元のテンプレートの見出しが出てる？
見出しのリセットを前に貼り付ける……がまだダメ
コードは.cp_h1title {……となっている
.cp_h1title {……ってなに？
なんか初めて見たような……。
あちこち調べまわって、.entry-contentを、h3の前に足した。
成功……しかし四角枠が大きすぎるので縦の幅を狭くしたい
また調べまわり、padding: 0.8emを0.4にする事で希望の縦幅になった。
次は見出しの文字の左に一文字分くらいの空間を空けたい
padding: 0.4emだと、上・右・下・左が全部0.4emなので(らしい)
padding: 0px 10px 0px 20px;に変更した
最初30pxだと空きすぎたので20pxにした
単位が em と px が分からないから適当に(笑)。ゴッチャに混じってどうなんだろう？
やや角を丸くして、取り敢えず、希望通りになった。

/* 見出しh3 */
.entry-content h3{ /*追加した */
    position: relative;
    margin: 0 0 1.5em;
    padding-left: 20px;
    background: #d7ede3;
    color: #444;
    font-size: 20px;
    font-weight: bold;
    border-radius: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
.entry-content h3:before, /*追加した */
.entry-content h3:after{
    position: absolute;
    bottom: -15px;
    left: 10%;
    z-index: 90;
    margin-left: -15px;
    border-top: 15px solid #d7ede3;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 0;
    content: "";
}

h4 困った点

上に同じく、h4の前に.entry-contentを足したらOKになった。
h3より高さを低く字もやや小さくした
囲み線だけでは寂しいのでbackgroundに色を付けるかどうか思案中(品良く笑グレーを付けた)
h3と同じ角丸にした

/* 見出しh4 */
.entry-content h4{
    margin: 0 0 1.5em;
    padding: 0px 10px 0px 20px;
    border: 2px solid #86D4C9;
    font-size: 18px;
    color: #444;
    display: inline-block;
    font-weight: bold;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

ようやく、文章の長さに合わせて伸縮するコードを見つけて入れた。
display: inline-block;
これをしたかったんだよな。

枠を中央に配置したいのに挑戦

あちこちからコードを探しては合体？させるが自分の思うように出来ない、勉強が必要だ。

300pxだと枠が幅狭く指定されるみたい

(パソコン表示だとよく分かる)

<p>ここに本文を入れる</p>

</div></div>

300pxの代わりに auto を入れると左端に寄って中央化が働かなくなる

600pxにもしてみたが固定されるらしく、スマホで見ると右が切れて見にくくなる

<p>ここに本文を入れる</p>

</div></div>

あれこれ試行錯誤を繰り返したが、パソコン表示では、枠が左やら中心やらでは、見た時に統一感が無いので、枠の中央化は辞めた。

目次にも幅の伸縮が適用できるなら、やってみたいものだが・・・応用が難しい
目次こそ横幅が自動伸縮で、枠自体を中央化したい方が良いと思える。

まだまだ発展途上です……が、とても楽しい。

見出しのデザインをCSSのみでカスタマイズする（一部CSS3対応） | 賢威カスタマイズ研究所

h5 困った点

左端にチェック印を入れた見出しにしたい
これ.entry-contentを付けたが全く反応なし
before after の意味が分からないがh3見出しの真似をして付けたら
なんと、なんと、文の前後にチェックが入った(笑)
afterの方を消すと、頭だけにチェックが入って大成功
チェックが大きすぎたので、アレコレ数字を変えて好きな大きさに変更した

/* 見出しh5 */
.entry-content h5{ /*追加した */
padding: .2em;
font-size: 17px;
}
.entry-content h5:before{
content: '713';
color: #86D4C9;
}

慣れた人には簡単な事だろうが、四苦八苦して見出しが完成です

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

今日は色の統一を掲げてスタートした。しかし

戻るボタンがグレーで味気ないから色を変えよう

戻るボタンのコードを暫く眺めた

まず、どれが色を表してるのか分からないが、colorに目をつけた。

color:rgba(0,0,0,0.6); }

これを検索にかけた、するとrgbは(赤、緑、青)の量で色を指定し、最後の0.6は1に近づく程ほど不透明になる～ようやく納得
色を決めたら、R G Bの値を入れていった
　color:rgba(215,237,227,0.8);
色指定する場所が2か所あるが、:hover が何か分からないので同数字を入力した

ColorColl ”カラコル” - 世界の色を集めるアプリ

f:id:r2okarain:20190503174155j:image

/*上に戻るボタン設置*/
#page-top {
display:none;
position:fixed;
right:10px;
bottom:20px;
margin: 0;
padding: 0;
text-align:center;
}
#move-page-top{
color:rgba(215,237,227,0.8);
text-decoration:none;
display:block;
cursor:pointer;
}
#move-page-top:hover{
color:rgba(215,237,227,0.8);
}
@media only screen and (min-width: 400px){
#page-top{
right:35%;
margin-right: -350px;
}
}