蛍光ラインマーカーメーカー作りました。spanやclassをコピペできます!

「CSSで蛍光ペンでラインを引いたように見せる表現をするには?」で蛍光ペンみたいなCSSを試してみて面白いなと思ったので、簡単にCSSが作れる蛍光ラインマーカーメーカーを作りました。
画面で蛍光ペンの色と蛍光ペンの太さを選ぶだけで、それを表示するためのspanやCSSのclassの指定を表示するのであとはコピペするだけで使うことができます。それについて書きます!

蛍光ラインマーカーメーカー の使い方

なにはともあれ、作った蛍光ラインマーカーメーカーはこちらです

蛍光ラインマーカーメーカー


ラインマーカーを作る
 のところにある太さから、お好みの蛍光ラインマーカーの色と太さを選ぶと、自動的にそのラインマーカーを表示する span と CSSのclass が表示されます。

たとえば、

色:DeepPink 太さ:細細 にすると、文字にラインマーカーを塗る という文字のラインマーカーもその指定通りになって、

コピーペースト用 というところにその蛍光ラインマーカーのspanとCSSのclassが表示されます。

spanのテキストを選択してコピー、ここに貼り付けてみると

文字にラインマーカーを塗る

↑ このようにラインマーカーを引いた文章が表示されます(^^)/

また、CSSのclassは、



コピー
して、使っている子テーマのstyle.cssに貼り付けると、WordPressの投稿固定ページ

このように記述すれば

この文章にラインマーカーが引かれますどうですか?

このような感じに表示されるようになります(^^)/

太さの見本をここに貼っておきます!

文字にラインマーカーを塗る 太い
文字にラインマーカーを塗る 細
文字にラインマーカーを塗る 細細
文字にラインマーカーを塗る 極細
文字にラインマーカーを塗る にじみ

蛍光ラインマーカメーカーの中身

この蛍光ラインマーカーメーカーの中身についてちょっと書こうと思います。

全文は

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

色の選択部分は、

昨日の「CSSで蛍光ペンでラインを引いたように見せる表現をするには?」を書くために色を選んだり太さをあれこれ試したり、その結果をspanやClassにしたりするのが結構面倒くさ

で、作りました。

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

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

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

bodyonLoad(ページ読み込み後に実行) selectedColorInit という関数を呼び出します。selectedColorInit では、

と、記述しました。

        document.colorform.webcolor.selectedIndex = 23;
        document.colorform.thickness.selectedIndex = 0;

で色と太さの初期値(黄色、太い)を設定しています。html の option

このように指定してあり、Chromeではうまく動いているように見えたのですがIEやFirefoxではだめだったので、javascriptでだめ押し指定しました。

その後 onChangeRtn(); (後述)で色が変わったときの処理をしています。

色や太さを選んだときの処理

を選んだときは

色のSELECTの  onChange(変更があったら) onChangeRtn 関数を呼び出す、という指定で行っています。

太さの指定も同じく、

太さのSELECTの  onChange(変更があったら) onChangeRtn 関数を呼び出す、という指定で行っています。

onChangeRtn は、

で、SELECT自体の背景色を今選ばれている色(document.colorform.webcolor.value)にします。

太さは、

で、今選ばれている太さによって transPercentと色に指定する縦の高さの数値を編集します。

spanのテキストエリアとサンプルで使うHTMLを、編集済みのtransparentPercentcolorPercentを使って、編集しています。

でも同様にclassのテキストエリアで使うHTMLを、編集済みのtransparentPercentcolorPercentを使って、編集しています。

最後に、サンプル span class の内容を編集済みの内容で置き換えます。

感想:javascriptだけでも結構簡単に作れますね

jQueryを使おうかなと思ったのですがいろいろlinkさせないといけないし、同じことができるならjavascriptでやってみようかなと思って試してみました。思ったよりは簡単に作れました!

蛍光ペンのcssを作るのは面倒なので自分でも、これを使って簡単に蛍光ラインマーカーを使っていきたいと思います(^^)/

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

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る