GO!GO!言語聴覚士

    耳鼻科領域で働く言語聴覚士のブログ
    MENU

    スポンサーサイト

    上記の広告は1ヶ月以上更新のないブログに表示されています。
    新しい記事を書く事で広告が消せます。

    応援が励みになります!
    ランキングクリックお願いします!

    ブログランキング・にほんブログ村へ

    SHARE

    【FC2ブログ】蛍光ペンのようなアンダーラインを引く方法【カスタマイズ】

    0   0

    FC2ブログの文章作成エディタには蛍光ペンを引いたように文章の背景色を変える方法があります。


    ですが!

    どうしても、本当の蛍光ペンを引いたように文章の下半分だけを色を変える方法を調べましたので、備忘録として記します。



    簡単に蛍光ペンのように引く方法




    まずは、簡単に蛍光ペンのように下線を引く方法です。




    /* ▼ 蛍光ペン ▼ */

    under {
    font-weight: bold;
    background: linear-gradient(transparent 40%, #ffff66 40%);
    }

    /* ▲ 蛍光ペン ▲ */



    CSSに上記を記述することで準備OKです。

    <under>~</under>で文字を囲むと、このように蛍光ペンみたいな下線が引けます。




    ちなみにfont-weight: boldは太字にする指示です。これを削除すると通常の太さの文字で蛍光ペンのみ残せます。




    <b>や<strong>タグに設定できるようにする




    つぎはclassタグを使って、<b>や<strong>タグに蛍光ペンを合わせる方法です。




    /* ▼ 蛍光ペン ▼ */

    .pen {
    background: linear-gradient(transparent 40%, #ffff66 40%);
    }

    /* ▲ 蛍光ペン ▲ */



    CSSに上記を記述して準備OKです。

    <b class="pen">~<b>のようにbの後ろにclass属性を指定して文字を囲むと、このように蛍光ペンみたいな下線が引けます。




    ちなみに<b>は太字、<strong>は強調を意味するタグです。このタグに蛍光ペンの下線も引くので、とても目立ちますね。




    <strong>タグだけで簡単に設定する方法




    これは私がやっている方法です。

    いちいちclass属性タグを入力するのが面倒なので、<strong>に下線がつくようにCSSを入力しました。




    /* ▼ 蛍光ペン ▼ */

    strong {
    background: linear-gradient(transparent 40%, #ffff66 40%);
    }

    /* ▲ 蛍光ペン ▲ */



    今後書く記事は<strong>タグを入力することで下線がつき、さらに過去の記事で<strong>タグを使用しているところもすべて下線がつきます。
    過去の記事をいちいち見直すのが大変なので、手軽に一括修正ですw




    線の太さや色を変える




    transparent ○%は線の始まる位置、#ffff66は色の指定で後ろの○%透明度です。

    この部分を変更すればOKです




    色の指定は#0000ffは、#ff0000は、#ffff00は、#008000はというようにカラーコードで指定します。

    カラーコードはHTMLクイックリファレンスのサイトが参考になります。





    応援が励みになります!
    ランキングクリックお願いします!

    ブログランキング・にほんブログ村へ
    関連記事

    SHARE

    Leave a reply






    管理者にだけ表示を許可する

    Trackbacks

    trackbackURL:http://gogost.blog22.fc2.com/tb.php/361-2aeb07ac
    該当の記事は見つかりませんでした。
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。