DIVERカスタマイズ

標準マーカーの色変更方法

DIVERの標準マーカーの色は黄色になっているけどこれを変えたい場合の方法

マーカーのクラス名は「sc_marker」となっているのでこれを変更したモノをCSSに追加する

.sc_marker{
background: linear-gradient(transparent 50%, #(ここに好きな色)50%);
font-weight: bold;
}

色は#000000などのように#の後に半角英数字6文字で指定するのが標準
色のコードはWEB上の色見本辞典などを参考にしてください。
https://www.colordic.org/

追加する場所は
1.「外観」→「カスタマイズ」→「追加CSS」内に記述
2.「外観」→「テーマの編集」→「スタイルシート(style.css)」内に記述
3. 特定の記事内だけに適用したい場合は記事投稿フォームの下にある「カスタムCSS」に記述
のいずれか任意の場所で。

マーカーの線の太さを変えたい

transparentと好きな色の後に付いているパーセンテージを弄ると線の太さが変わる。
ちなみにtransparentというのは透明という意味

<参考>
transparent 30%、色70%
大外からディープインパクト

transparent 40%、色60%
大外からディープインパクト

標準
大外からディープインパクト

transparent 60%、色40%
大外からディープインパクト

transparent 70%、色30%
大外からディープインパクト


様々なマーカーの色を使い分けたい

標準の黄色も生かしたり、何種類ものマーカー色を使いたいという場合はsc_markerの後に数字を付けるのがオススメ

.sc_marker2{
background: linear-gradient(transparent 50%, #(ここに好きな色)50%);
font-weight: bold;
}

DIVERでマーカーを付けるとコードは以下のようになるので
大外から<span class="sc_marker">ディープインパクト</span>

sc_markerの後に数字を付けるだけで色を変えられるようにすればコードの編集も楽だし管理もしやすい。
大外から<span class="sc_marker2">ディープインパクト</span>

先にCSSに「.sc_marker3、4,5…」と色々な色のマーカーを作成して追加しておけば、後は数字を変えるだけで楽にマーカーの使い分けが可能になる。

おすすめの記事