Simple Life Navi

ミニマルな日常の気づき、楽しい体験などを掲載

- トップもご覧ください - 検索サイトでは「シンプルライフナビ」と検索ください -

Site Map

Blog

Mobile

Useful

☕ New Articles ☕️️

はてなブログ|アンダーライン(下線)の蛍光ペン風カスタマイズ|簡単コピペ

はてなブログ 蛍光ペン

こんにちは。シンプルライフ ナビです。

この記事では、ブログの記事に蛍光ペン風のアンダーライン(下線)を引く方法をご紹介します。簡単ですよ!

好きな色、好きなデザインの下線を作って、あなたのブログにも取り入れてみましょう!

記事中の「CSSコード」や「HTMLコード」をコピペして(無料版でも)使うこともできます。*1

ブログの記事本文でアンダーライン(下線)を引く方法

いろんなブログを見ていると、記事の本文で強調したい部分に蛍光ペン風のアンダーライン(下線)の装飾がされているのを目にします。

自分のブログでも同じように使いたい、そう思ったことはありませんか?

はてなブログ標準のアンダーライン(下線)

はてなブログの場合、アンダーラインの設定は簡単です。

記事作成画面から、下線を引きたい部分を選択して「アンダーライン」アイコンをクリックすればOKです。

アンダーラインのアイコン

 

選択した文章に、アンダーライン(下線)が付きます。

でも、シンプルなラインしかつきません。

蛍光ペン風のアンダーラインをつけたい場合、どうしたらいいのかな?

蛍光ペン風のアンダーライン(下線)

蛍光ペン風のアンダーライン(下線)を引くには、事前の設定が必要になります。(無料版でも使えます)

 

少し細かい設定が必要になりますが、あなたのブログに合わせて、好きな蛍光ペンを作成することが可能です。*2

手順に沿って進めれば、簡単に設定できるので安心してください。

<作成例>

  • 水色の蛍光ペン
  • 黄色の蛍光ペン
  • ピンクの蛍光ペン

simplelifenavigation.com

蛍光ペン風のアンダーライン(下線)を使えるように設定する|コードのコピペ利用もOK

蛍光ペン風のアンダーライン(下線)を使うには、2つの方法があります。

どちらかを選んで、あなたのブログで設定してみましょう。超初心者の人は、「記事ごとに設定する」方法を選んでおけばOKです。

変更項目 ブログ内で共通の設定をする 記事ごとに設定する
メリット
  • CSSでブログ全体の設定をまとめて変更できる
  • 記事作成ごとの色設定などは不要
  • 設定が簡単
  • CSSは不要
  • 記事ごとにカスタマイズOK
デメリット
  • CSSへの追記が必要
  • 記事ごとに設定が必要

 

まず、一番使いやすい色である、黄色の蛍光ペンを設定する方法を例にして説明していきます。

なお、設定色は蛍光色のほか、通常の色や、淡い色など、好きな色に変更することができます。

ブログ全体に共通の蛍光ペンのアンダーラインを使えるようにする

ブログ全体に共通の蛍光ペンのアンダーラインを設定する場合(全ての記事で使えるようにする場合)は、CSSのカスタマイズが必要になります。

次のCSSコードをコピーして、「デザインCSS」に追記しましょう。

article u {
text-decoration: none;
background: linear-gradient(transparent 50%,yellow 80%);
}

 ダッシュボード画面 →  デザイン →  カスタマイズ → デザインCSS にすすみ、既存のコードを消さないように注意して、既存のコードの後ろにCSSコードを追記(保存)してください。
デザインCSS

Warning!
CSSコードの記述を改変する場合は、はてなブログ|デザインCSSのバックアップ!トラブルへの備え を参考にして必ずバックアップを取っておきましょう。

 

そして、記事作成画面で、蛍光ペン風のアンダーラインを引きたい部分を<u></u>で囲んでください。

「HTML編集」画面

 ダッシュボード画面 → 「記事を書く」または「記事を管理」画面から記事作成画面をだし、「HTML編集」画面を出す。
そして強調したい文字を<u></u>で挟んでください。

記事作成画面

プレビュー画面にすると、黄色の蛍光ペン風のアンダーラインが引けていると思います。

簡単にできましたね!

記事ごとに蛍光ペンのアンダーラインを設定する(CSS不要。超初心者向き)

続いて、記事ごとに蛍光ペン風のアンダーラインを設定する方法をご紹介します。

CSSにコードを追記するとかよくわからない、というブログの超初心者の人でもできる、おすすめの設定方法です。

 

CSSを使わなくても蛍光ペン風のアンダーラインを使えます。

次のHTMLコードを、「記事を書く」または記事作成画面の「HTML編集」画面にコピペしてください。(1記事に1つでOK)

<style>
u{
text-decoration: none;
background: linear-gradient(transparent 50%, yellow 80%) !important;}
</style>

Warning!
1記事に1つでOKです。注意してください。*3

下記の例の場合、<p><作成例></p>よりも上の位置に入れておいてください。

 

そして、記事作成画面で、蛍光ペン風のアンダーラインを引きたい部分を<u></u>で囲んでください。(複数箇所で利用OK)

「HTML編集」画面

 ダッシュボード画面 → 「記事を書く」または「記事を管理」画面から記事作成画面をだし、「HTML編集」画面を出す。
そして強調したい文字を<u></u>で挟んでください。

記事作成画面

プレビュー画面にすると、黄色の蛍光ペン風のアンダーラインが引けていると思います。

<u></u>で強調したい部分を挟むのは、CSSを使う場合と同じですが、CSSを使わなくても同じように簡単に蛍光ペン風のアンダーラインを設定できました!

蛍光ペンの色や太さのカスタマイズや多色展開の方法

蛍光ペン風のアンダーライン(下線)の装飾を使えるようになりましたか?

表示されることを確認できたら、あなたのブログデザインに合わせて、色や太さを「カスタマイズ」することができます。詳しく見ていきましょう。

蛍光ペンのアンダーラインの色や太さをカスタマイズする方法

それでは蛍光ペンの色を好きな色にしたり、太さを変えてみましょう。

CSSコードにも、HTMLコードにも、共通の内容があったことに気がつきましたか?赤色の部分が、カスタマイズしたい内容に合わせて変更する部分です。

background: linear-gradient(transparent 50%, yellow 80%)

<解説>

項目 内容
transparent 50% 無色の部分の割合を指定しています。
50%を10%にすると蛍光ペンが太く(無色部分が少なく)、50%を70%にすると、蛍光分が細く(無色部分の面積が多く)なります。
yellow 80% アンダーラインの色を指定します。yellowの部分を、色名称や色コードで変更して好きな色にしてください。

<作成例>

  background: linear-gradient(transparent 70%, lightskyblue 80%) 

  • 水色の蛍光ペン

  background: linear-gradient(transparent 50%, yellow 80%) 

  • 黄色の蛍光ペン

  background: linear-gradient(transparent 10%, lightpink 80%) 

  • ピンクの蛍光ペン
色の名前や色コードを調べる

WEB色見本 原色大辞典 

アンダーライン(下線)の多色展開

蛍光ペン風のアンダーライン(下線)は、何種類でも設定できます。

<style>
u {
text-decoration: none;
background: linear-gradient(transparent 50%, yellow 80%) !important;}
</style>

赤字の「u」の部分を、「u2」や「u3」にすることで、たくさんの色を設定できます。割合や色の指定方法(上の項目参照)はすでに学びましたね。

記事本文中で対応する色をつけたい部分を<u></u>で挟む代わりに、<u2></u2>や<u3></u3>で挟めばOKです。

CSSにて複数色を設定する場合も同様です。

まとめ|蛍光ペン風のアンダーライン(下線)装飾を簡単に使う方法

蛍光ペン風のアンダーラインを割と頻繁に使うなら、この記事のCSSに設定する方法で設定しておくと便利です。

蛍光ペンはほとんど使わないという人は、CSSの設定はせず、記事ごとに設定しましょう。

利用頻度に合わせて、好きなようにご利用ください。

 

なお、簡単に使う方法があるので、最後にご紹介します。

はてなブログの「定型文貼り付け」機能を使いましょう。

定型文に、次の2つを登録しておくと、とても簡単に蛍光ペンのアンダーラインを使うことができます。(編集「見たまま」画面で簡単に使えます)

定型文登録 内容
登録1 <style>
u{
text-decoration: none;
background: linear-gradient(transparent 50%, yellow 80%) !important;}
</style>
登録2 <u>蛍光ペン</u>

 

定型文貼り付け機能の詳細は、次の記事を参照してください。

ブログなど カテゴリーの記事一覧

*1:この記事は「はてなブログ」での例としていますが、コード類は一般的なブログでも利用できます。

*2:設定できる色数に制限はないので、蛍光ペンを量産することも可能です。

*3:コピペする場所に迷う場合は、HTML編集画面の冒頭に入れてください。