人生曇りときどき晴れ

長い人生には、晴れの時もあれば曇りもある。むしろ雨が続くことだってあるかもしれない。けれども雨は必ず止む。そしてまた晴れる。そんな気持ちを持ちながら世の中に溢れている気になることを自由気ままに綴っていきます。

【はてなブログ初心者必見】文字を蛍光ペン風に目立つようにできるデザインカスタマイズ

f:id:yanoshiho:20170619170937j:plain

ブログの記事をちょっとでも読まれるようにしたいと思って日々悩んでいる方には必見です。記事内で文章の一部分を目立せたい時ってありませんか?そんな時、文字を太字にするだけでは味気ないし、文字色を変えるだけではちょっと寂しい印象になってしまいます。そこで、今回のカスタマイズの出番です。

 

こんなやつです!!見たことありますよね?

 

雑誌でも、見かけたりする人もいるのではないでしょうか。蛍光ペンで線を引いたようなデザインです。ちょっと目立たせたい時や文章にアクセントをつけたい時に有効です。コピペするだけで使えるようになるのでぜひ、使ってみてください。それでは、順を追って説明していきます。

カスタマイズの手順

まず、始めにはてなブログで管理画面を開きます。赤枠で囲った『デザイン』というところを選択します。

 

f:id:yanoshiho:20170618112906j:plain

 

『デザイン』を選択すると次にこの画面が開くので、スパナ?のアイコンを選択し『デザインCSS 』の部分をクリックします。

f:id:yanoshiho:20170618115824j:plain

『デザインCSS 』をクリックすると次のような画面が出てくるかと思います。この画面が出てきたら、赤枠で囲ってある部分をクリックします。

 

f:id:yanoshiho:20170619014748j:plain

クリックするとコードを入れることができるようになるので、下記にあるコードをコピペして貼り付けます。 コピペして貼り付けるだけなので大丈夫ですが万が一を備えて、元のコードをコピペしてメモ張などに貼り付けておいてください。もし、気に入らなくて元に戻したいと思った時に、履歴を残していると非常に便利です。

 .entry-content strong{
	background: -webkit-linear-gradient(transparent 60%, #81DAF5 60%)!important;
	background: -o-linear-gradient(transparent 60%, #81DAF5 60%)!important;
	background: linear-gradient(transparent 60%, #81DAF5 60%)!important;
}

コードを貼り付けて右上にある『変更を保存する』をクリックして設定は完了です。とっても簡単ですよね。

f:id:yanoshiho:20170619023600j:plain

 

それでは、次に実際にはてなブログ内でどのようにして使うのかを説明していきます。

 

実際の使い方も超簡単

いつも通りに記事を書いていきます。記事を書いていく中で目立たせたい箇所、強調させたい部分が出てきたらその部分を選択します。そして、左上にある『B』という箇所をクリックします。

 

f:id:yanoshiho:20170619155028j:plain

たったこれだけで大丈夫です。本当にできているのと不安に思ったそこのあなた!!すぐにプレビューを見てみなさい。ドン!!

 

f:id:yanoshiho:20170619160145j:plain

 ほらね。ちゃんとできています。今までは太字になるだけだった強調したい箇所がたったこれだけでおしゃれな蛍光ペン風デザインにすることができます。蛍光線の色を自分のブログのイメージと合わないから変更したいという方は、下記の手順でいろいろと試してみてください。

 

蛍光線の色を変えたい場合

デザインCSSに貼り付けたコードの赤く囲った部分を変更すれば簡単に色を変更することができます。試しに1つやってみましょう。

f:id:yanoshiho:20170619163500j:plain

 デザインCSSに貼り付けたコードの一部分を変更してみます。今回は『#81DAF5』というカラーコードから『#F4FA58』というカラーコードにしてみました。カラーコードについては下記サイトをご確認ください。

html-color-codes.info

f:id:yanoshiho:20170619164248j:plain

 

変更できたら設定を保存します。保存したら先ほど説明したように普段通りに記事を書いてみてください。強調したい箇所を選択して『B』をクリックしてみると、、、

f:id:yanoshiho:20170619165227j:plain

 蛍光線の色がブルーからイエローに変更しています。他にも様々な色に変更することができるので自分の好みに合う色を探してみてください。

 

まとめ

強調したい部分に色をつけることで、文章の中で目立たせたい部分が明確にできます。色がついていることで記事全体にメリハリもつくので、ぜひやってみてください。