【公開中】アメブロ開始4ヶ月・わずか20記事でも毎月5万PVで安定する「資産記事」手法はこちら ⇒
リンクの活用法

【要注意】アメブロのリンクの下線・アンダーラインを引く・消す方法

アメブロのリンクの下線・アンダーラインを引く・消す方法を解説

この記事の特徴

重要度 3.5
難易度 3.0
備考 アメブロでリンクのアンダーラインを引く時には意外な注意点があります。特にアプリの対応をできているかが大事です。

  

この記事では「アメブロでのリンクの下線・アンダーライン」について解説します。

ブログのリンクにアンダーラインを引くかどうかは議論が分かれますよね。好みの部分でもあります。

 

ですがアメブロではクリック率を上げるために、リンクにアンダーラインを引いた方がいいです!

理由はアメブロのアプリではリンクだと分かりにくいため。

  

例えばPCの場合にアンダーラインのある・なしを比べると下記の通り。

アメブロのリンクのアンダーラインはPCでは有無どちらでもOK

リンクのデフォルト色が濃いので、アンダーラインがなくても分かりやすいです。

 

アプリの場合は下記の通り。

アメブロのリンクのアンダーラインはアプリではあった方がいい

PCより色が薄く、アプリでは下線がつかないとリンクと気づかない人も出てきます

アメブロアプリで下線を引いてリンクに飛ばすことは、クリック率UPに重要ですね。

 

くますけ
くますけ

アプリで読む読者も多いから、下線を引いておいた方がよさそうだね!

 

リンクに下線を引く方法は複数ありますが、実はアプリでは無効な方法が多く紹介されているので要注意!

 

収益UPするリンクの活用方法10選でも解説していますが、リンクは集客・売上に直結します。

内部リンクが機能しにくいと、アクセス数が伸びず・売上も上がりにくい状態になりますね。

リンクの下線は、アプリにもしっかり対応する必要があります。

   

そこでPC・アプリどちらも対応できる、アメブロのリンクに下線を引く方法を紹介しますね。 

 

あめっくま
あめっくま

なお事前に、リンクの活用方法・NG手法の記事を確認していると分かりやすいですよ。

 

この記事を書いた人
  • アメブロで毎月収益7桁を達成
  • アメブロ集客・売上UPの指導多数
  • アメブロで資産記事を作り安定した集客を実現

 

アメブロたった20記事で5万PVの手法

アメブロで資産記事を作る方法はこちら ⇒

 

アメブロのリンクにアンダーライン・下線を引く方法は3つ

アメブロのリンクに下線を引く方法は、下記の3つが存在します。

  1. エディタの下線を使う
    ⇒アプリ対応する
  2. HTMLに直接text-decorationを書く
    ⇒アプリ対応する
  3. CSSにtext-decorationを書く
    ⇒アプリ対応不可
あめっくま
あめっくま

①エディタの下線機能を使うのが安心です。

  

①のエディタの下線機能は、HTML表示に切り替え不要で誰でも簡単にできます。

そしてアプリ表示にも対応するので、リンクにアンダーラインを引く最も確実な方法です。

 

②のHTMLに直接「style=”text-decoration: underline;”」を書く方法もアプリ対応します。

ただし毎回HTML表示に切り替えるのが面倒なので、あまり使われません・・・

 

③のCSSに「style=”text-decoration: underline;”」記述すれば、全ての記事で下線が引かれて楽です。

ですが残念ながらアプリには非対応。この手法ばかり紹介されているので要注意ですね。

   

くますけ
くますけ

一番簡単な方法で、アプリにも対応できるんだね!

あめっくま
あめっくま

念のため、それぞれやり方を解説するよ。

  

  

アメブロのリンクに下線を引く手順

順番に3種類のやり方を解説していますが、基本は1番のエディタの下線機能を使うのがおすすめです。

下記の3STEPで簡単にできて、PCアプリ両方に対応します。

アメブロでのリンク下線の引き方手順
  • STEP1
    テキストリンクを用意
  • STEP2
    テキストリンクを選択
  • STEP3
    エディタの下線マークをクリック

  

  

①エディタの下線機能を使う

リンクを作成した後に、エディタの下線をクリックするだけの方法です。

【補足】
PC表示でリンクに下線が引かれている場合は、アプリ表示のために行う作業となります。

  

下記のようにテキストリンクを用意します。

アメブロのリンクのアンダーラインの引き方①テキストリンクを用意

  

テキストリンクを選択した状態で、エディタの下線マークをクリックして下さい。

アメブロのリンクのアンダーラインの引き方②下線マークをクリック

以上で完了!とっても簡単ですね。

  

ちなみにエディタ上ではリンクに下線が引かれているので、パッと見は下記のように変わりません。

アメブロのリンクのアンダーラインの引き方③完成

ですが記事を投稿してアプリで確認すると、リンクにアンダーラインが引かれていますよ。

 

注意点としてはリンクを削除しても、アンダーラインは下記のように残ります。

アメブロのリンクのアンダーラインの引き方の注意点はリンクを消してもアンダーラインが残ること

リンクを解除したら、アンダーラインも消しておきましょう。

あめっくま
あめっくま

アプリのクリック率を上げるために、忘れずに下線を引いておきましょう。

  

アンダーラインを消す場合

下線を削除する場合も同じ作業です。

下記のようにアンダーラインを引いたリンクの部分を選択して、リンクマークをクリックするだけ。

アメブロのリンクのアンダーラインを消す場合も下線マークをクリックするだけ

削除も簡単ですね。

  

  

HTMLに直接text-decorationを書く

HTML表示のリンクタグ(<a>タグ)に、直接下記のコードを付け加えてもOK。

style="text-decoration: underline;"

PC・アプリどちらも対応します。

  

下記のようにテキストリンクを用意して、エディタ下部のHTML表示をクリックして下さい。

アメブロのリンクのアンダーラインの引き方⑤HTML表示に切り替え

  

リンクの<a>タグの中に、下記のようにコードを追記します。

アメブロのリンクのアンダーラインの引き方⑥text-decoration: underline;を挿入

  

この時、前に半角スペースを忘れずに入れておきましょう

アメブロのリンクのアンダーラインの引き方⑦半角スペースを忘れずに

  

エディタを通常表示に戻して完成です!

記事投稿後に、アプリでもアンダーラインが引かれているか確認しておきましょう

削除する場合は挿入したコードを消せばOKです。

  

あめっくま
あめっくま

毎回の作業でHTML表示にするのは、ちょっと面倒ですね・・・

  

  

CSSにtext-decorationを書く

アメブロのデザインでCSS編集用デザインを使っている場合は、CSSコードに追記することもできます。

全ての記事でリンクに下線を引いたり・消すことができますが、アプリの表示には対応しません

あめっくま
あめっくま

アメブロのCSSには、アプリ表示に適応できない欠点があります。

  

デザインの設定から、CSS編集をクリックします。

アメブロのリンクのアンダーラインの引き方⑧デザインの変更からCSSの編集をクリック

  

現在使用中のブログデザインCSSが表示されるので、下にスライドしてリンクの部分を探します。

アメブロのリンクのアンダーラインの引き方⑨CSS欄をスライドしてリンクの部分を表示

  

(1-1)基本テキスト全体の部分にある、「/*リンク*/」「/*訪問済みリンク*/」の部分を調整します。

アメブロのリンクのアンダーラインの引き方⑩リンクと訪問済みリンクの両方をカスタマイズする

  

下記のように、{}の中を改行してコードを挿入しましょう。リンクと訪問済みリンクの両方を変更しておくのがおすすめです。

アメブロのリンクのアンダーラインの引き方⑪text-decoration: underline;を挿入

保存をクリックして完成です。(ただしアプリでは効果はありません・・・)

  

挿入できるコードは下記から選んで下さいね。

text-decoration: underline; /*下線を引く*/

text-decoration: none; /*下線を消す*/

text-decoration: overline /*上線を引く*/

text-decoration: line-through /*取り消し線*/

text-decoration: blink /*文字点滅*/

  

例えば全記事のリンク下線を消すなら、下記のように挿入して保存すればOK。

アメブロのリンクのアンダーラインのを削除するならtext-decoration: none;を挿入

PCで記事を見る場合のリンク下線が全て削除されます。

あめっくま
あめっくま

PCで見る読者が多いブログならCSS編集でもOKですね。