【はてなブログカスタマイズ】太い細い選べる蛍光ペンの呪文

こんにちは。今日は文中で言葉を強調したいときに使う蛍光ペンをマスターしますよ。

 

これで私のブログもおしゃれに変身

 

このラインですね。まるで魔法のようにオシャレなブログになっちゃうわ。これを呼び出す呪文を覚えます。

蛍光ペンでブログをおしゃれにしよう

BLOGの文字

 参考にさせていただきました

蛍光マーカーのカスタマイズにあたってこちらのサイトを参考にさせていただきました。ありがとうございます。

saitoumasami.com

 

まずは魔方陣を作る(CSSの設定)

蛍光ペンの呪文を使うために、CSSに魔方陣を作ります。

 

デザイン→スパナマーク→デザインCSSにコードをはる。

 

/*太ピンク*/
.pink_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFDFEF 0%) repeat scroll 0 0;}
/*太ブルー*/
.blue_line{background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #cce5ff 0%) repeat scroll 0 0;}
/*太イエロー*/
.yellow_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffffbc 0%) repeat scroll 0 0;}
/*細ピンク*/
.pink_line_narrow{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ffb2d8 0%) repeat scroll 0 0;}
/*細ブルー*/
.blue_line_narrow {background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #add6ff 0%) repeat scroll 0 0;}
/*細イエロー*/
.yellow_line_narrow{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ffff7f 0%) repeat scroll 0 0;}

 このように指定すると下記のような色と太さになります。 

  • 太ピンク
  • 太ブルー
  • 太イエロー
  • 細ピンク
  • 細ブルー
  • 細イエロー

赤字のところは、カラーコードです。お好きな色に変更することもできます。

www.colordic.org

 

ちなみに、コードの初めの部分に

 

/*コードの種類*/

 

このように入れておくと、何のコードなのかわかりやすくなります。いろいろカスタマイズしてると、ズラズラと長くなってきますからね。後で変更するときにも便利です。

 

蛍光ペンを呼び出す呪文

  • 太ピンク

<span class="pink_line">ここに文字を入れる</span>

  • 太ブルー

 <span class="blue_line">ここに文字を入れる</span>

  • 太イエロー

<span class="yellow_line">ここに文字を入れる</span>

  • 細ピンク

<span class="pink_line_narrow">ここに文字を入れる</span>

  • 細ブルー

<span class="blue_line_narrow">ここに文字を入れる</span>

  • 細イエロー

<span class="yellow_line_narrow">ここに文字を入れる</span>

 

この呪文を、記事を書くときに「HTML編集」のところで使います。

<spanほにゃらら>文字</span>のタグを使うと、文章の中の単語などのスタイルを設定することができます。先に魔方陣(デザインCSS)で「ほにゃらら」のところは、「こんなことをしてね」と指定しているので、呪文(<span>のタグ)を使うだけで魔法(蛍光ペンのライン)を呼び出すことができるんですね。

 

使い方の注意

ボタンにコードを指定してクリックでする方法ではありません。ちょっとめんどくさいですが、色や線の細さ、太さなど無限に指定することができます。 

よく使う色だけボタンに指定するなどするといいかもしれませんね。その方法はまた後日お勉強したいと思います。今回はここまででした。 

 

www.happyreina.com

 

 

www.happyreina.com