【はてなブログ無料版】記事に蛍光ペン風のアンダーラインを引く方法【コピペのみ】
俺は生粋のはてなブログ無料版ユーザーなんだけど、何気に制約があるのが、はてなブログだと思っていてフォントの大きさからデザインから事細かな設定をする必要がある。
標準機能で使っていると、会話方式の画像挿入ができなかったり、目次の設定ができなかったり、ブログカードを表示させることができなかったりする。不満ばかり漏らしていても仕方ないんだけどできないものはできない。
とはいえ、それはあくまで標準設定で使っていた場合の話で、はてなブログは無料版でも自身でコードを設定することで自由にカスタマイズすることができる。今回はアンダーラインを引く方法を解説していこうと思う。
- はてなブログは文字のデザインの幅が少ない
- アンダーラインを設定する方法
- アンダーラインを引くための方法
- デザインCSSにコードを打ち込む
- アンダーラインを文章に使う
- アンダーラインの太さや色、濃度を変えたい場合
はてなブログは文字のデザインの幅が少ない
はてなブログは、はてなブログ無料版は文字の装飾がかなり少ない。できることは下記。
- 見出しの作成
- リスト表示(数字、・)
- 引用
- 太字
- 斜体
- 文字色の変更
- 文字サイズの変更
俺はスマホアプリからブログを執筆しているから、パソコン版だともう少し使える機能は多いかもしれないんだけど、できることの幅は少ないのに違いはない。WordPressとかの他のブログを覗いてみると、文字に下線が引いてあったりしておしゃれな印象なものが多くて謎に劣等感を感じてしまう。
ブログ内のデザインで差別化を図ることも重要
ご存じの通り、インターネットにはブログは溢れていて、それぞれブロガーの個性が色濃く出ているんだけど、無料ブログだと制限が多くてできないことが多い。だから、他の人と同じようなブログになってしまう。
もちろん、ブロガーからするとこれはデメリットでしかなくて、出来るだけ他のブロガーと差別化をしたいと思うのが普通。安心してほしい、はてなブログは地味にカスタマイズすることができるんだ。
アンダーラインを設定する方法
今回設定をするのに、htmlコードを使うんだけど、全く難しくないし、コピペしてもらえたらオッケーだから是非参考にしてほしい。俺はスマホで、見たまま編集で記事を書いているんだけど、それでも簡単にアンダーラインを引くことは可能。
アンダーラインを引くための方法
今回取り組む工程は2つ。
①デザインCSSにコードを打ち込む
②実際にブログの記事にアンダーラインを設定する
この2つのことをするだけでアンダーラインは引くことができる。簡単。
デザインCSSにコードを打ち込む
デザインCSSにアンダーラインが反映されるようにコードを打ち込む。
article u{
text-decoration: none;
background: linear-gradient(transparent 50%, #ffff00 50%);
}
以上のコードをデザインCSSにコピペしてほしい。この時に何かエラーが起きることも想定して必ずバックアップは取っておいてほしい。
この時に、すでに他のコードを打ち込んでいるなら、改行で1行空けてペーストしておけばオッケー。
アンダーラインを文章に使う
この工程はその都度行う必要があるから、記事を書くたびに毎回取り組んでほしい。
PC
- 【見たまま編集】で文字を打ち込みアンダーラインを引きたい箇所を決める
- 【HTML編集】 に切り替えて、その部分を「<u> </u>」で囲む。
例えば、「俺はサラリーマンだ」という文章にアンダーラインを引きたい場合、
「<u>俺はサラリーマンだ</u>」
とすると、
「俺はサラリーマンだ」
このようにアンダーラインは設定することが可能。
スマホ
こちらも同様にまずは文章を書いて、アンダーラインを引きたい所を「<u> </u>」で挟み込む。
「<u>俺はサラリーマンだ</u>」
このように準備ができたら、上記の文章を選択してカットしてほしい。文章を差し込みたいところをタップすると下記のような画面が表示されるから、【HTML貼り付け】を選択。
「俺はサラリーマンだ」
以上でアンダーラインを文章中に設定することができる。簡単。
アンダーラインの太さや色、濃度を変えたい場合
今回のデザインCSSコードで設定されているアンダーラインは黄色なんだけど、「ブログの雰囲気に合わないから色を変えたい ！」という人もいると思う。もちろん色を変更することは可能。
太さやアンダーラインの濃さを変えることもできるから、自分のブログにあったデザインに変更をして使ってほしい。
さっきデザインCSSに下記のコードを設定しだと思うんだけど、このコードを書き換えていく。
article u{
text-decoration: none;
background: linear-gradient(transparent 50%, #ffff00 50%);
}
この中の、
(transparent50%, #ffff00 50%)
を編集する。
左の数字(50%)は「アンダーラインの太さ」で、数字が大きくなればなるほど、線は細くなる。真ん中の文字列は「線の色」を指定しているから、下記のサイトから自分の使いたい色を設定してほしい。
最後の数字(50%)は「線の濃さ」を設定していて、数字が大きくなればなるほど、線の濃さは薄くなる。これでアンダーラインを自分好みに設定することができるから、自分のブログのデザインに合った見やすいアンダーラインを設定してほしい。
