【簡単】CSSをコピペするだけ!蛍光ラインマーカーメーカーを作りました

この記事は約39分で読めます。

「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">
&lt;span style="background: linear-gradient(transparent 60%,Yellow 60%);"&gt;文字にラインマーカーを塗る&lt;/span&gt;
    </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>

こんな感じです。javascriptHTML、CSSだけでできあがっています。

色の選択部分は、

[ryus_blogcard url=”https://usortblog.com/webcolor-list-form-select/”]

で、作りました。

javascript部分についてちょっと解説します。

読み込んだときにデフォルト値を設定

読み込んだときは例としてわかりやすいような黄色で太いマーカーを表示したいと思いました。そこで、

<body onLoad="selectedColorInit()">

bodyonLoad(ページ読み込み後に実行) 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を、編集済みのtransparentPercentcolorPercentを使って、編集しています。

        // 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を、編集済みのtransparentPercentcolorPercentを使って、編集しています。

        // サンプルの編集
        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”]

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress theme テーマ css ツール インターネット サービス
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。