JetThemeカスタマイズに使ったCSSの小技

2023/03/05 投稿

2024/05/20 最終更新

ページが重くならず、ごちゃっとした感じにならない程度のアクセントで自分らしさを出したい。という事で、今回のJetThemeのカスタマイズで使ったCSSの小技をメモとして。

目次[非表示]

1.文字のグラデーション
2.ol（番号付きリスト）を丸付き数字にする
- 2.1.応用：白丸に数字
- 2.2.応用：色四角に数字
3.蛍光ペン風のアンダーライン
- 3.1.マーカーサンプル
- 3.2.応用：アンダーラインの変化
4.最後に

文字のグラデーション

ブログタイトルを文字にしているのでCSSで変化をプラス。ブルーのインクが滲んでいるようなイメージで、青系のみのグラデーションにしました。

レイアウト＞Logo でコード部分に以下のように入力して、縦方向へのグラデーションになっています。

ブログタイトルの指定は以下のとおり

<span class="text-gradient" id="blog-title">No.8</span>

/*グラデーション縦方向*/
.text-gradient {
background: linear-gradient(0deg, rgba(11, 30, 129, 1) 30%, rgba(0, 212, 255, 1)55%, rgba(255, 255, 255, 1) 70%);
color: transparent !important;
-webkit-background-clip: text;
}

グラデーションを他でも使えるように、idで文字の大きさや余白などを指定して、classでグラデーションを設定していますが、グラデーションをブログタイトルでしか使わないのであれば、blog-title で文字の大きさ・余白などと一緒にグラデーションのCSSを追加してかまいません。

テキストの長さがある場合は、横方向へのグラデーションも綺麗です。

Gradation

/*グラデーション横方向*/
.text-gradient {
background: linear-gradient(90deg, rgba(11, 30, 129, 1) 10%, rgba(0, 212, 255, 1) 30%, rgba(255, 255, 255, 1) 70%);
color: transparent !important;
-webkit-background-clip: text;
}

CSS | テキストにグラデーションをかける方法（ONE NOTES）

ブロック要素の場合

ブロック要素（例：h1・p・div など）の場合、横幅を指定しない限り要素の横幅いっぱいに広がるので、文字が背景よりも短いと横方向へのグラデーションの効果が思ったように表示されないことがあるので注意が必要です。

ABC

このまま文字の形で切り抜き透明化すると、水色の部分しか表示されません。グラデーションがかかり始めるあたりで終わってしまいます。

ABC

文字が短い場合でも指定した最後の色までのグラデーションにしたい場合は display: inline-block を追加設定する必要があります。

ABC

こうすれば、文字の長さと同じ横幅の背景でグラデーションをかけることができるので、最後に指定した濃色まで表示されます。

/*ブロック要素のグラデーション*/
.text-gradient  
background: linear-gradient(90deg, #a7fad4, #67d8c8, #06b6bd, #0093b1, #0070a0, #004d89, #002b6a, #040545);
color: transparent;
display: inline-block;
-webkit-background-clip: text;
}

ABC

CSSだけ！文字にグラデーションを付ける方法＆サンプルコード集

グラデーションの参考

いろいろなサイトで直感的にいじれるジェネレーターがあるので便利です。知識がなくても、好きな色・位置・角度などチョイチョイと設定するだけで素敵なグラデーションコードを出してくれます。

CSS Gradient — Generator, Maker, and Background

色選びの参考

どんな感じのグラデーションにするか悩む。という場合にはとても参考になるサイトです。左上の「Show all gradients」で、配色を見ているだけでも楽しい。自分では選ばないようなカラーの組み合わせなどがあったりして、こんなのもいいなという発見がありました。

uiGradients - Beautiful colored gradients

ol（番号付きリスト）を丸付き数字にする

ただの番号だけじゃなくてちょこっと装飾を。お好みでの余白調整もありますが、基本的には参考先サイトの説明通りで簡単に丸付き数字になります。

使用中のテンプレート「JetTheme」ではパンくずリストにolタグが使われているので、そのままではパンくずリストも変わってしまいます。装飾は記事内だけにしたいので、#single-contentを指定してCSSの設定をすることにしました。

表示sample
表示sample
表示sample

/* 丸付き数字リスト */
#single-content ol {
  margin: 0 0 2rem 1rem; /* 余白調整 */
  padding: 0;
  list-style: none;
  counter-reset: li;
}

/* ol内のliのスタイル */
#single-content ol li {
  position: relative;
  font-size: 16px;
  padding-left: 2rem;
}

/* 2つ目以降のliにmargin-topを指定 */
#single-content ol li:not(:first-child) {
  margin-top: 0.6em;
}

/* 数字のスタイル */
#single-content ol li::before {
  margin-top:2px; /*高さの微調整*/
  counter-increment: li;
  content: counter(li);
  position: absolute;
  left: 0;
  top: 2px; /* 数字のY軸線上の位置を調整 */
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%; /* 角を丸める */
  background-color: #044162; /* 丸の色 */
  font-size: 12px; /* 丸の中の文字の大きさ */
  color: #fff; /* 数字の色 */
  line-height: 20px;
  text-align: center;
}

【CSS】olタグの数字の背景に色付きの円をつける方法（WebDev）

/*高さの微調整*/ や /* 数字のY軸線上の位置を調整 */ については、表示指定しているフォントの違いなどによって変わってきます。私の場合はデフォルトだと中の数字が上寄りになってしまってので、それぞれ2px分の調整をしてあります。

応用：白丸に数字

白丸に数字にしたい場合は、CSSに外枠の線となる1行 border: 1px solid; を追加して、/*丸の色*/ と /*数字の色*/ を削除。リスト部分だけ文字の色を変えたい場合は上記追加する border と /*数字の色*/ に色指定を追加します。

【CSS】olタグの数字の背景に色付きの円をつける方法

応用：色四角に数字

テスト表示
テスト表示
テスト表示

/*色付き四角に数字リスト*/
#single-content ol {
    margin: 0 0 2rem 1rem;
    padding: 2rem;
    position: relative;
    list-style-type: none;
    counter-reset: number;
}
#single-content ol li {
    position: relative;
    font-size: 16px;
    padding-left: 2rem;
}
#single-content ol li::before {
    margin-top:2px; /*高さの微調整*/
    position: absolute;
    content: counter(number);
    counter-increment: number;
    left: 0;
    width: 21px;
    height: 21px;
    border-radius: 20%;
    background: #044162;
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    line-height: 20px;
    top: 2px;
}

border-radius: 50%; で丸になりますが、/*角を丸める*/ の数字を30％・20％と小さくしていけば、角が少しまるい四角になり、0％もしくは border-radius の1行を削除で真四角になります。

蛍光ペン風のアンダーライン

Bloggerでは上部アイコンメニューより「テキストの背景色」として各色のマーカーが引けますが色がイマイチ。私は <mark> をCSSでカスタマイズして使うことにしました。※都度マーカーを引きたいテキストにHTML表示モードでタグを手打ちがメンドイですけど。

マーカーサンプル

マーカーサンプル（グリーン）

mark {
  background: linear-gradient(transparent 70%, #7fff7f 70%);  /* 色・太さ調整など */
  font-weight: bold;
}

【CSS】蛍光マーカー風の装飾と、グラデーションの仕組み

transparent 上から0～70％を透過、上から70％以降を指定カラー（上サンプルでは #7fff7f ）にという指示になります。

数が大きいほど透明部分が多くなるのでマーカーが細くなり、2か所の％数字を合わせればベタ塗りに、透過範囲と指定カラー開始の数字に差をつければグラデーション（ライン上部がかすれているように見える）になります。

マーカーサンプル（0/0）　全背景ベタ塗り

マーカーサンプル（50/50）

マーカーサンプル（50/90）　グラデーション

ただし、透過からのグラデーションマーカーにする場合、safariで表示させると上が黒ずんで見えてしまうので要注意。これは transparentのデフォルト（Chromeでは白の透過・safariでは黒の透過）が違うことによるもので、transparent を rgba(255,255,255,0)　※白（もしくは背景色）の透過」に置き換えると綺麗な色になります。

mark {
background: linear-gradient(rgba(255, 255, 255, 0) 50%, #7fff7f 90%);
font-weight: bold;
}

応用：アンダーラインの変化

マーカーサンプル（斜めのストライプ）

mark {
  background-image: repeating-linear-gradient(-45deg, #7fff7f 0, #7fff7f 2px, transparent 2px, transparent 4px);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% .6em;  /* %は横サイズ・emはマーカーの幅 */
  font-weight: bold;
}

マーカーは多用してしまうと文章が読みづらくなってしまうので、読みやすさとのバランスにお気を付けください。