画像を使わない（スマホを意識した）CSSリンクボタン作成メモ【シバタスブログ】

この記事に含まれるタグ :
CSS リンクボタンスマホ PC

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

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

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

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

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

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

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

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

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

これを参考に作業。

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

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

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

最後にちょっと追記。

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

。。。

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

この記事に含まれるタグ : CSS リンクボタンスマホ PC

お気軽にコメントをどうぞ。
非公開（管理人のみ閲覧可能なコメント）にしたい場合には、ロックにチェックを入れてください。