サボりは1日にしてならず。

MENU

【はてなブログ無料版可】記事に蛍光ペン風のアンダーラインを引く方法【コピペで簡単】【スマホ可】

f:id:keykuuun:20211028130443j:image

はじめまして、きー(@sabori_key)です。

 

俺は生粋のはてなブログ無料版ユーザーなのですが、少し痒いところに手が届かないことがあります。

 

標準機能で使っていると、会話方式の画像挿入ができなかったり、目次の設定ができなかったり、ブログカードを表示させることができなかったりします。

 

とはいえ、それはあくまで標準設定で使っていた場合の話です!

 

実は、はてなブログは無料版でも自身でコードを設定することで自由にカスタマイズすることができます!

 

今回はこのようにアンダーラインを引く方法を解説していきます!

 

 

はてなブログは文字の装飾が少ない!

はてなブログユーザーはご存知のことかと思いますが、はてなブログ無料版は文字の装飾がかなり少ないです。

 

できることは下記。

  • 見出しの作成
  • リスト表示(数字、・)
  • 引用
  • 太字
  • 斜体
  • 文字色の変更
  • 文字サイズの変更
俺はスマホアプリからブログを執筆しているので、パソコン版だともう少し使える機能は多いかもしれませんがいかがでしょうか?
 
しかしながら、他のブログを覗いてみると、文字に下線が引いてあったりしておしゃれな印象を受けます。
 
何よりアンダーラインは強調したいところがわかりやすいんです!
 
実際ブログは何を伝えたいかが1番大事だと言われていますので、折角なら自分もアンダーラインを駆使していい記事を書きたいと思うのは当然です。
 
とは言っても機能にそんなものないし、「はてなブログだとできないんじゃ…」と思うかもしれませんが、できます!
 
しかも簡単に設定することができるので、ブログを読みやすくしたい方はぜひ参考にしてみてください!
 

アンダーラインを設定する方法

今回設定をするにあたって、HTML編集を使いますが、難しいことは一切ありません!
 
俺はスマホ版なので見たまま編集にしていますが、それでも簡単にアンダーラインを引くことは可能です!
 
PC版、スマホ版のどちらも使えるということでしっかり両方での操作方法を分けて説明しますのでスマホユーザーの方も安心して読んでいってください!
 

アンダーラインを引くための工程

今回取り組む工程は2つになります。
 
①デザインCSSにコードを打ち込む
②実際にブログの記事にアンダーラインを設定する
 
この2つのことをするだけでアンダーラインの設定が可能になります!
 

デザインCSSにコードを打ち込み、準備をする

まずは下準備として、デザインCSSにアンダーラインの基本情報を打ち込みます。
 

article u{

    text-decoration: none;

    background: linear-gradient(transparent 50%, #ffff00 50%);

}

 
以上のコードをデザインCSSにコピペしてください。
 
この時に何かエラーが起きることも想定して必ずバックアップは取っておいてください。
 
デザインCSSの開き方は、【ダッシュボード】から【デザイン】を開きます。
 
左上の【スパナマーク】をクリックして、【デザインCSS】を開きます。
 
この時に、すでに他のコードを打ち込んでいる場合は改行で1行空けてペーストするようにしてください!
 
以上で下準備は終わりです。
では、実際にアンダーラインを使ってみましょう!
 

アンダーラインを文章に使う

この工程はその都度行う必要がありますので、記事を書くたびに毎回操作が必要になります。

 

とはいっても、非常に簡単なのでぜひ覚えていってください。

 

PCでの操作方法
【見たまま編集】で文字を打ち込みアンダーラインを引きたい箇所を決めます。
 
【HTML編集】 に切り替えて、その部分を「<u>    </u>」で囲みます。
 
例えば、「俺はサラリーマンだ」という文章にアンダーラインを引きたい場合、
 
「<u>俺はサラリーマンだ</u>」
としましょう。
 
俺はサラリーマンだ
 
このようにアンダーラインは設定することができます。
 
続いて、スマホアプリからの設定方法を解説します。
 
スマホアプリでの操作方法

こちらも同様にまずは文章を書きます。

そして、アンダーラインを引きたい所を「<u>    </u>」で挟み込むところまでは一緒です。

 

「<u>俺はサラリーマンだ</u>」

 

このように準備ができたら、上記の文章を選択してカットします。

 

その後、文章を差し込みたいところをタップすると下記のような画面が表示されますので、【HTML貼り付け】を選択します。

 f:id:keykuuun:20211028130143j:image

 

俺はサラリーマンだ

 

以上でアンダーラインを文章中に設定することができます!

 

アンダーラインの太さや色、濃度を変えたい場合

 今回のデザインCSSコードで設定されているアンダーラインは黄色のものになりますが、「ブログの雰囲気に合わないから色を変えたい !」という方も中にはいらっしゃると思います。

 

もちろん色を変更することは可能です。

 

また、太さやアンダーラインの濃さを変えることもできるので、自分のブログにあったデザインに変更をしてみましょう。

 

この先はデザインCSSのコードを触りますので、事前にバックアップを取っておくことを推奨します!

 

先程、デザインCSSに下記のコードを設定してもらいました。

article u{

    text-decoration: none;

    background: linear-gradient(transparent 50%, #ffff00 50%);

}

 

この中の、

(transparent50%, #ffff00 50%)

を編集します。

 

左の数字(50%)は「アンダーラインの太さ」を設定しています。数字が大きくなればなるほど、線は細くなります。

 

真ん中の文字列は「線の色」を指定しています。

下記のサイトから自分の使いたい色を設定しましょう。

 

最後の数字(50%)は「線の濃さ」を設定しています。数字が大きくなればなるほど、線の濃さは薄くなります。

 

以上の方法でアンダーラインを自分好みに設定することができますので、自分のブログのデザインに合った見やすいアンダーラインを設定してみましょう。

 

まとめ

 以上の方法ではてなブログにアンダーラインを設定することができます。

 

はてなブログはコードさえ設定ができれば、割と自由にブログ作りができるので、ぜひご活用ください!

 

ブログランキング・にほんブログ村へにほんブログ村

 

はてなブログ関連記事