「Blogger」記事内のリンクに下線を引いて分かりやすくしたい【T】
 |
テーマのカスタマイズからCSSを追加して下線を強制する
「Blogger」の管理画面から「テーマ」を選択し、「カスタマイズ」メニュー内にある「CSSの追加」項目を利用します。
リンクを示す「a」タグに対して下線を表示する命令を書き込むことで、テンプレートの標準設定に関わらず、記事内のすべてのリンクに自動で下線を引くことが可能です。
一度設定してしまえば、これから新しく書く記事はもちろん、過去に公開したすべての記事にも一括で変更が適用されるため、手間をかけずにブログ全体の使い勝手を向上させられます。
以下の手順で、設定画面からコードの追加を試してみてください。
管理画面の「テーマ」から「カスタマイズ」を選択します。
「詳細設定」または「CSSを追加」の項目を探してクリックしてください。
リンクに下線を適用するCSSコードを入力し、保存して実際の表示を確認します。
アドバイスとして、常に下線を表示するのではなく「マウスを乗せたときだけ下線を出す」ように設定することも可能で、読者の操作に合わせて動的な反応を返す演出も効果的です。
投稿エディタの装飾機能を使って個別に下線を設定する
特定のリンクだけを強調したい場合は、記事の編集画面で対象のテキストを選択し、ツールバーの「下線（U）」ボタンをクリックします。
この方法は、ブログ全体のデザインを崩したくないけれど、特に重要な参照先やアフィリエイトリンクだけを目立たせたいという場面で、直感的に使い分けられるため便利です。
HTMLやCSSの知識がなくても、普段の文字装飾と同じ感覚でリンクの存在感を調整できるため、記事の内容に応じた柔軟なレイアウト作りが行えます。
個別に装飾を適用する際は、以下の操作を行ってみてください。
編集画面でリンクを設定したテキストをマウスでドラッグして選択します。
ツールバーにある「下線」アイコンをクリックして装飾を適用してください。
プレビュー画面で、リンク色と下線が組み合わさって目立っているか確認します。
注意点として、記事ごとに手動で設定する方法は、後からブログ全体のデザインを統一したくなった際に一つずつ修正する手間が発生するため、計画的に利用するのが無難です。
リンクの色と下線の組み合わせを工夫して視認性を高める
下線を引くだけでなく、リンクの色自体を青系統など「クリックできる」と一般的に認識されている色に変更し、下線とのコントラストを調整します。
下線の太さや種類をCSSで微調整することで、文字に重なりすぎて読みづらくなるのを防ぎつつ、背景色との境界をはっきりさせて、どのデバイスから見ても迷わない導線を作ることができます。
小さなデザインの変更ですが、読者がストレスなく次の記事へ進める環境を整えることは、ブログの滞在時間を延ばし、より多くのコンテンツを届けるための大切なステップとなります。
視認性を向上させるために、次のポイントを意識して調整してみましょう。
テキストの色と下線の色が同系色になりすぎていないかチェックします。
行間を適切に保ち、下線が下の行の文字に干渉しないように配慮してください。
スマートフォン実機での見え方を確認し、指でタップしやすい間隔を意識します。
アドバイスとして、リンクが多すぎる箇所で全てに下線を引くと画面が騒がしくなることもあるため、重要なリンクに絞って装飾を行うなどのバランス検討も有効です。
