SWELLカスタマイズ / マーカーの幅を変更する。

SWELLでマーカーの幅を狭くする話です。

目次

マーカー変更前

このブログでは背景を暗くしていますが、初期設定でマーカーを使おうとすると、文字が見づらくなります。

背景が白色であれば、あまり気にならないのですが、背景が暗いと見づらくなってしまいます。

マーカーを変更(SWELLの設定で色を変える)

背景を暗くしていると、マーカーで文字が見づらくなるので、設定で色を変更して使っています。

マーカーの設定

SWELL設定 > エディター設定 

変更できます

マーカーの色を 暗め に設定すると、文字が透けて見えるような形になります。

 テスト テスト

あ、ちょっと見やすくなった。

文字が見えないなら、線の太さを変更すればいいのでは?
設定できないの??

SWELL はマーカーの太さの設定は無いみたいじゃ。

Cocoonも太さの設定はCSSでしないといけないみたい。

マーカー変更してみる(CSSで太さを変える)

なるほど、SWELLの設定で太さを変えられない
ということは
自分でCSS書かないといけないんだね。

 

SWELLのマーカー初期設定を確認する

青のマーカーのCSSを確認すると次のようになっていました。

同じ内容を以下に書き出してみます。

.mark_blue {
    background: -webkit-linear-gradient(transparent 64%,var(--color_mark_blue) 0%);
    background: linear-gradient(transparent 64%,var(--color_mark_blue) 0%);
}

設定を変更してみる

先程のSWELLの初期設定の64% の部分を大きくしていくと、マーカーの太さが細くなっていきました。

-webkit-linear-gradient と linear-gradient の違いはよくわかってませんが、あとで調べてみたいと思います。

個人的には90%くらいがちょうど良いのではないかと思いました。

 .mark_blue {
	background: linear-gradient(transparent 90%,var(--color_mark_blue) 0%);
}

これをCSSに設定すれば太さが細くなると思います。

SWELLではマーカーとして4種類の選択肢がある

SWELLではマーカーとして次の4種類の「目印、ラベル、クラス名」で用意されているようなので、それぞれ好みに応じて設定すればカスタマイズできると思います。

/* marker */

.mark_blue {
}

.mark_green {
}

.mark_orange {
}

 .mark_yellow {
}

あとがき

他のブログとデザインの面で差別化をしたい場合は、やっぱりCSSを触る必要が出てくるかなと思います。

下の本は適当に検索してみた結果です。オススメではありません。

著:中島 真洋, 監修:ロクナナワークショップ
¥2,905 (2021/06/24 11:08時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
\ポイント5%還元!/
Yahooショッピング
SBクリエイティブ
¥2,486 (2021/06/24 11:10時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
\ポイント5%還元!/
Yahooショッピング

この記事が気に入ったら
フォローしてね!

ここで投稿は終わりです
目次
閉じる