Sympathist

あなたと共感でツナガルブログ

【超簡単5分でカスタマイズ】はてなブログ初心者でもできる!文字を蛍光ペンで強調する方法!

スポンサーリンク

f:id:kiminonaha03:20161215172527j:plain

今日は、ブログを始めたばかりでブログのカスタマイズをしてみたいけど何から手を付けてよいかわからないと迷っておられる方に5分で簡単にできるカスタマイズをご紹介させて頂きます。 

実は、以前から文字を強調するときに蛍光ペン風に引かれているブログをちらほら見かけていて、どうしてやってるのかな?と思っていました。記事を書くときに左上にあるBOXの中を探しても見つからなかったので、先輩方のブログカスタマイズを参考に今日、ついに導入してみました。

 

簡単にできますので初心者の方も是非チャレンジしてみて下さいね!

 

それでは『5分カスタマイズ!蛍光ペンを引いてみよう!編』を説明図を見ながら順番にチャレンジしてみましょう!

 

※注意点としてコピペのみの場合は編集モードは見たままモードでしか反映されないので気を付けてくださいね!

 

まずはブログ管理画面から

f:id:kiminonaha03:20161215174040j:plain

赤枠の1の設定 ➡ 2の詳細設定を選択

 

 

f:id:kiminonaha03:20161215174325j:plain

下の方へスクロールすると3のheadに要素を追加という枠があるので以下のコードをコピペして貼り付けてください。

 

コードはこちら

<style type="text/css">
/* 強調表示を蛍光ペン風に */
article strong{
margin:0 0.1em;
padding:0.1em 0.2em;
background:#FCDF1D !important;
background:linear-gradient(to bottom, transparent 30%, rgba(252,252,84,0.8) 80%) !important;
}
/* bタグは太字 */
article b{
font-weight:bold !important;
}
</style>

 これをコピーして貼り付けてください。

 

蛍光ペンのコードはこちらのブログを参考にさせて頂きました。

darie-daphnia.hatenablog.com

 

mu2in.hatenablog.com

 

赤字の部分は色を表すコードなのでここを変更すれば好きな色を選ぶことができます。

www.color-sample.com

このサイトで色のコードを参考にして下さい。まだ難しいという方はこのままコピペで黄色の蛍光ペンでいってみましょう!

 

そして下の4の変更するボタンを忘れずに押してくださいね。

f:id:kiminonaha03:20161215175305j:plain

 

これで記事を書くときに左上にある5のB(太字)ボタンで強調したい文字を選択すれば蛍光ペンが反映されるようになります。

f:id:kiminonaha03:20161215175859j:plain

 

 

こんな感じでお洒落に見やすくなりました!

 

f:id:kiminonaha03:20161215180050p:plain

 

今日は、デザインを作るための基礎になるCSS、HTMLといったコードが出てきましたが、これも最初は深く考えずにコピペだけで実行できるので一度チャレンジしてみてくださいね。

 

最初はちんぷんかんぷんでもカスタマイズを繰り返しているうちになんとなく意味が理解できるようになってきますので心配しなくても大丈夫でしょう!

 

僕もブログ超初心者でまだ2か月少しですがカスタマイズをし出すと面白くて嵌るようになりました(笑) はてなの先輩方が丁寧にカスタマイズの記事を書いてくださっているので失敗を繰り返しながらも継続していれば、一つ一つ理解できてくるようになってくるのでどんどん自分の好きなデザインにチャレンジしちゃいましょう!

 

こんな初心者用カスタマイズの記事も書きました。

www.kenbolife.com

 

てなことで任務完了!それでは。また!(・ω・)ノ