おはようございます。
簡単アメブロ集客の住福です。
先日、アメブロのスマホ版での表示がガラリと変わったのをご存知でしょうか?
アメブロカスタムの松本さんや、やさしいブログの作り方の松田さんの記事でも書かれていたので、「へ~そうなんや~」くらいに思ってたんですが、いざ、スマホで自分のブログを見ると「どひゃーーーー!」でした(笑)
なんともまぁ、“リンク”が分かりにくいこと!
これは魚のヒラメかカレイを見分けるのと同じくらい、パッと見では分かりにくい!(この表現もわかりにくいですか?)
とりあえず、こちらをご覧下さい。
上が旧表示。下が新表示です。
お分かり頂けますか?
記事内メニューのリンク色ですが、もともと青だったのがグレーになっています。
普通の文字は黒ですので、一見すると「どれがリンクなの?」となってしまいます。
実は、アメーバのPCとスマホのCSS(Web表示のプログラミング部分)はまったく別物です。
簡単に言うと、PCでCSSをいじっても、スマホに反映されないんです。
現状としてカスタムでどうこう出来るものではないということ。。。
なので、アメーバの運営さんが、修正を入れてくれない限り、スマホから見る人はリンクがリンクだと分かりにくいままなんですね。
では、どうすればいいのか?
答えは簡単です。
リンクさせる文字に「青字」と「下線」の装飾を施してあげる。
「PCで自動でリンクを目立たせる方法」は以前ご紹介しましたが、前述したとおりスマホでは反映されません。
面倒かもしれませんが、リンクを貼る際に下記タグを使います。すでに“青字”と“下線”が施されるようにテキストを書いています。
※PCの方はコピペして、メモ帳にでも保存しておいて下さい^^
もしくは、記事編集画面でリンクさせたい文字を選択し(ドラッグ)、記事編集エディタ内で、青字と下線のボタンを押して装飾をかけてあげるといいです。
記事内メニューなどを使われている方は、この作業必須です!!
問い合わせや、メルマガ登録が激減したのは、「スマホから見る人が、リンクが分からないから」なのかも~Σ(゚д゚lll)
スマホのための電話リンク用 ↓
<a href="tel:012012345678"><font color="#0000FF"><u>0120-1234-5678</u></font></a>
※タグをコピペして使用できます。電話番号の部分をご自身の番号に変えて下さい。
スマホのためのメルアドリンク用 ↓
<a href="mailto:お使いのメールアドレス"><font color="#0000FF"><u>お使いのメールアドレス</a></u></font></div>
※タグをコピペして使用できます。アドレスの部分をご自身のアドレスに変えて下さい。
本日は長くなりましたが、以上です。
ちょっとしたことですが、スマホから見て下さる方のために配慮したいですね^^
ありがとうございます。
簡単アメブロ集客の住福です。
今日の記事は、非常にタイムリーな内容でして、数ヵ月後にこの記事を見られている方にはあまり意味がない記事かもしれません。でも、“今(6/24現在)”という時点で非常に重要な内容です。
先日、アメブロのスマホ版での表示がガラリと変わったのをご存知でしょうか?
アメブロカスタムの松本さんや、やさしいブログの作り方の松田さんの記事でも書かれていたので、「へ~そうなんや~」くらいに思ってたんですが、いざ、スマホで自分のブログを見ると「どひゃーーーー!」でした(笑)
なんともまぁ、“リンク”が分かりにくいこと!
これは魚のヒラメかカレイを見分けるのと同じくらい、パッと見では分かりにくい!(この表現もわかりにくいですか?)
とりあえず、こちらをご覧下さい。
上が旧表示。下が新表示です。
お分かり頂けますか?
記事内メニューのリンク色ですが、もともと青だったのがグレーになっています。
普通の文字は黒ですので、一見すると「どれがリンクなの?」となってしまいます。
今できる対応策
実は、アメーバのPCとスマホのCSS(Web表示のプログラミング部分)はまったく別物です。
簡単に言うと、PCでCSSをいじっても、スマホに反映されないんです。
現状としてカスタムでどうこう出来るものではないということ。。。
なので、アメーバの運営さんが、修正を入れてくれない限り、スマホから見る人はリンクがリンクだと分かりにくいままなんですね。
では、どうすればいいのか?
答えは簡単です。
リンクさせる文字に「青字」と「下線」の装飾を施してあげる。
「PCで自動でリンクを目立たせる方法」は以前ご紹介しましたが、前述したとおりスマホでは反映されません。
面倒かもしれませんが、リンクを貼る際に下記タグを使います。すでに“青字”と“下線”が施されるようにテキストを書いています。
<a href="リンク先URL" target="_blank"><font color="#0000FF"><u>ココに文章</u></font></a>
※PCの方はコピペして、メモ帳にでも保存しておいて下さい^^
もしくは、記事編集画面でリンクさせたい文字を選択し(ドラッグ)、記事編集エディタ内で、青字と下線のボタンを押して装飾をかけてあげるといいです。
記事内メニューなどを使われている方は、この作業必須です!!
問い合わせや、メルマガ登録が激減したのは、「スマホから見る人が、リンクが分からないから」なのかも~Σ(゚д゚lll)
※ついでにプレゼントです。
スマホのための電話リンク用 ↓
<a href="tel:012012345678"><font color="#0000FF"><u>0120-1234-5678</u></font></a>
※タグをコピペして使用できます。電話番号の部分をご自身の番号に変えて下さい。
スマホのためのメルアドリンク用 ↓
<a href="mailto:お使いのメールアドレス"><font color="#0000FF"><u>お使いのメールアドレス</a></u></font></div>
※タグをコピペして使用できます。アドレスの部分をご自身のアドレスに変えて下さい。
本日は長くなりましたが、以上です。
ちょっとしたことですが、スマホから見て下さる方のために配慮したいですね^^
ありがとうございます。
Next Innovation 住福 純