知ってる方のブログで「あること」をお見かけして、ちょっと気になったので調べてみました。
「あること」とは、「お申し込み」へのリンクをボタン風に表示させているのが、スマホでみた時に、こういう（↓）状態になってしまっていたのです。
申込ボタンのデザインを崩さないようにするには
せっかくブログの見た目に配慮して、申込へのリンクをボタン表示にされているので（ブログ面食いの私としてはそういう人大好きです！）お節介ながら解決策をお伝えします。
解決策１ スマホ表示でも１行に収まる文字数にする
一番簡単な解決方法です。
こういう表示になっている原因は、文字数が多いからです。
ゆえに、スマホ表示で１行以内に納まる文字数であればよいのです。
文字サイズにもよりますが、このままの設定ですと10字前後にするのがいいかな、と思います。
お申込・お問合せはこちらから
↑これで14文字。私のiPhoneSE（古っ！w）では１行表示されました。
「お申込・お問合せはこちら」（12文字）でもいいし、「お申込・お問合せ」（8文字）だけでもいいかもですね。
この辺りは、それぞれのお好みで。
解決策その２ <span>ではなく<div>に変える
この申込ボタンを設置している方は、多分やさしいあの方のブログからHTMLタグを設置していると思われます。
と、するとこういうタグのはずです。
もちろん間違っているわけではありませんが、行の装飾なので、文字数によっては「ボタン風デザイン」が崩れてしまいます。
「気にしないわ〜」という方は全然いいのですが、「せめて、ボタン風デザイン」はキープする方法は下記のようにタグを書き換える方法です。
- span のところを div にする
- 上図の箇所に、display: inline-block; を追記する
- 上図にあるline-height: 5.0; を削除する
書き換えたタグで表示させたボタンがこちらです。
パソコンでは見た目あまり変わらないですが、スマホで見ると、こういう状態になっています。（私の場合）
もちろん２行にはなりますが、「ボタン状態」はキープされるかと（笑）
気にならない方には、「どっちも変わらんわ！」と言われそうですが、気になる方はどーぞ。
北川 直枝（こころ・え・ごころ）
パソコンが苦手という個人事業主さんにも、パソコンを楽しみながら、使ってもらえるお手伝いをしています。
札幌在住。現在は、夫と小学生男子と老犬２匹・金魚のお世話が本業ですが、パソコンでできること・可能性を日々追求することを忘れず楽しんでいます！
主催・講師 パソコン＆企業アドバイザー伊藤史子
最後までお読みいただきありがとうございました！