見出しのカスタマイズ、挿入枠の縦幅変更、戻るボタンの色変更でオシャレな色にした
引っ越しして来ましたリンク修正前です---------------------------------------------沢山のブログを見るにつれ、ああしたい、こうしたい・・と思い、なかなか決められない 色の統一を目指して大中小見出しを変更した h3 困った点 h4 困った点 枠を中央に配置したいのに挑戦 h5 困った点 戻るボタンがグレーで味気ないから色を変えよう 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-contenth3{ /*追加した */ 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-contenth4{ margin: 0 0 1.5em; padding: 0px 10px 0px20px; 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だと枠が幅狭く指定されるみたい(パソコン表示だとよく分かる)<div style="width:300px;margin-left:auto;margin-right:auto;"><div style="border: 1px solid #f7deec; color: black; background-color: #faeef7; border-radius: 10px; padding: 10px;display: inline-block;"><p>ここに本文を入れる</p></div></div>300pxの代わりに auto を入れると左端に寄って中央化が働かなくなる600pxにもしてみたが固定されるらしく、スマホで見ると右が切れて見にくくなる<div style="width:auto;margin-left:auto;margin-right:auto;"><div style="border: 1px solid #f7deec; color: black; background-color: #faeef7; border-radius: 10px; padding: 10px;display: inline-block;"><p>ここに本文を入れる</p></div></div>あれこれ試行錯誤を繰り返したが、パソコン表示では、枠が左やら中心やらでは、見た時に統一感が無いので、枠の中央化は辞めた。目次にも幅の伸縮が適用できるなら、やってみたいものだが・・・応用が難しい目次こそ横幅が自動伸縮で、枠自体を中央化したい方が良いと思える。まだまだ発展途上です……が、とても楽しい。見出しのデザインをCSSのみでカスタマイズする（一部CSS3対応） | 賢威カスタマイズ研究所h5 困った点 左端にチェック印を入れた見出しにしたい これ.entry-contentを付けたが全く反応なし before after の意味が分からないがh3見出しの真似をして付けたら なんと、なんと、文の前後にチェックが入った(笑) afterの方を消すと、頭だけにチェックが入って大成功 チェックが大きすぎたので、アレコレ数字を変えて好きな大きさに変更した/* 見出しh5 */.entry-contenth5{ /*追加した */padding: .2em; font-size: 17px;}.entry-contenth5: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 ”カラコル” - 世界の色を集めるアプリ/*上に戻るボタン設置*/#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; }}戻るボタンがグレーだったので、これも色を合わせた。最初、色コードの書き方が分からなかったが、結果としては簡単だった。そこまで行きつくのに、少し時間がかかったけどね戻るボタンの色が変わって大満足結果良ければ万々歳
