本から学び仕事に活かすブログ。

ビジネス書の研究、社説の読み比べ、要約など。世の中の「学び」を見つけます。

コピペでかんたん♪はてなブログで「6色蛍光ペン」風に線を引く。何色でも使える方法です!

6色蛍光ペンやり方1

もくじ

 HTMLとCSSは難しいっっ!という方にも、コピペするだけのカンタン仕様になってます♪

6色と言わず、何色でも使うことができるやり方です。

蛍光ペンを「複数色」で使い分ける「勉強法の提案」におすすめ♪

はてなブログで「6色蛍光ペン」風の線を引く方法です。

複数の色を使ってラインを引きたいっ という方におすすめ♪

 

蛍光ペン風の線を引く方法はいくつかありますが、今回のやり方は以下のメリットがあります

・好きなだけ色を使える☆(今回は6色にします)

・太文字も自由に使えるっ(太文字の代わりではありません)

・色を変えたいとき、全体に反映される(オレンジを全体的に濃く変えたいなぁ〜、なんて時に最適です)

 

サルワカ様のサイトを参考にさせて頂きました↓

saruwakakun.com

 

ご参考までに当ブログ「6色蛍光ペンを使った勉強法」はコチラ↓ 

www.daishibass.com

 

HTMLとCSSの考え方

概念としてまずHTMLでは「ここからそこまでは<スパンの1です>」という指示をします。

そしてCSSで「スパンの1とは{○○をすることですよ}」と指示します。

1で名前を決めて、○○で名前の意味を決める、という概念です。

HTMLは、蛍光ペンで線を引きたい場所ごとに指示をしていきます。

CSSは一度デザインCSSの欄(スマホなら記事下)に入力すればokで、ブログ全体に反映されます。

 

実際にやってみましょう。

 

HTMLとCSSのかきかた

仕上がりはこんな感じです↓

仕上がり画像1

 

1)HTMLは? 

HTMLは、線を引きたい文字ごとに入力していきます。

HTMLの編集画面では、こうなってます↓

編集画面1

オレンジにしたい文字→ 本質 

<span class="orange">本質</span>

とします。

こうなります→本質

 

2)CSSは?

それぞれの色ごとに下記のように打っていきます↓

 

/*イエロー(薄い)*/

.yellow {

 background: linear-gradient(transparent 60%, #ffffbc 0%);

 

 }

 

※コピペ用コードは後ほど。

◇ ◆ ◇

 

パソコンとスマートフォンに、別々にコードを入力します。

 

パソコンでCSSを入力する場所

デザイン→カスタマイズ→デザインCSS です。

はてなブログ編集画面ではこうなります↓

編集画面2

 

 

スマートフォンでCSSを入力する場所

デザイン→スマートフォン→記事→記事下 です。以下ご参照ください。

f:id:daishibass:20171001205540p:plain

コードのコピペは、こちらからどうぞ↓

 

ラインの太さを変えたい時

60%を50%という風に数値を下げると、ラインが太くなります。

数値を上げれば、ラインが細くなります。

コードのコピペは、こちらからどうぞ↓

 

別の色に変えたいとき

オレンジなら「#ffca75」で、「#」の後ろにある「6桁のアルファベットと数字の部分」を変えます。

 

参考にさせて頂いたサイトはこちら↓

WEB色見本 原色大辞典‐HTMLカラーコード

www.colordic.org

 

単語を登録して作業短縮を!

入力をカンタンにするため、パソコンやスマホに<span class="yellow">といったHTMLを単語登録しておきましょう。作業効率が格段に上がりますっ☆

 

パソコンで単語を登録する場合の例はこちら↓

f:id:daishibass:20171001181319p:plain

右下にある「あ」もしくは「A」となってるところを右クリックし、「単語の登録」から登録できます。

 

私の場合は、パソコンでは「おれんじ」と、スマホでは「」と入力すると「<span class="orange">」となるよう設定してます。

 

コピペは、こちらからどうぞ↓

 

以上となります☆

 

◇ ◆ ◇

オススメ記事!

6色蛍光ペンをガチンコ対決させました! 

www.daishibass.com

  

www.daishibass.com

 

参考にした本はこちら↓

 

HTML5 & CSS3 デザインレシピ集

HTML5 & CSS3 デザインレシピ集

 

 

では、また!

◇ ◆ ◇