以前、リンクに下線（アンダーライン）を追加する方法を解説しました。
➡ マウスホバーでリンクに下線（アンダーライン）を表示する方法
QooQでは少しコードが違うので、本記事ではQooQに対応したリンクに下線を追加する方法を解説します。
CSSの追加方法
左のメインメニューから【テーマ】を選択し【カスタマイズ】をクリックします。
そこから【詳細設定】の【CSSを追加】を選択します。
【カスタムCSSを追加】にCSSを入力できます。
後述のCSSを入力したら保存をして、反映されているか実際にブログを確認しましょう。
リンクに下線を追加するCSS
リンクに下線を表示させるCSSです。
ブログ全体に下線が入ると少し気になるため、記事本文だけの方がオススメです。
他はお好みで追加したいところを採用してください。
ブログ全体
text-decoration: underline;
}
記事一覧
text-decoration: underline;
}
記事本文
text-decoration: underline;
}
サイドバー
text-decoration: underline;
}
フッター
text-decoration: underline;
}
訪問済みリンクに下線を追加するCSS
上記のコードを使用しても、訪問済みのリンクは下線が消えてしまいます。
下線をそのまま表示したい場合は以下のCSSも追加します。
ブログ全体
text-decoration: underline;
}
記事一覧
text-decoration: underline;
}
記事本文
text-decoration: underline;
}
サイドバー
text-decoration: underline;
}
フッター
text-decoration: underline;
}
マウスホバーでリンクに下線を表示するCSS
リンクにマウスをのせる動作（マウスホバー／マウスオーバー）で下線を表示させるCSSです。
ブログ全体
text-decoration: underline;
}
記事一覧
text-decoration: underline;
}
記事本文
text-decoration: underline;
}
サイドバー
text-decoration: underline;
}
フッター
text-decoration: underline;
}
当ブログで使用中のCSS
例として、当ブログで投稿日時点に使用しているリンク下線関連のCSSをお見せします。
上から
- 全体にホバーリンク下線
- 記事一覧にホバーリンク下線
- 記事本文にリンク下線
- 記事本文に訪問済みリンク下線
- 記事本文のホバーリンク下線なし
となっています。
全体にホバーリンク下線を追加しているのですが、記事一覧は含まれていないようなので別途コードが必要です。
当ブログはQooQ list版なのでリンクを分かりやすくしたいと考え、記事一覧も追加しています。別ブログの通常のQooQではデザイン的になくても平気なので省いています。
記事本文のリンクはホバーアクションではなく常時下線を表示させています。
それに伴い、記事本文のホバーリンク下線はnoneで無効にしています。
部分的に無効にしたい場合、underlineをnoneに変更したコードを使用してみてください。
QooQでもリンクの下線をお好みカスタマイズ！
外部テーマだと若干コードが異なっていて、うまく反映されずに困る事ありますよね、
QooQの場合は本記事を参考に試してみてください。
色々組み合わせて、自分好みにリンクの下線を追加してみてくださいね！
