みなさんかわいいラインマーカーを引いていますよね。
私も使ってみたい～！ということでいろいろなマーカーを集めてアレンジしてみました。
いろいろなサイトさんでマーカーのCSSをご紹介しているのをやってみたのですが、私が使っているWordPressテーマ『Simplicity2』ではCSSを設定しても表示されないものもあったので、いろいろとカスタマイズしてみました。
コピペで使えるのでぜひ使ってみて下さい。
↑一番下に斜めストライプ（しましま）のマーカーもあるので見てみて下さい。
目次
太字・太ラインマーカー
＜太字・太ライン＞イエローマーカー
/* イエロー太マーカー*/
div.post span.pen-yellow{
background: linear-gradient(transparent 40%, #ffff66 40%);
font-weight: bold;
}
＜太字・太ライン＞ピンクマーカー
/* ピンク太マーカー*/
div.post span.pen-pink{
background: linear-gradient(transparent 40%, #ff99ff 40%);
font-weight: bold;
}
＜太字・太ライン＞グリーンマーカー
/* グリーン太マーカー*/
div.post span.pen-green{
background: linear-gradient(transparent 40%, #66ffcc 40%);
font-weight: bold;
}
＜太字・太ライン＞ブルーマーカー
/* ブルー太マーカー*/
div.post span.pen-blue{
background: linear-gradient(transparent 40%, #66ccff 40%);
font-weight: bold;
}
細字・細ラインマーカー
＜細字・細ライン＞イエローマーカー
/* イエロー細マーカー*/
div.post span.marker_yellow{
background: linear-gradient(transparent 60%, #ffff66 60%);
font-weight: normal;
}
＜細字・細ライン＞ピンクマーカー
/* ピンク細マーカー*/
div.post span.marker_pink{
background: linear-gradient(transparent 60%, #ff99ff 60%);
font-weight: normal;
}
＜細字・細ライン＞グリーンマーカー
/* グリーン細マーカー*/
div.post span.marker_green{
background: linear-gradient(transparent 60%, #66FFCC 60%);
font-weight: normal;
}
＜細字・細ライン＞ブルーマーカー
/* ブルー細マーカー*/
div.post span.marker_water {
background: linear-gradient(transparent 60%, #66ccff 60%);
font-weight: normal;
}
太字・太ラインと細字・細ラインマーカー全部
太字・太ラインと細字・細ラインマーカー全部
/* イエロー太マーカー*/
div.post span.pen-yellow{
background: linear-gradient(transparent 40%, #ffff66 40%);
font-weight: bold;
}
/* ピンク太マーカー*/
div.post span.pen-pink{
background: linear-gradient(transparent 40%, #ff99ff 40%);
font-weight: bold;
}
/* グリーン太マーカー*/
div.post span.pen-green{
background: linear-gradient(transparent 40%, #66ffcc 40%);
font-weight: bold;
}
/* ブルー太マーカー*/
div.post span.pen-blue{
background: linear-gradient(transparent 40%, #66ccff 40%);
font-weight: bold;
}
/* ピンク細マーカー*/
div.post span.marker_pink{
background: linear-gradient(transparent 60%, #ff99ff 60%);
font-weight: normal;
}
/* イエロー細マーカー*/
div.post span.marker_yellow{
background: linear-gradient(transparent 60%, #ffff66 60%);
font-weight: normal;
}
/* グリーン細マーカー*/
div.post span.marker_green{
background: linear-gradient(transparent 60%, #66FFCC 60%);
font-weight: normal;
}
/* ブルー細マーカー*/
div.post span.marker_water {
background: linear-gradient(transparent 60%, #66ccff 60%);
font-weight: normal;
}
ストライプ（しましま）太マーカー
ブルーのストライプ（しましま）マーカーを作りたくて太マーカーはTakumi Hirashima Artworksさんのサイトを参考にして作ってみました。
きれいなストライプの斜め線が引けるので薄い色を使うといいかもしれませんね♪
ストライプ（しましま）太ブルーマーカー
/* ブルーしましま太マーカー*/
div.post span.naname-stripefuto {
background-image: linear-gradient(-45deg,
#fff 25%, #87ceeb 25%, #87ceeb 50%, #fff 50%, #fff 75%, #87ceeb 75%, #87ceeb);
background-size: 4px 4px;
}
#fffは白で、#87ceebはWEB色見本原色大辞典からskyblueを選びました。
ストライプもかわいいので使ってみて下さい。
マーカーじゃくて見出しでもかわいいですね♪
