「マイルドライナー」のようなマーカーをブログに実装する方法
他の方のブログではよくマーカーのような協調をされている方が多いので、本ブログもCSSを用いてマーカー装飾を実装することにいたしました。
せっかくなので、私の好きなzebraさんの『マイルドライナー』 のようなマーカー色にしたかったので、試行して作成してみました。
手順
1.お手持ちの「マイルドライナー」を紙に引きます。
2.Google先生で16進数の色コードを適当に検索し、近い色のコードをとっておきます。
3.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でもその利点は活かされるようです。
コメントを残す