MENU

はてなブログで太字を蛍光マーカーでラインを引いたようにする方法

  • URLをコピーしました!

はてなブログで、太字を蛍光マーカーでラインを引いたようにする方法を今日は紹介したいと思います。

はてなブログの「見たまま編集」で、「B」というアイコンを使って太字にした文字を蛍光マーカーでライン引きしたようにします。

f:id:ringocat-note:20170220150532p:plain

目次

太字を蛍光マーカーでラインを引いたようにする方法

方法は、下記の4行の文を、はてなブログの「デザインCSS」に”コピー&ペースト”します。

/*太文字マーカー*/
.entry-content strong {
background: linear-gradient(transparent 60%, #ff99cc 40%);
}

デザインCSSを開く

デザインCSSの場所は、はてなブログの「ダッシュボード」の「デザイン」をクリック。

f:id:ringocat-note:20170220150722p:plain

 

スパナマークのアイコン」をクリックして、「{ }デザインCSS」をクリックします。

f:id:ringocat-note:20170220150753p:plain

 

デザインCSSにコピペする

下に出てきたウィンドウ内に、先ほどの4行の文をコピペします。

/*太文字マーカー*/
.entry-content strong {
background: linear-gradient(transparent 60%, #ff99cc 40%);
}

f:id:ringocat-note:20170220151059p:plain

 

変更を保存する

そして、「変更を保存」して完了です。

f:id:ringocat-note:20170220151256p:plain

 

太字が蛍光マーカーでライン引きされたようになる

これで、はてなブログの見たまま編集のBアイコンを使って太字にした文字が、蛍光マーカーでライン引きされたように表示されるようになります。

/*太文字マーカー*/
.entry-content strong {
background: linear-gradient(transparent 60%, #ff99cc 40%);
}

線の太さ、色、濃さの設定

transparent」では、”線の太さ, 線の色, 色の濃さ”を指定できます。

線の太さを変更する

線の太さは%で指定します。

パーセンテージが高いほど、線は細くなります。

線の色を変更する

線の色は#rrggbbで指定します。

色の見本は、下記などを参考にしてみてください。

色の濃さを変更する

色の濃さは%で指定します。

パーセンテージが高いほど色が薄くなります。

変更の保存

設定をしたら、必ず「変更を保存」することを忘れないでくださいね。

変更を保存しなければ反映されませんので。

 

おわりに

ちなみに余談ですが、レインボーマーカーを作ることもできますよ(笑)

ブラウザによっては見えないかもしれません。

レインボーマーカーサンプル

文字はちょっと見にくいですね(^_^;)

設定方法などは少し複雑になるので、ここでの説明は省かせて頂きますがm( )m、気になる方は、「linear-gradient」で検索をかけてみるといいかもしれません。

それではみなさん、良いはてな LIFEを!

 

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ringocatのアバター ringocat いつか猫になる人

大好きなアップルと大好きな猫を掛け合わせた名前のワタシ ringocat 。アップル歴約30年で、元はとある職人でした。猫命の妻と2人暮らし。
夢は猫と一緒に暮らせる家に引っ越すことでしたが、2019年7月、家の前で怪我をしていた猫を保護することとなり、現在は猫と一緒に暮らせる一軒家へ引っ越し。猫も3匹に増えました!
当サイトでは、アップル関連とガジェット関連の記事をUPしていきます。

コメント

コメント一覧 (1件)

コメントする

目次