SEIYA HOME's

家で楽しくすべてを完結したい男の超インドア派ブログ

〈超初心者でもできる!〉はてなブログで太字をマーカーでチェックしたような見た目に変える方法

f:id:sakanahana:20170423220637j:plain

ブログ超初心者のおさかなです。

 

ブログのカスタマイズとか、あこがれはするもののどうしたらよいか全く分かりません。

 

CSS?

HTML?

 

全く分かりません。

なんかコード?みたいのがズラーっと並んでいて、意味不明。

変にイジったら、全体がおかしくなってしまいそうで怖いです。

 

そんな私でも、太文字にマーカーラインを書くことができました。

 (こんな感じです。)

 

 

今回は、その方法を超初心者でも分かりやすくまとめてみます。

 

コピペするだけ!CSSをカスタマイズ

まずは、CSSに条件を書き込みます。

 

CSSとは、簡単に言えばブログをデザインする言語のこと。

ここに自分のしたいデザインを打ち込めば、それがブログに反映される(らしい)のです。

 

私も本当の意味は分かりませんが、それだけ知っていればいいかなーと適当に考えてます。

 

 

さて、さっそくやっていきましょう。

 

CSSを変更する画面はココ

 

 まずははてなブログの編集画面に行きます。

f:id:sakanahana:20170423205135p:plain:w500

 そして「デザイン」をクリック。

 

f:id:sakanahana:20170423210431p:plain:w500

 次に、

①カスタマイズ(スパナの形)をクリック

②デザインCSSをクリック

③枠内をクリック

します。

 

f:id:sakanahana:20170423211539p:plain

一番下まで行き、最後尾の文字から一行開けて、赤で囲った部分を記入します。

 

打ち込む文章は、下にあるものをコピペして貼り付けるだけ。

 

 

/*太文字をマーカーラインにする*/
.entry-content strong {
background: linear-gradient(transparent 60%, #7cfc00 40%);
}

 

(/*太文字をマーカーラインにする*/のところはコピペしなくてもOKです。)

 

そして最後に、一番上の「変更を保存する」を押したら終了です!

 

マーカーの色はここで変える

今回の設定は緑色のマーカーに設定してます。

 

マーカーの色を自分の好きなように変更するには、コピペの部分の

「#7cfc00」

の部分を変更します。

 

このコードは色を表すもの。

数多くある色を表すために、コードが設定されています。

 

私は、原色大辞典というサイトで好きな色を探しています。

 

www.colordic.org

 

 これで自分の好きな色のマーカーを引くことができるようになりました。

 

 

 

いやー、PCって本当に不思議ですね。なんでこんなコードを書くだけで、自分の好きなように表現することができるのだろう。

普段何気なく使っているコンピュータですが、先人たちがこのような複雑なシステムを構築して、さらにそれを使いやすいように工夫してくれたんだと、しみじみ思います。

 

 

感謝。

 

 

 

スポンサーリンク
-->