ハテナブログ 初心者でもできる!Bボタン(太字) iボタン(斜体)で蛍光ペンで線を引く最も簡単な方法
こんにちは。
ご覧いただきありがとうございます。
今回、初心者の私でもできた最も簡単に【蛍光ペンを使った風に文章に線を引く方法】をお伝えしたいと思います。
はじめに
ブログをみていてよくこんな蛍光線を目にすることはありませんか。
例①)こんな蛍光線です。
例②)こんな蛍光線です。
ブログをより読みやすくする方法としては効果絶大です。
重要な箇所、目にとめてほしい箇所なんかに、文字を大きくしたり、色を変えたりする方法もありますが、少しゴチャゴチャした印象を受けるのも事実です。もちろん内容によってはそっちの方がよかったりもすると思いますが、シンプルに読み手にアピールしたい記事であれば、文字を加工せずに線を引く方法をおすすめしたいです。
しかし、『使ってみたいけど使い方が分からない、難しそう』と敬遠されている方も多いのではないでしょうか。
実は、この蛍光線の2色ですが、本当に簡単な操作でできちゃうんです。
5分~10分であなたのブログをワンランクアップさせちゃいましょう♪
難しいHTMLの編集なんて一切必要ありません。
下記のペーストをコピーして貼り付けて頂くだけで次回より、Bボタンとiボタンのボタン一つで線が引けるようになるんです。
早速、ご説明いたします。
Bボタンでピンクの蛍光ペンで線を引く方法~コピーして貼り付けるだけ~
(線の色は、ピンクに限らず可能ですが、今回はピンクを選びました)
① まず、こちらの2重枠の中にあるペーストをそのままコピーしてください。
<style type="text/css">
/* 強調表示を蛍光ペン(ピンク)風に */
article strong{
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 70%, rgba(255,153,255,1.8) 80%) !important;
}
/* bタグは太字 */
article b{
font-weight:bold !important;
}
</style>
iボタンで緑の蛍光ペンで線を引く方法~コピーして貼り付けるだけ~
(線の色は、緑に限らず可能ですが、今回は緑を選びました)
① まず、こちらの2重枠の中にあるペーストをそのままコピーしてください。
/* 斜体表示を蛍光ペン(緑)風に */
article em{
font-weight:bold;
font-style: normal;
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 70%, rgba(159,223,131,1) 80%) !important;
}
/* iタグは斜体*/
article i{
font-style:oblique !important;
}
</style>
この方法を進める理由
初心者の私が色々試した結果、1番簡単な方法だと思ったからです。
この上記のやり方だと、パソコンでみても携帯でみてもどちらも反映されています。
他のやり方で、デザイン→カスタマイズ→{}デザインCSSを編集する方法もありますが、パソコンはうまく表示されるけど、携帯で見るとうまく表示されてなかったりと…難しく感じました。
最後に
いかがでしたでしょうか。
たった5分~10分の作業で、使いやすく、また読みやすい記事をつくることができますよ。本当に簡単な作業なのでぜひトライされてみてください。
次は、線を引く蛍光ペンの色を変える方法や線の太さ、濃さを変える方法を紹介させていただきたいと思います。
最後まで、読んで頂きありがとうございます。
もしよろしければ、いいね、ブックマーク、読者登録していただけるととっても嬉しいです。
どうぞよろしくお願い致します。