【blogger設定】QooQのテンプレートでリンクに下線をつける方法
bloggerテンプレートのQooQを使用しています
とても使いやすくて感謝です
→テンプレートはこちら
しかし一つ気になった点がありました
それはリンクの文字に下線が付かない所です
記事の作成画面ではリンクを付けた時に下線が表示されていますが、公開画面になると下線がなくなってしまいます
リンクに下線があった方がわかりやすい気がするのでカスタマイズします
設定方法
設定方法はこちらのサイトを参考にしました→参考サイトCSSにコピペするだけでオーケーです
トップ画面から「テーマ」を選択
ここで念のためバックアップを取っておきましょう！
「カスタマイズ」を選択します
すると下の画像のようにbloggerテーマデザイナーの画面に切り替わります
「上級者向け」を選択し「CSSを追加」をクリックします
そうしたら追加の欄に以下のコードをコピペしましょう
a:link {
text-decoration: underline;
}
a:visited {
text-decoration: underline;
}
これで完成です
記事を見てみるとリンクのところに下線がひかれています
ただしこの方法だと記事以外の他のリンクのところにも下線がひかれてしまうので注意が必要です
【追記】リンクのみ下線をつける方法ありました
こちらのサイトに作成の方法がのっていました個別に線を引くかどうかを設定が必要な様ですね
以下のコードをCSSに張り付ければいいようです
/*リンクに下線あり*/
a:link {
text-decoration: underline;
}
/*記事タイトルの下線なし*/
h3 a:link{
text-decoration: none;
}
/*ブログタイトルの下線なし（トップページ）*/
h1 a:link{
text-decoration: none;
}
/*ブログタイトルの下線なし(個別記事）*/
#header-title a:link{
text-decoration: none;
}
/*ラベルの下線なし（トップページ）*/
.list-item-category a:link{
text-decoration: none;
}
/*ラベルの下線なし(個別記事）*/
#single-header-category a:link{
text-decoration: none;
}
/*ナビゲーションバーの下線なし*/
#navigation a:link{
text-decoration: none;
}
/*サイドバーのリンク下線なし*/
#sub-content a:link{
text-decoration: none;
/*ヘッダーSNSボタンの下線なし*/
#single-header .single-share a:link{
text-decoration: none;
}
/*フッターSNSボタンの下線なし*/
#single-footer .single-share a:link{
text-decoration: none;
}
まとめ
今回はリンクに下線を引く方法を紹介しましたリンクに下線があることでブログが見やすくなると思うのでお勧めです
コードも少なくコピペも簡単なところもいいですね！
追記の方法で解決しました！
やはりCSSを知っていないといけないですね
私も勉強したいです
