にこりの収納物語

はじめまして。フルタイムで働きながら2人の幼稚園児のママをやっています。最近はズボラだけども、収納やお弁当作りが趣味化しています☆このまま脱ズボラ目指します!!収納のこと、お弁当や料理の事、子育ての事、その他役に立ちそうな情報など自由気ままに綴っていきたいと思ってます。

ハテナブログ 初心者でもできる!Bボタン(太字) iボタン(斜体)で蛍光ペンで線を引く最も簡単な方法 

 

こんにちは。

 

ご覧いただきありがとうございます。

 

 

今回、初心者の私でもできた最も簡単に【蛍光ペンを使った風に文章に線を引く方法】をお伝えしたいと思います。 

f:id:smileeveryday:20180528133712j:plain

 

はじめに

 

ブログをみていてよくこんな蛍光線を目にすることはありませんか。

例①)こんな蛍光線です。

例②)こんな蛍光線です。

 

ブログをより読みやすくする方法としては効果絶大です。

重要な箇所、目にとめてほしい箇所なんかに、文字を大きくしたり、色を変えたりする方法もありますが、少しゴチャゴチャした印象を受けるのも事実です。もちろん内容によってはそっちの方がよかったりもすると思いますが、シンプルに読み手にアピールしたい記事であれば、文字を加工せずに線を引く方法をおすすめしたいです。

 

 

しかし、『使ってみたいけど使い方が分からない、難しそう』と敬遠されている方も多いのではないでしょうか。

 

実は、この蛍光線の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>

 

 
 ②コピーされましたら、ダッシュボード(自分のブログの左上に表示されていませんか)→設定詳細設定headに要素を追加にコピーした内容を貼り付けます。
 
※この時注意していただきたいのが、headに要素を追加欄にすでに文章がある場合、必ず1行あけて貼り付けしてくださいね☆
 
③貼り付けたら、必ず1番下にある変更するのボタンを押してください。
 
 
この作業だけでOKです☆
それでは、ご自分のブログでBボタンを使って確認されてください。
 
 
 

iボタンで緑の蛍光ペンで線を引く方法~コピーして貼り付けるだけ~

(線の色は、緑に限らず可能ですが、今回は緑を選びました)

 ① まず、こちらの2重枠の中にあるペーストをそのままコピーしてください。

 <style type="text/css">
/* 斜体表示を蛍光ペン(緑)風に */
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> 
 
 ②コピーされましたら、同様にダッシュボード設定詳細設定headに要素を追加にコピーした内容を貼り付けます。
 
 
③貼り付けたら、必ず1番下にある変更するのボタンを押してください。
 
 
作業終了です☆
それでは、ご自分のブログでiボタンを使って確認されてください。
 

この方法を進める理由

初心者の私が色々試した結果、1番簡単な方法だと思ったからです。

この上記のやり方だと、パソコンでみても携帯でみてもどちらも反映されています。

 

他のやり方で、デザイン→カスタマイズ→{}デザインCSSを編集する方法もありますが、パソコンはうまく表示されるけど、携帯で見るとうまく表示されてなかったりと…難しく感じました。

 

最後に

いかがでしたでしょうか。

たった5分~10分の作業で、使いやすく、また読みやすい記事をつくることができますよ。本当に簡単な作業なのでぜひトライされてみてください。

 

次は、線を引く蛍光ペンの色を変える方法や線の太さ、濃さを変える方法を紹介させていただきたいと思います。

 

 

最後まで、読んで頂きありがとうございます。

 

 

 

もしよろしければ、いいね、ブックマーク、読者登録していただけるととっても嬉しいです。

どうぞよろしくお願い致します。