※自分の好みにカスタマイズするために、好みの情報をまとめたものです。細かい変種や変更は行っておりませんので、必ずバックアップをおすすめ致します。
カスタマイズの前に、子テーマの使用をおすすめします
https://maamarimari.com/muum/customize/20191019-2
☆引用元☆
Contents
h2の見出しのカスタマイズ
ダッシュボードの「外観」→「ブラグインエディター」にコピペします
間違えて、プラグインのエディターを変更しないように気を付けてください‼
拡大
↓
サンプル
カスタマイズCSS
.article h2 { position: relative; padding: .5em .75em; background-color: #ffcccc; color: #fff; border-radius: 6px; border-left:none; }
色を変えたいときは、こちらのラインの箇所をお好みに変更
background-color: #ffcccc;
文字の色はこちら
color: #fff;
吹き出し風にするには下のCSSを、上のCSSの下に追記してください
サンプル
カスタマイズCSS
.article h2::after { position: absolute; top: 100%; left: 30px; content: ''; width: 0; height: 0; border: 10px solid transparent; border-top: 15px solid #ffcccc;
こちらも色の変更できます。ラインの箇所をお好みに変更
border-top: 15px solid #ffcccc;
サイドバーの見出しのカスタマイズ
こちらを追記すると「h3」の見出しと、サイドバーのタイトルがカスタマイズされます
サイドバーのサンプル
「h3」の見出しには何故かステッチが入りません(;´・ω・)
カスタマイズCSS
h3 { background: #fdeff2; box-shadow: 0px 0px 0px 5px #fdeff2; border: dashed 2px white; padding: 0.2em 0.5em; color: #ee827c; }
こちらも色の変更できます。ラインの箇所をお好みに変更
background: #fdeff2;
box-shadow: 0px 0px 0px 5px #fdeff2;
見出しのアンダーラインを消す
この後、見出しのアンダーラインやラインが気になってくるので、ラインを消すCSSです
こちらのブログは「h2]「h3」の追記をしました
「h2」見出しタグの左の線を消す
カスタマイズCSS
.article h2 { border-left: none; }
「h3」のアンダーラインを消す
カスタマイズCSS
.article h3 { border: none; }
「h4」のアンダーラインを消す
カスタマイズCSS
.article h4 { border: none; }
※自分の好みにカスタマイズするために、好みの情報をまとめたものです。細かい変種や変更は行っておりませんので、必ずバックアップをおすすめ致します。
色見本のサイト(・ω・)ノ
marimariのサイトの見出しのカスタマイズをまとめてみました
h1
h1 { color: #b4866b; /* 文字色 */ }
h2
.entry-content h2 { font-size: 140%; border-left: 5px solid #77B8DA; padding: .5em 0 .5em .75em; background: repeating-linear-gradient(90deg, #f1e9db, #f1e9db 10px, #f8f4ed 0, #f8f4ed 20px); } .article h2 { border-left: none; }
デフォルトのアンダーラインを消してあります
h3
.article h3 { border: none; }
デフォルトのアンダーラインを消してあります
サイドバーのタイトルがステッチになります
h4
デフォルト使用してます
h5
h5{ background-color: #fdeff2; /* 背景色 */ background-image: radial-gradient(#ffffff 20%, transparent 0), radial-gradient(#ffffff 20%, transparent 0); /* 水玉の色 */ background-position: 0 0, 10px 10px; background-size: 20px 20px; color: #590c11; /* 文字色 */ padding: 10px; /* 余白 */ }
h6
h6:after { background-color: #f3a3a8; /* 1個目(一番左)のドットの色 */ border-radius: 50%; content: ''; margin-left: 15px; /* 最後の文字とドットとの余白 */ position: absolute; top: 50%; transform : translateY(-50%); width: 5px; /* ドットの幅 */ height: 5px; /* ドットの高さ */ box-shadow: 20px 0px 0px rgb(217,204,179), /* 2個目のドットの位置と色 */ 40px 0px 0px rgb(217,204,179), /* 3個目のドットの位置と色 */ 60px 0px 0px rgb(243,163,168), /* 4個目のドットの位置と色 */ 80px 0px 0px rgb(217,204,179), /* 5個目のドットの位置と色 */ 100px 0px 0px rgb(217,204,179), /* 6個目のドットの位置と色 */ 120px 0px 0px rgb(243,163,168), /* 7個目のドットの位置と色 */ 140px 0px 0px rgb(217,204,179), /* 8個目のドットの位置と色 */ 160px 0px 0px rgb(217,204,179), /* 9個目のドットの位置と色 */ 180px 0px 0px rgb(243,163,168), /* 10個目のドットの位置と色 */ 200px 0px 0px rgb(217,204,179), /* 11個目のドットの位置と色 */ 220px 0px 0px rgb(217,204,179); /* 12個目のドットの位置と色 */ }
見出しのイメージ画像
色々作ってみました
ピンク
左が見出し(縮小されてます)・右がサイドバー
「h4」はデフォルトです
青
茶
緑
こちらに、まとめてコードを貼っていあります
https://maamarimari.com/muum/blog/design/midasi