＜スポンサードリンク＞
前々から私は友達と一緒に本輪堂というサイトを運営しています。その中で私はシステム面を担当していてWordPressとかつかって個性的なサイトをつくろうと奮闘しております。
本輪堂では”本”という字がついておりますように本をいろいろと紹介する機会も多いのですが、そのときに本輪堂ならではの表示にさせたいと思い、試行錯誤中なのですが、そのなかでどうしても改行してほしくない部分があったんですね。
そこで、いろいろと調べてみるとやっぱりあるんです。指定した部分だけ改行を禁止する方法が。
今回をその方法を紹介したい思います。
といっても簡単なんですけどね。
改行したくない部分を<nobr></nobr>で囲むだけ。
 |
| ウインドウのサイズによってはボタンが改行されてしまう。 |
本輪堂で採用しているWordPressのテーマがThe Bootsrtrapというテーマで知っている人は知っているあのTwitter社が提供しているTwitter Bootstrapというテンプレート（って言うんですかね？）を使用しております。
TwitterBootstrapではちょっとHTMLに一言付け加えるだけでそのサイトをレスポンシブデザインにする事ができます。レスポンシブデザインというのはウインドウのサイズによって動的にサイトのレイアウトが変わるデザインの事で、最近ではタブレット端末やスマートフォンも多くなってきているので簡易的にそれらの端末に最適なレイアウトを作る事ができます。
アマゾンなどへのリンクをCSSを使ってボタン風にしたのですが、このレスポンシブデザインのせいでウインドウのサイズを小さくしていくと上の画像のようにせっかく作ったボタンが改行されて無惨な姿に・・・Σ(￣□￣; )
それで改行させたくないなと思った訳です。
方法は上にも書きましたがとても簡単で、<nobr>というタグを使えば良いのですが、こんな感じです。
Amazonの詳細ページへ 楽天BOOKSの詳細ページへ hontoで電子書籍を探す
そうすると同じウインドウサイズでも以下のように改行されません。
あるんだろうなと思いながら検索しなかったのでここまで車でちょっと時間がかかってしまいましたw
これからはすぐに調べるようにしようと思いますwww
一応参考までに・・・
アンテナの外側をリニューアルしました。URLも変えて、デザインも刷新！より見やすく、使いやすい形を目指しています。ぜひ新しくなったアンテナの外側をご覧ください！！
新しい「アンテナの外側から」へ
|
＜スポンサードリンク＞
|
0 件のコメント:
コメントを投稿