1.ブログ

見出しのカスタマイズ

※自分の好みにカスタマイズするために、好みの情報をまとめたものです。細かい変種や変更は行っておりませんので、必ずバックアップをおすすめ致します。

 

カスタマイズの前に、子テーマの使用をおすすめします

 

https://maamarimari.com/muum/customize/20191019-2

 

☆引用元☆

[pz-linkcard-auto-replace url="https://0edition.net/archives/510"] [pz-linkcard-auto-replace url="https://blog.minimal-green.com/entry/2017/01/14/211630"]

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; }

 

※自分の好みにカスタマイズするために、好みの情報をまとめたものです。細かい変種や変更は行っておりませんので、必ずバックアップをおすすめ致します。

 

色見本のサイト(・ω・)ノ

 

[pz-linkcard-auto-replace url="https://www.colordic.org/"] [pz-linkcard-auto-replace url="https://www.colordic.org/w"] [pz-linkcard-auto-replace url="https://www.colorhexa.com/a2d7dd"] [pz-linkcard-auto-replace url="https://www.color-sample.com/"]

 

 

 

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個目のドットの位置と色 */
}

 

[pz-linkcard-auto-replace url="https://saruwakakun.com/html-css/reference/h-design"]

 

見出しのイメージ画像

 

色々作ってみました
ピンク

左が見出し(縮小されてます)・右がサイドバー

「h4」はデフォルトです

 

    

 

 

 

 

 

 

こちらに、まとめてコードを貼っていあります

https://maamarimari.com/muum/blog/design/midasi