● スマホのリンクカラーをカンタンに青くする方法!
こんにちは、石川聡です。
あなたは、ご自分のブログをスマホで見たことがありますか。
何年も前からアメブロをされていますと、アメブロでのデザインがアメブロ側で自動的に指定されているケースが多いのです。
たとば、下の図のようなデザインになっている人、意外と多いかな。
![](https://stat.ameba.jp/user_images/20161122/10/blogdekiru/91/35/j/o0402030013803886349.jpg?caw=800)
この場合、デザインによってリンクの色が自動的に決められてしまいます。
上の図を見ると、リンクの文字はすべて薄いピンク。
一見、かわいらしい色に見えますが、スマホユーザーさまは本文の中のリンクがよくわかりません。
薄いピンクをリンクだと思っている人はいませんから、あなたが折角書いたサービスメニューへのリンクがクリックされないのです。
これ、あなたがご存じないだけで、ほとんどのユーザーさまがタップしません。
では、スマホでリンクの色を青くすることは不可能なのでしょうか。
いえ、可能ですよ。^^
下の図は、左が何もしてない状態。右が、ある方法を使った場合。
![](https://stat.ameba.jp/user_images/20161122/10/blogdekiru/aa/e8/j/o0402030013803886350.jpg?caw=800)
いかがでしょうか。
左や薄いピンク色。右は、青くてリンクだとすぐにわかりますよね。
「ブログ」と「こちらはテスト用の記事を書いたものです。」の色を見くらべてください。
選んだデザインによっては、こんなふうにパステルカラーになってしまいます。
そこで、どんなスマホ版がどのようなデザインであろうとも、必ずリンクを青くするしてくれるのでうs。
記事の最後に、次の文章をコピペしておくだけで、スマホのリンクカラーが変わります。
<style><!--@import url(http://subblog.web.fc2.com/bluelink.css);--></style>
この記述をそのままコピペして、記事を書くときに、文章のいちばん下に追加するだけ。
「毎回いれないとダメですか?」
はい、スマホの場合、パソコン版CSSみたいに一括でコントロールができません。
なので、毎回、記事の下にいれる必要があるのです。
アメケアをお使いの方は、この記述を最後に追加しておくと、自動ではいりますね。
私も、すこし前からやっています。
なので、スマホで見たときには、キレイな青ですよね。
ちなみに、これはタグなので、エディタの切り替えをしてからコピペしてください。
HTML表記に切り替えないとダメです。
通常の表記のままコピペしても、単に文字が入るだけなので気をつけてくださいね。
初心者の方のための、お店やお仕事ブログづくりを基礎からお手伝い。アメブログのプロフィール写真のアップの方法。
記事への画像の入れ方。リンクのつけ方、問合せ申し込みフォームの入れ方、デザイン、カスタマイズをサポートします。
こんにちは、石川聡です。
あなたは、ご自分のブログをスマホで見たことがありますか。
何年も前からアメブロをされていますと、アメブロでのデザインがアメブロ側で自動的に指定されているケースが多いのです。
たとば、下の図のようなデザインになっている人、意外と多いかな。
![](https://stat.ameba.jp/user_images/20161122/10/blogdekiru/91/35/j/o0402030013803886349.jpg?caw=800)
この場合、デザインによってリンクの色が自動的に決められてしまいます。
上の図を見ると、リンクの文字はすべて薄いピンク。
一見、かわいらしい色に見えますが、スマホユーザーさまは本文の中のリンクがよくわかりません。
薄いピンクをリンクだと思っている人はいませんから、あなたが折角書いたサービスメニューへのリンクがクリックされないのです。
これ、あなたがご存じないだけで、ほとんどのユーザーさまがタップしません。
では、スマホでリンクの色を青くすることは不可能なのでしょうか。
いえ、可能ですよ。^^
下の図は、左が何もしてない状態。右が、ある方法を使った場合。
![](https://stat.ameba.jp/user_images/20161122/10/blogdekiru/aa/e8/j/o0402030013803886350.jpg?caw=800)
いかがでしょうか。
左や薄いピンク色。右は、青くてリンクだとすぐにわかりますよね。
「ブログ」と「こちらはテスト用の記事を書いたものです。」の色を見くらべてください。
選んだデザインによっては、こんなふうにパステルカラーになってしまいます。
そこで、どんなスマホ版がどのようなデザインであろうとも、必ずリンクを青くするしてくれるのでうs。
記事の最後に、次の文章をコピペしておくだけで、スマホのリンクカラーが変わります。
<style><!--@import url(http://subblog.web.fc2.com/bluelink.css);--></style>
この記述をそのままコピペして、記事を書くときに、文章のいちばん下に追加するだけ。
「毎回いれないとダメですか?」
はい、スマホの場合、パソコン版CSSみたいに一括でコントロールができません。
なので、毎回、記事の下にいれる必要があるのです。
アメケアをお使いの方は、この記述を最後に追加しておくと、自動ではいりますね。
私も、すこし前からやっています。
なので、スマホで見たときには、キレイな青ですよね。
ちなみに、これはタグなので、エディタの切り替えをしてからコピペしてください。
HTML表記に切り替えないとダメです。
通常の表記のままコピペしても、単に文字が入るだけなので気をつけてくださいね。
お仕事ブログのつくり方と基礎からサポート
営業時間:9時から23時
定休日:不定休
山梨県甲府市千塚3-8-5
090-9310-1160
日本一わかりやすい!お仕事ブログのつくり方
アメブロ初心者のための使いこなしマニュアル
お客さま目線であなたのブログを診断!
お店・お仕事ブログがカンタンにつくれるようになる
お客さまに一瞬で魅力が伝わるヘッダー作成
お客さまの声
お問い合わせ
メール satoshi.vw@gmail.com
電話 090-9310-1160
営業時間:9時から23時
定休日:不定休
山梨県甲府市千塚3-8-5
090-9310-1160
日本一わかりやすい!お仕事ブログのつくり方
アメブロ初心者のための使いこなしマニュアル
お客さま目線であなたのブログを診断!
お店・お仕事ブログがカンタンにつくれるようになる
お客さまに一瞬で魅力が伝わるヘッダー作成
お客さまの声
お問い合わせ
メール satoshi.vw@gmail.com
電話 090-9310-1160
初心者の方のための、お店やお仕事ブログづくりを基礎からお手伝い。アメブログのプロフィール写真のアップの方法。
記事への画像の入れ方。リンクのつけ方、問合せ申し込みフォームの入れ方、デザイン、カスタマイズをサポートします。