ムラゴン ブログ モバイル 表示 でも 押しやすい ボタンの作り方

ブログの初心者だと良くあるボタンは、どうやって作るのだろうか？と思いますよね

もちろん、ムラゴン ブログでもボタンを表示させてリンクボタンとして作れます。

今日はタップしやすいボタンの作り方とリンクボタンの作り方についてです。

まず準備する物は、ボタンです。

フリーの素材でボタンをネットで探します。

「Yahoo!検索」ボタン フリー 素材と半角スペースを入れて検索をします。

すると上に「広告」と表示されるのは広告なので有料となる事がありますから他のを探します。

無料素材屋さん、良いですね。ボタンを選んでZIPでダウンロードが出来ます。

いろんなボタンがダウンロードできますから、ムラゴンのページで使用するボタンを選んでアップロードをします。

ボタンをアップロードする事が出来ましたらブログに一旦表示させます。

ボタンを表示させる事ができましたら今度は、HTMLに切り替えます。

するとHTMLでは、この様になります。
< p >< img src = "// public.muragon.com/si3wn2ds/buimx1br.png?dummy=12345678" width="200" height="40" >< /p >

このボタン画像に飛ばしたいリンク先を設置するとボタンを押した時にリンク先に行くと言う事です。

たとへば、Yahoo!でしたらこの様なHTMLをプラスしてあげます。
< a href=" https://yahoo.co.jp" target="_blank" >

< p >< a href=" https://yahoo.co.jp" target="_blank" >< img src = "// public.muragon.com/si3wn2ds/buimx1br.png?dummy=12345678" width="200" height="40" >< /a >< /p >

リンク先をプラスしたら< /a >で閉じてあげます。

すると、こんな感じのボタンになり実際に使用するとリンク先に行く事が出来る様になります。

ボタンは画像なので実際には文字がyahooでなければなりませんがリンク先に飛ばす使用例です。

ここでは、簡単にリンク先を入れただけのボタンの使用方法です。

ボタンは、いろんなのに使用されます、PDFをダウンロードさせたり商品購入ボタンでしたりリンク先など使用用途が非常に多いです。

頭の回転が速い方は、この辺りで「ピピッ」と来るのです。( ´艸｀)

ボタンであれば、モバイルではタップするだけで良いですね。

指で押しやすい一定の間隔を開けて配置すると使い勝手の良いモバイルサイトになると言う事です。

「アクセシビリティ対応」のサイトとしてページへの評価が高くなります。

モバイルサイトは、タップが押しやすく一定の間隔を取られたボタンを配置するとページの使い勝手が良くなります。

文字だけのリンクより、モバイル表示でサイトをスマホで見た時に押しやすいボタンをタップした時の事を配慮するとページへの評価は、上昇する基準が設けられているのです。

これをアクセシビリティ対応サイトと言いますアクセシビリティ対応サイトは、現在ではとても重要な事でもありますので注意すべき点でもあります。

パソコンサイトでは、文字でリンク先を良く使用しますが、モバイルのスマホでは押しにくい時が良くありますよね。

サイドバーのリンク先エラー解消にもなります。

「文字が小さすぎる」「タップが押しにくい」とエラー扱いとなりページへの評価は著しく低下をしてしまいます。

まだやり方は、ありますが初心者でも簡単なボタンの作り方とモバイル表示で重要なアクセシビリティ対応サイトのご案内でした。

お疲れ様でした！それではまたね。

(*>∀<)ﾉ))★ﾏﾀﾈｰ