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

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

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

☆引用元☆

第0版

コピペで可愛く装飾！ CSSのみでデザインする囲み枠（ボックスデザイン） | 第0版

https://0edition.net/archives/510

ブログを運営されている方にとって、記事を書く中で「ここに注目してほしい！」と思うことは多くあるはず。そんなときにはパッと目をひく、囲み枠（ボックスデザイン）がおすすめ！この記事...

Minimal Green

マスキングテープ風デザインCSS　ガーリーデザインのサイトやブログに - Minimal G...

https://blog.minimal-green.com/entry/2017/01/14/211630

以前「stripe」というはてなブログテーマを作ったのですが、その時に使ったストライプ背景のCSS（グラデーション）を応用してマスキングテープ風デザインやドット柄、チェック柄背景パターンのCSSをご紹介します。ブログ記事は白背景に文字が続くと、特に長文では読む方は単調に感じてしまいます。ガーリーなデザインでブログ記事にアクセントを入れ、記事にメリハリを付けましょう。ブログだけでなく、女性向けのサイトデザインにも使えると思います。 class名は適当に作ったのでお好きなものに変えて下さい。おすすめポイント女...

Contents

1 h2の見出しのカスタマイズ
2 サイドバーの見出しのカスタマイズ
3 見出しのアンダーラインを消す
4 色見本のサイト(・ω・)ノ
5 marimariのサイトの見出しのカスタマイズをまとめてみました
6 ｈ２
- 6.1 ｈ３
7 見出しのイメージ画像

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

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

原色大辞典

WEB色見本原色大辞典 - HTMLカラーコード

https://www.colordic.org

色の名前とカラーコードが一目でわかるWEB色見本

原色大辞典

日本の伝統色和色大辞典 - Traditional Colors of Japan

https://www.colordic.org/w

日本の伝統色の名前とカラーコードが一目でわかるWEB色見本

ColorHexa

#a2d7dd hex color

https://www.colorhexa.com/a2d7dd

#a2d7dd hex color code information, schemes, description and conversion in RGB, HSL, HSV, CMYK, etc.

color-sample.com

色見本と配色サイト - color-sample.com

https://www.color-sample.com

More than 16 million colors

marimariのサイトの見出しのカスタマイズをまとめてみました

ｈ１

h1 {
 color: #b4866b; /* 文字色 */
}

ｈ２

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

デフォルトのアンダーラインを消してあります

ｈ３

 .article h3 { border: none; }

デフォルトのアンダーラインを消してあります

サイドバーのタイトルがステッチになります

ｈ４

デフォルト使用してます

ｈ５

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