画像を使わない(スマホを意識した)CSSリンクボタン作成メモ

2018年9月1日

新しくブログを作っているんですが、今更ながらモバイル(スマホ)を意識してリンクを作ろうと思いました。

PCの場合は、普通にテキストリンクで良かったのですが、モバイルだとテキストは小さくてタップしにくい。さらにリンク同士が隣り合っている場合、テキストリンクだとさらにタップしにくい・・。

また画像を使うのは単純に面倒くさい。そしてなんとなくスマートじゃない(スマホだけに笑)。

ということでスマホを意識して、リンクは画像を使わないで「CSSのみで作ったボタン」で作成することにしました。

その際のポイントや心がけたこと、手順などをメモしておきます。

スポンサーリンク
 

スマホを意識したリンクボタンのポイント

  • 文字サイズは14〜15px
  • リンクボタンが隣り合う場合は余白を多めにとる(PCと比べて)

下記の記事に、スマホを意識するポイントが書かれています。

スマートフォンサイトにおけるユーザービリティ12のポイント

この記事を参考に、文字サイズは14〜15pxに指定。リンクボタンの余白(margin)は多めにとりました(私の場合は上下左右7pxでmargin指定)。

リンクボタンを作った手順

  1. Css Gradient Buttonでボタンを作成
  2. HTML email inline stylerでCSSをインライン化
  3. ブログに貼り付け

下記の記事にリンクボタンをCSSのみで手軽に作る方法が書かれていました。

画像を使わずリンクボタンをブログに設置する方法 | 自分で作れるホームページ作成法

これを参考に作業。

1.まず、Css Gradient Buttonでリンクボタンを作ります。この時、リンクボタン内の文字サイズを15pxに指定。

2.次にHTML email inline stylerで作ったCSSソース?をインライン化(ブログ投稿画面で普通に貼り付けられる形にする)します。

3.最後にブログ記事投稿画面で貼り付けます。※もちろんソースを貼り付けられる部分で、です。

リンクを別窓で開く時は「rel=”noopener”」を付加する

最後にちょっと追記。

リンクを開く時に「別窓」を指定する場合、「rel=”noopener”」は付加することを心がけました。なんでも、これを付加しないと色々と問題があるようなので。

。。。

これで完了。意外と簡単でした。

スポンサーリンク