| 記事の種類 | はてなブログの使い方、はてなブログの書き方 |
| SEO対策 | チョッピリ関係あり |
| SXO対策 | 関係あり |
| 難しさ | かんたん |
| 重要さ | チョッピリ重要 |
次のような方にオススメ！
- はてなブログでアンダーラインを引きたい
- ブログ記事をキレイにしたい
- ブログ記事を上手に書きたい
- もっとブログを読んでほしい
実は、ぴっぴ。
最近、ようやく「はてなブログのアンダーライン機能」を使いました。
はてなブログのアンダーライン機能を使った感想は次のとおりです。
- 簡単に線を引ける
- 線がシャープね
- 意外と目立つ
- かわいくない
- もっと使おう
- リンクみたいね
こんな風に思いました。
そのような訳で今回の「ぴっぴのはてなブログでアフィリエイト」は、はてなブログのアンダーラインの引き方を紹介します。
- 下線を引きたい部分を指定
- 「アンダーライン」をクリック
- 下線の表示
このように「はてなブログのアンダーラインを引く手順は、たったの3ステップで簡単です。
アンダーラインを引けるようになると、ブログ記事をキレイにする引き出しが増えます。
使えるようになっていて、損はないですよ。
また本記事では、「アンダーラインを蛍光ペンにカスタマイズする方法」や「アンダーラインを蛍を引くときの注意事項」も併せて紹介しています。
下記の「知りたいことにジャンプ」から知りたい情報にジャンプしてくださいね。
知りたいことにジャンプ
はてなブログのアンダーラインの引き方
はてなブログのアンダーラインの引き方は次のとおりです。
- 下線を引きたい部分を指定
- 「アンダーライン」をクリック
- 下線の表示
このようにアンダーラインの引き方は、わずか3ステップでチョー簡単！
画像を見ながら作業したい方は、下記をご覧ください。
HTML編集は直接スタイルを記述する、またはCSSの記述を適用するようになります
下線を引く部分を指定します。
「アンダーライン」ボタンを押してください。
下線が表示されます。
このように3ステップで、アンダーラインを引くことができます。
指定してボタンを押せば、線を引けるので、効果的に使ってくださいね。
アンダーラインを蛍光ペンにする方法
はてなブログのアンダーラインを蛍光ペンにする方法は、次のとおりです。
| <mark>タグを使用 | タグで囲むだけで、蛍光ペンみたいなラインを引ける |
| HTMLタグにSSを直接指定 | background: linear-gradient(transparent 70%, #FFFF01 70%); |
| 予めCSSに記述 | {background: linear-gradient(transparent 70%, #FFFF01 70%);} |
この3つの方法で、アンダーラインを蛍光ペンにします。
アンダーライン機能の基本知識
はてなブログのアンダーライン機能はボタンを押すことで、「アンダーラインのスタイルを充てた」spanタグを付けたり外したりするものです。
<!-- アンダーライン機能使用時のコード -->
<p><span style="text-decoration: underline;">アンダーラインを引いたところ</span></p>
決して「Uタグ」を付けたり外したりものではありません。
大事なことなので、覚えておいてくださいね。
アンダーラインを引くときの注意事項
はてなブログで、アンダーラインを引くときの注意事項は、次のとおりです。
- 安易にUタグを使わない
- 見た目をよくするだけなら、CSSを使って下線を引く
- カスタマイズして使うこと
このような点に注意して、アンダーラインを使いましょう。
安易にUタグを使わない
安易にUタグで、アンダーラインを引かないようにしましょう。
HTMLタグには、それぞれ機能があります。
| strong | 強い重要性。１記事に２から３程度の使用可 |
| em | 強調箇所。乱用はスパム行為に該当することもある |
| U | 非現実的注釈。綴りエラーの通知や固有名詞記号に使う |
このようにHTMLによって、機能が違います。
Uタグは下線を引けますが、それは本来の使い方ではないのです。
<u>は、固有名詞やスペルミス、外国語など、文章中の中で明確に区別をし、強調するための要素です。ただし、実際は強調の場合は<em>要素や<strong>要素、ハイライト表示をしたい場合は<mark>要素など、ほかの要素で代替できることがほとんどです。また、ハイパーリンクを表す下線と混同されがちなので、使用には注意が必要です。
このような目的で、Uタグを使います。
なのでアンダーラインを引けるからと言って、安易にUタグを使わないようにしましょう。
もちろんUタグに蛍光ペンのスタイルを充てるのもNGですよ。
見た目をよくするだけなら、CSSを使って下線を引く
見た目をよくするだけなら、CSSを使って下線を引きましょう。
先述のようにHTMLタグには、それぞれ機能があります。
| strong | 強い重要性。１記事に２から３程度の使用可 |
| em | 強調箇所。乱用はスパム行為に該当することもある |
| U | 非現実的注釈。綴りエラーの通知や固有名詞記号に使う |
線が引けるからと言って、安易にUタグを使わないようにしましょう。
見た目をよくするだけなら、CSSを使ってアンダーラインを引いてくださいね。
カスタマイズして使うこと
はてなブログのアンダーラインは、カスタマイズして使いましょう。
なぜならリンクと間違えられやすいからです。
リンク以外のテキストに下線を付けるべきではありません。たとえリンクに下線を付けないデザインだとしてもです。下線は、クリック可能という認識を強く与えるため、その期待に合わないとユーザーの混乱や不満の元になります。単語や語句を強調したければ、太字等を使用する方がずっと安全です。
このように閲覧者の方に誤解されないためにも、はてなブログのアンダーラインは、カスタマイズして使いましょう。
はてなブログのアンダーラインを使ってみた感想
はてなブログのアンダーライン機能を使った感想は次のとおりです。
- 簡単に線を引ける
- 線がシャープ
- 意外と目立つ
- かわいくない
- もっと使おう
- リンクみたいね
こんな風に思いました。
たぶん線がシャープなのは、好みのデザインにしてもらう前提なんだと思います。
皆が皆、蛍光ペンを好きだとは限りませんし、好きな色もちがいますし。
なので、あえてシンプルにしてあるのだと思います。
まとめ
今回は、はてなブログのアンダーラインを紹介しました。
アンダーラインを引く手順は、とても簡単です。
- 下線を引きたい部分を指定
- 「アンダーライン」をクリック
- 下線の表示
このように指定してボタンを押すだけで、アンダーラインを引くことができます。
しかし、はてなブログのアンダーラインは、ブログでよく見かける蛍光ペン風ではありません。
なので、アンダーラインを蛍光ペン風にしたい方は、カスタマイズしてください。
アンダーラインを使うとき、今回のポイントを抑えると良いですよ。
今回のポイント
- 安易にUタグ使わない
- 見た目をよくするだけなら、CSSを使って下線を引く
- カスタマイズして使う
今回のポイントを抑えて、正しくアンダーラインを引けば、Googleさんと閲覧者の方の両方に好かれる記事になりますよ。
これから記事を書く方へご案内
ぴっぴのはてなブログでアフィリエイトでは、編集画面の使い方が分かる「画像でわかる【はてなブログの記事の書き方】」をご用意しています。
今回のポイント
- 使用頻度の高い【機能の使い方を21枚の画像】で紹介
- オススメの記事の内容
- ネタの探し方
- 記事の品質の上げ方
このような盛りだくさんの内容になっています。
「良い記事を書きたい」または「検索する手間を省きたい」という方は、下記のリンクより「画像でわかる【はてなブログの記事の書き方】」をご覧ください。
