この記事は最終更新日から5年経過しています。内容が古い可能性があります。
「CSSで蛍光ペンでラインを引いたように見せる表現をするには？」で蛍光ペンみたいなCSSを試してみて面白いなと思ったので、簡単にCSSが作れる蛍光ラインマーカーメーカーを作りました。
画面で蛍光ペンの色と蛍光ペンの太さを選ぶだけで、それを表示するためのspanやCSSのclassの指定を表示するのであとはコピペするだけで使うことができます。それについて書きます！
記事をざっと見る
蛍光ラインマーカーメーカー の使い方
なにはともあれ、作った蛍光ラインマーカーメーカーはこちらです
蛍光ラインマーカーメーカー
ラインマーカーを作る のところにある色と太さから、お好みの蛍光ラインマーカーの色と太さを選ぶと、自動的にそのラインマーカーを表示する span と CSSのclass が表示されます。
たとえば、
色：DeepPink 太さ：細細 にすると、文字にラインマーカーを塗る という文字のラインマーカーもその指定通りになって、
コピーペースト用 というところにその蛍光ラインマーカーのspanとCSSのclassが表示されます。
spanのテキストを選択してコピー、ここに貼り付けてみると
文字にラインマーカーを塗る
↑ このようにラインマーカーを引いた文章が表示されます(^^)/
また、CSSのclassは、
コピーして、使っている子テーマのstyle.cssに貼り付けると、WordPressの投稿や固定ページで
<span class="line_marker_deeppink_narrow2">この文章にラインマーカーが引かれます</span>どうですか？
このように記述すれば
この文章にラインマーカーが引かれますどうですか？
このような感じに表示されるようになります(^^)/
太さの見本をここに貼っておきます！
文字にラインマーカーを塗る 太い
文字にラインマーカーを塗る 細
文字にラインマーカーを塗る 細細
文字にラインマーカーを塗る 極細
文字にラインマーカーを塗る にじみ
蛍光ラインマーカメーカーの中身
この蛍光ラインマーカーメーカーの中身についてちょっと書こうと思います。
全文は
<html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>蛍光ラインマーカーメーカー</title>
<script type="text/javascript">
function selectedColorInit() {
// 最初は黄色で太い
document.colorform.webcolor.selectedIndex = 23;
document.colorform.thickness.selectedIndex = 0;
onChangeRtn();
}
function onChangeRtn(){
// 色や太さが変わったとき
// SELECTの背景色
if (document.colorform.webcolor.value == ''){
document.getElementById("webcolor").style.backgroundColor = '#ffffff';
} else {
document.getElementById("webcolor").style.backgroundColor = document.colorform.webcolor.value;
}
// 太さをパーセントに
if(document.colorform.thickness.value == 'full') {
transparentPercent = 0;
colorPercent = 0;
}
if(document.colorform.thickness.value == 'narrow') {
transparentPercent = 60;
colorPercent = 60;
}
if(document.colorform.thickness.value == 'narrow2') {
transparentPercent = 70;
colorPercent = 70;
}
if(document.colorform.thickness.value == 'narrow3') {
transparentPercent = 80;
colorPercent = 80;
}
if(document.colorform.thickness.value == 'bleeding') {
transparentPercent = 40;
colorPercent = 70;
}
// spanの内容編集
var span_text = '<span style="background: linear-gradient(transparent ' + transparentPercent + '%,' + document.colorform.webcolor.value + ' ' + colorPercent + '%);">文字にラインマーカーを塗る</span>';
// css classの内容編集
var css_text = '.line_marker_' + document.colorform.webcolor.value.toLowerCase() + '_' + document.colorform.thickness.value + ' {\n background: linear-gradient(transparent ' + transparentPercent + '%,' + document.colorform.webcolor.value + ' ' + colorPercent + '%);' + "\n" + '}';
// サンプルの編集
document.getElementById("span_sample").innerHTML = span_text;
// spanの編集
document.getElementById("sample").innerHTML = span_text;
// classの編集
document.getElementById("css_sample").innerHTML = css_text;
}
</script>
<style type="text/css">
body {
font-family: 'flopdesign-kana', Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}
</style>
</head>
<body onLoad="selectedColorInit()">
<div style="width:70%;margin-left : auto ; margin-right : auto ;">
<h1 style="background: linear-gradient(transparent 0%,#ffd700 0%);">蛍光ラインマーカーメーカー</h1>
<h2>ラインマーカーを作る</h2>
<form name="colorform" id="colorform" method="post">
<div class="form-group">
<div style="margin-bottom:10px;">
<label style="width:200px;">色</label>
<select name="webcolor" id="webcolor" onChange="onChangeRtn()">
<option name="init" id="init" style="background-color:#ffffff" value="">色を選んでください</option>
<option id="IndianRed" style="background-color:IndianRed">IndianRed</option>
<option id="LightCoral" style="background-color:LightCoral">LightCoral</option>
<option id="Salmon" style="background-color:Salmon">Salmon</option>
<option id="DarkSalmon" style="background-color:DarkSalmon">DarkSalmon</option>
<option id="LightSalmon" style="background-color:LightSalmon">LightSalmon</option>
<option id="Crimson" style="background-color:Crimson">Crimson</option>
<option id="Red" style="background-color:Red">Red</option>
<option id="FireBrick" style="background-color:FireBrick">FireBrick</option>
<option id="DarkRed" style="background-color:DarkRed">DarkRed</option>
<option id="Pink" style="background-color:Pink">Pink</option>
<option id="LightPink" style="background-color:LightPink">LightPink</option>
<option id="HotPink" style="background-color:HotPink">HotPink</option>
<option id="DeepPink" style="background-color:DeepPink">DeepPink</option>
<option id="MediumVioletRed" style="background-color:MediumVioletRed">MediumVioletRed</option>
<option id="PaleVioletRed" style="background-color:PaleVioletRed">PaleVioletRed</option>
<option id="LightSalmon" style="background-color:LightSalmon">LightSalmon</option>
<option id="Coral" style="background-color:Coral">Coral</option>
<option id="Tomato" style="background-color:Tomato">Tomato</option>
<option id="OrangeRed" style="background-color:OrangeRed">OrangeRed</option>
<option id="DarkOrange" style="background-color:DarkOrange">DarkOrange</option>
<option id="Orange" style="background-color:Orange">Orange</option>
<option id="Gold" style="background-color:Gold">Gold</option>
<option id="Yellow" style="background-color:Yellow" selected>Yellow</option>
<option id="LightYellow" style="background-color:LightYellow">LightYellow</option>
<option id="LemonChiffon" style="background-color:LemonChiffon">LemonChiffon</option>
<option id="LightGoldenrodYellow" style="background-color:LightGoldenrodYellow">LightGoldenrodYellow</option>
<option id="PapayaWhip" style="background-color:PapayaWhip">PapayaWhip</option>
<option id="Moccasin" style="background-color:Moccasin">Moccasin</option>
<option id="PeachPuff" style="background-color:PeachPuff">PeachPuff</option>
<option id="PaleGoldenrod" style="background-color:PaleGoldenrod">PaleGoldenrod</option>
<option id="Khaki" style="background-color:Khaki">Khaki</option>
<option id="DarkKhaki" style="background-color:DarkKhaki">DarkKhaki</option>
<option id="Lavender" style="background-color:Lavender">Lavender</option>
<option id="Thistle" style="background-color:Thistle">Thistle</option>
<option id="Plum" style="background-color:Plum">Plum</option>
<option id="Violet" style="background-color:Violet">Violet</option>
<option id="Orchid" style="background-color:Orchid">Orchid</option>
<option id="Fuchsia" style="background-color:Fuchsia">Fuchsia</option>
<option id="Magenta" style="background-color:Magenta">Magenta</option>
<option id="MediumOrchid" style="background-color:MediumOrchid">MediumOrchid</option>
<option id="MediumPurple" style="background-color:MediumPurple">MediumPurple</option>
<option id="Amethyst" style="background-color:Amethyst">Amethyst</option>
<option id="BlueViolet" style="background-color:BlueViolet">BlueViolet</option>
<option id="DarkViolet" style="background-color:DarkViolet">DarkViolet</option>
<option id="DarkOrchid" style="background-color:DarkOrchid">DarkOrchid</option>
<option id="DarkMagenta" style="background-color:DarkMagenta">DarkMagenta</option>
<option id="Purple" style="background-color:Purple">Purple</option>
<option id="Indigo" style="background-color:Indigo">Indigo</option>
<option id="SlateBlue" style="background-color:SlateBlue">SlateBlue</option>
<option id="DarkSlateBlue" style="background-color:DarkSlateBlue">DarkSlateBlue</option>
<option id="MediumSlateBlue" style="background-color:MediumSlateBlue">MediumSlateBlue</option>
<option id="GreenYellow" style="background-color:GreenYellow">GreenYellow</option>
<option id="Chartreuse" style="background-color:Chartreuse">Chartreuse</option>
<option id="LawnGreen" style="background-color:LawnGreen">LawnGreen</option>
<option id="Lime" style="background-color:Lime">Lime</option>
<option id="LimeGreen" style="background-color:LimeGreen">LimeGreen</option>
<option id="PaleGreen" style="background-color:PaleGreen">PaleGreen</option>
<option id="LightGreen" style="background-color:LightGreen">LightGreen</option>
<option id="MediumSpringGreen" style="background-color:MediumSpringGreen">MediumSpringGreen</option>
<option id="SpringGreen" style="background-color:SpringGreen">SpringGreen</option>
<option id="MediumSeaGreen" style="background-color:MediumSeaGreen">MediumSeaGreen</option>
<option id="SeaGreen" style="background-color:SeaGreen">SeaGreen</option>
<option id="ForestGreen" style="background-color:ForestGreen">ForestGreen</option>
<option id="Green" style="background-color:Green">Green</option>
<option id="DarkGreen" style="background-color:DarkGreen">DarkGreen</option>
<option id="YellowGreen" style="background-color:YellowGreen">YellowGreen</option>
<option id="OliveDrab" style="background-color:OliveDrab">OliveDrab</option>
<option id="Olive" style="background-color:Olive">Olive</option>
<option id="DarkOliveGreen" style="background-color:DarkOliveGreen">DarkOliveGreen</option>
<option id="MediumAquamarine" style="background-color:MediumAquamarine">MediumAquamarine</option>
<option id="DarkSeaGreen" style="background-color:DarkSeaGreen">DarkSeaGreen</option>
<option id="LightSeaGreen" style="background-color:LightSeaGreen">LightSeaGreen</option>
<option id="DarkCyan" style="background-color:DarkCyan">DarkCyan</option>
<option id="Teal" style="background-color:Teal">Teal</option>
<option id="Aqua" style="background-color:Aqua">Aqua</option>
<option id="Cyan" style="background-color:Cyan">Cyan</option>
<option id="LightCyan" style="background-color:LightCyan">LightCyan</option>
<option id="PaleTurquoise" style="background-color:PaleTurquoise">PaleTurquoise</option>
<option id="Aquamarine" style="background-color:Aquamarine">Aquamarine</option>
<option id="Turquoise" style="background-color:Turquoise">Turquoise</option>
<option id="MediumTurquoise" style="background-color:MediumTurquoise">MediumTurquoise</option>
<option id="DarkTurquoise" style="background-color:DarkTurquoise">DarkTurquoise</option>
<option id="CadetBlue" style="background-color:CadetBlue">CadetBlue</option>
<option id="SteelBlue" style="background-color:SteelBlue">SteelBlue</option>
<option id="LightSteelBlue" style="background-color:LightSteelBlue">LightSteelBlue</option>
<option id="PowderBlue" style="background-color:PowderBlue">PowderBlue</option>
<option id="LightBlue" style="background-color:LightBlue">LightBlue</option>
<option id="SkyBlue" style="background-color:SkyBlue">SkyBlue</option>
<option id="LightSkyBlue" style="background-color:LightSkyBlue">LightSkyBlue</option>
<option id="DeepSkyBlue" style="background-color:DeepSkyBlue">DeepSkyBlue</option>
<option id="DodgerBlue" style="background-color:DodgerBlue">DodgerBlue</option>
<option id="CornflowerBlue" style="background-color:CornflowerBlue">CornflowerBlue</option>
<option id="MediumSlateBlue" style="background-color:MediumSlateBlue">MediumSlateBlue</option>
<option id="RoyalBlue" style="background-color:RoyalBlue">RoyalBlue</option>
<option id="Blue" style="background-color:Blue">Blue</option>
<option id="MediumBlue" style="background-color:MediumBlue">MediumBlue</option>
<option id="DarkBlue" style="background-color:DarkBlue">DarkBlue</option>
<option id="Navy" style="background-color:Navy">Navy</option>
<option id="MidnightBlue" style="background-color:MidnightBlue">MidnightBlue</option>
<option id="Cornsilk" style="background-color:Cornsilk">Cornsilk</option>
<option id="BlanchedAlmond" style="background-color:BlanchedAlmond">BlanchedAlmond</option>
<option id="Bisque" style="background-color:Bisque">Bisque</option>
<option id="NavajoWhite" style="background-color:NavajoWhite">NavajoWhite</option>
<option id="Wheat" style="background-color:Wheat">Wheat</option>
<option id="BurlyWood" style="background-color:BurlyWood">BurlyWood</option>
<option id="Tan" style="background-color:Tan">Tan</option>
<option id="RosyBrown" style="background-color:RosyBrown">RosyBrown</option>
<option id="SandyBrown" style="background-color:SandyBrown">SandyBrown</option>
<option id="Goldenrod" style="background-color:Goldenrod">Goldenrod</option>
<option id="DarkGoldenrod" style="background-color:DarkGoldenrod">DarkGoldenrod</option>
<option id="Peru" style="background-color:Peru">Peru</option>
<option id="Chocolate" style="background-color:Chocolate">Chocolate</option>
<option id="SaddleBrown" style="background-color:SaddleBrown">SaddleBrown</option>
<option id="Sienna" style="background-color:Sienna">Sienna</option>
<option id="Brown" style="background-color:Brown">Brown</option>
<option id="Maroon" style="background-color:Maroon">Maroon</option>
<option id="White" style="background-color:White">White</option>
<option id="Snow" style="background-color:Snow">Snow</option>
<option id="Honeydew" style="background-color:Honeydew">Honeydew</option>
<option id="MintCream" style="background-color:MintCream">MintCream</option>
<option id="Azure" style="background-color:Azure">Azure</option>
<option id="AliceBlue" style="background-color:AliceBlue">AliceBlue</option>
<option id="GhostWhite" style="background-color:GhostWhite">GhostWhite</option>
<option id="WhiteSmoke" style="background-color:WhiteSmoke">WhiteSmoke</option>
<option id="Seashell" style="background-color:Seashell">Seashell</option>
<option id="Beige" style="background-color:Beige">Beige</option>
<option id="OldLace" style="background-color:OldLace">OldLace</option>
<option id="FloralWhite" style="background-color:FloralWhite">FloralWhite</option>
<option id="Ivory" style="background-color:Ivory">Ivory</option>
<option id="AntiqueWhite" style="background-color:AntiqueWhite">AntiqueWhite</option>
<option id="Linen" style="background-color:Linen">Linen</option>
<option id="LavenderBlush" style="background-color:LavenderBlush">LavenderBlush</option>
<option id="MistyRose" style="background-color:MistyRose">MistyRose</option>
<option id="Gainsboro" style="background-color:Gainsboro">Gainsboro</option>
<option id="LightGrey" style="background-color:LightGrey">LightGrey</option>
<option id="Silver" style="background-color:Silver">Silver</option>
<option id="DarkGray" style="background-color:DarkGray">DarkGray</option>
<option id="Gray" style="background-color:Gray">Gray</option>
<option id="DimGray" style="background-color:DimGray">DimGray</option>
<option id="LightSlateGray" style="background-color:LightSlateGray">LightSlateGray</option>
<option id="SlateGray" style="background-color:SlateGray">SlateGray</option>
<option id="DarkSlateGray" style="background-color:DarkSlateGray">DarkSlateGray</option>
<option id="Black" style="background-color:Black">Black</option>
</select>
</div>
<div>
<label style="width:200px;">太さ</label>
<select name="thickness" id="thickness" onChange="onChangeRtn()">
<option id="full" value="full" selected>太い</ooption>
<option id="narrow" value="narrow">細</ooption>
<option id="narrow2" value="narrow2">細細</ooption>
<option id="narrow3" value="narrow3">極細</ooption>
<option id="bleeding" value="bleeding">にじみ</ooption>
</select>
</div>
<div style="margin-top:20px;">
<span id="sample">文字にラインマーカーを塗る</span>
</div>
<h2 style="margin-top:40px;">コピーペースト用</h2>
<h3>span</h3>
<div>
<textarea id="span_sample" style="width:70%" rows="3">
<span style="background: linear-gradient(transparent 60%,Yellow 60%);">文字にラインマーカーを塗る</span>
</textarea>
</div>
<h3>class</h3>
<div>
<textarea id="css_sample" style="width:70%" rows="5">
.line_marker_Yellow_full {
background: linear-gradient(transparent 60%,Yellow 60%);
}
</textarea>
</div>
</div>
</form>
<div style="border:1px darkpink dotted;padding:10px;margin-top:30px;">
この蛍光ラインマーカーメーカーについてのblogは<a href="https://usortblog.com//css-line-marker-maker-public/" target="_blank">コチラ</a>
</div>
</div>
</body>
</html>
こんな感じです。javascriptとHTML、CSSだけでできあがっています。
色の選択部分は、
[ryus_blogcard url=”https://usortblog.com//webcolor-list-form-select/”]
で、作りました。
javascript部分についてちょっと解説します。
読み込んだときにデフォルト値を設定
読み込んだときは例としてわかりやすいような黄色で太いマーカーを表示したいと思いました。そこで、
<body onLoad="selectedColorInit()">
bodyのonLoad(ページ読み込み後に実行）で selectedColorInit という関数を呼び出します。selectedColorInit では、
function selectedColorInit() {
// 最初は黄色で太い
document.colorform.webcolor.selectedIndex = 23;
document.colorform.thickness.selectedIndex = 0;
document.getElementById("webcolor").style.backgroundColor = 'Yellow';
onChangeRtn();
}
と、記述しました。
document.colorform.webcolor.selectedIndex = 23;
document.colorform.thickness.selectedIndex = 0;
で色と太さの初期値（黄色、太い）を設定しています。html の option で
<option id="Yellow" style="background-color:Yellow" selected>Yellow</option> <option id="full" value="full" selected>太い</ooption>
このように指定してあり、Chromeではうまく動いているように見えたのですがIEやFirefoxではだめだったので、javascriptでだめ押し指定しました。
その後 onChangeRtn(); （後述）で色が変わったときの処理をしています。
色や太さを選んだときの処理
色を選んだときは
<label style="width:200px;">色</label> <select name="webcolor" id="webcolor" onChange="onChangeRtn()"> (後略）
色のSELECTの onChange（変更があったら） onChangeRtn 関数を呼び出す、という指定で行っています。
太さの指定も同じく、
<label style="width:200px;">太さ</label> <select name="thickness" id="thickness" onChange="onChangeRtn()"> （後略）
太さのSELECTの onChange（変更があったら） onChangeRtn 関数を呼び出す、という指定で行っています。
onChangeRtn は、
// SELECTの背景色
if (document.colorform.webcolor.value == ''){
document.getElementById("webcolor").style.backgroundColor = '#ffffff';
} else {
document.getElementById("webcolor").style.backgroundColor = document.colorform.webcolor.value;
}
で、SELECT自体の背景色を今選ばれている色（document.colorform.webcolor.value）にします。
太さは、
// 太さをパーセントに
if(document.colorform.thickness.value == 'full') {
transparentPercent = 0;
colorPercent = 0;
}
if(document.colorform.thickness.value == 'narrow') {
transparentPercent = 60;
colorPercent = 60;
}
if(document.colorform.thickness.value == 'narrow2') {
transparentPercent = 70;
colorPercent = 70;
}
if(document.colorform.thickness.value == 'narrow3') {
transparentPercent = 80;
colorPercent = 80;
}
if(document.colorform.thickness.value == 'bleeding') {
transparentPercent = 40;
colorPercent = 70;
}
で、今選ばれている太さによって transPercentと色に指定する縦の高さの数値を編集します。
// spanの内容編集 var span_text = '<span style="background: linear-gradient(transparent ' + transparentPercent + '%,' + document.colorform.webcolor.value + ' ' + colorPercent + '%);">文字にラインマーカーを塗る</span>';
でspanのテキストエリアとサンプルで使うHTMLを、編集済みのtransparentPercentとcolorPercentを使って、編集しています。
// css classの内容編集
var css_text = '.line_marker_' + document.colorform.webcolor.value.toLowerCase() + '_' + document.colorform.thickness.value + ' {\n background: linear-gradient(transparent ' + transparentPercent + '%,' + document.colorform.webcolor.value + ' ' + colorPercent + '%);' + "\n" + '}';
でも同様にclassのテキストエリアで使うHTMLを、編集済みのtransparentPercentとcolorPercentを使って、編集しています。
// サンプルの編集
document.getElementById("span_sample").innerHTML = span_text;
// spanの編集
document.getElementById("sample").innerHTML = span_text;
// classの編集
document.getElementById("css_sample").innerHTML = css_text;
最後に、サンプル span class の内容を編集済みの内容で置き換えます。
感想：javascriptだけでも結構簡単に作れますね
jQueryを使おうかなと思ったのですがいろいろlinkさせないといけないし、同じことができるならjavascriptでやってみようかなと思って試してみました。思ったよりは簡単に作れました！
蛍光ペンのcssを作るのは面倒なので自分でも、これを使って簡単に蛍光ラインマーカーを使っていきたいと思います(^^)/
[amazon_searchlink search=”javascript”]
コメント