PC/iPhone便利技yuragiフッター内のテキストリンクが途中で途切れないように編集する方法についてフッター内にあるテキストリンク(カテゴリーや固定ページなど)が途中で途切れないように編集する方法です。下記はテキストリンクが途切れてしまっているフッターと、そうでないフッターを比較した写真です。(スマホ表示の場合)変更前の写真では、フッター内にある「カーライフ」という文字が途中で途切れてしまい、「カーラ」の後が改行されてしまっています。テキストリンクが途中で途切れてしまうと、デザイン的にどうしても見にくい印象を受けますよね(苦笑)。変更後の写真では、文字が途切れておらず、「カーライフ」というテキストリンクが1つの塊であるかのように下の行に表示されています。今回はフッター内のテキストリンクを途切れることなく表示させる方法についてお伝えします。この記事を読んでほしい人フッター内のテキストリンクが文字の途中で途切れて困っているフッターのデザインを変更したいフッター内のテキストリンクを途中で途切れないように編集する方法について以前まで、フッター内に表示するテキストリンクの順番を入れ替えたりするなどして、文字が途切れないように調整していたんですが、ブログを続けるにあたってフッター内の表示内容を変えることがあり、その都度文字が途切れることに悩まされていたんですよね(苦笑)。この方法を使えばどんな順序でも途切れずに表示させることができます。方法まずはPC上で自身のサイトを表示させます。chromeの「デベロッパーツール」を使って、フッター内で使われているコードを確認します。フッター内にあるいずれかのテキストリンクにカーソルを合わせ、右クリックを押します。ここでは仮に「カーライフ」上で右クリックをしてみます。右クリックをすると「検証」という項目が表れるので、検証を押します。すると下記のように、画面右側にサイト検証用の項目一覧が表示されます。スマホで表示される場合のフッターのコードを見るために、上部にあるスマホ用画面への切り替えボタンをクリックします。0.7em;というコードがあります。inline;」というものが、文字が途切れることの原因でした。ちなみに「inline」とは、要素を横並びに表示させ、文章が右端にたどりつくまでは改行されないというコードです。画面幅いっぱいに表示させることができるため、使い方によっては便利なコードでもあるんですけどね。「inline-block」というコードを使用します。下記のように、「inline」を「inline-block」に変更します。0.7em;試しに自身のサイトの検証の画面にて「inline-block」に変更してみてください。フッター内のテキストリンクが途中で途切れていない様式に変わっていることが分かると思います。実際にコードを変えてみるそれでは実際にスタイルシート内にあるコードを「inline」から「inline-block」に書き換えてみます。編集前に必ずバックアップを取っておいてくださいね♪ダッシュボード内の「外観」→「テーマエディター」をクリックします。編集するテーマファイルは「スタイルシート(style.css)」です。li」についてのコードが書かれている箇所が「3629行目」であることが表示されていたため、一気にその行までスクロールします。「inline」を「inline-block」に書き換え、「ファイルを更新」を押して完了です。※ちなみに修正したスタイルシートの内容がスマートフォン上で反映されるまでに時間がかかることがあります。さいごに今回はフッター内のテキストリンクを途中で途切れないように表示する方法についてお伝えしました。スマホ表示の場合だけでなく、PC表示の場合も変更することができるので(同様に検証機能でコードをチェック)、必要な場合は編集してください。当サイトの理念について関わったすべての人に「感動!」をもたらすべく日々奮闘中!特にこれといった才能はないけれど、営業経験やコールセンターのスーパーバイザー経験から得た「ビジネススキル」や「電話対応」のノウハウを心を込めて書いてます。自然が大好きで、暇さえあればキャンプやアウトドアに勤しむ自然人。メッセージはこちらから。