【CSS】「マイルドライナー」のようなマーカーをブログに実装する方法

2019/01/27 2019/02/24

「マイルドライナー」のようなマーカーをブログに実装する方法

他の方のブログではよくマーカーのような協調をされている方が多いので、本ブログもCSSを用いてマーカー装飾を実装することにいたしました。

せっかくなので、私の好きなzebraさんの『マイルドライナー』のようなマーカー色にしたかったので、試行して作成してみました。

手順

１．お手持ちの「マイルドライナー」を紙に引きます。

２．Google先生で16進数の色コードを適当に検索し、近い色のコードをとっておきます。

３．cssに記載します。

以上で完成です。

今回作成したものは下記の通りです。

/*マーカー
----------------------------------------------------*/
.marker_m_green_futo {
	background: linear-gradient(transparent 0%, #C5DA7B 0%);
}
.marker_m_green_hoso {
	background: linear-gradient(transparent 60%, #C5DA7B 20%);
}

.marker_m_blue_futo {
	background: linear-gradient(transparent 0%, #C8E6EE 0%);
}
.marker_m_blue_hoso {
	background: linear-gradient(transparent 60%, #C8E6EE 20%);
}

.marker_m_pink_futo {
	background: linear-gradient(transparent 0%, #F5D0D7 0%);
}
.marker_m_pink_hoso {
	background: linear-gradient(transparent 60%, #F5D0D7 20%);
}

【作例】

マイルドグリーン太

マイルドブルー太

マイルドピンク太

マイルドグリーン細

マイルドブルー細

マイルドピンク細

いかがでしょうか？

『マイルドライナー』は引いた後の文字が読みやすいことが利点ですが、CSSでもその利点は活かされるようです。