中級向け・HTML/CSSの編集

Jimdoにはリンク箇所に、下線が表示されないレイアウトがいくつかあります。

例えば、Barcelona（バルセロナのレイアウトをチェック→）。人気のTOKYO（東京→）もそうですね。

下線をつけてリンク箇所だとはっきりわかるようにしたい場合は、以下参考にしてください。

まず、リンクをクリックする動作に、いくつかの段階があります。

a:link　←未訪問のページへのリンク★

a:visited　←訪問済みのページリンク

a:hover　←マウスオーバーの状態

a:active　←マウスで押されている状態

a:focus　←タッチデバイスでのタップやtabキーでの移動など

★印だけに下線を引く設定をすれば、すべて下線が表示されます。

下線を引くためのソースは、以下。

text-decoration:underline;

↑テキストデコレーションで、アンダーラインを引くです。

「管理メニュー」→「基本設定」→「ヘッダー編集」

<style>

ここにCSSを記述します。

</style>

▼以下、コピペしてご使用ください。

<style>

.j-text a:link{

text-decoration:underline;

}

</style>

※他のCSSの記述がある場合は、<style></style>の中にcssのみコピペします。

※色の設定は「デザイン→スタイル」で設定しましょう。

上記の設定だと、テキストのリンク箇所すべてに設定されます。部分的に設定したい場合は、エリアのclassを追加します。

▼コンテンツエリアだけ指定したい場合

<style>

#content_area .j-text a:link,

#content_area .j-text a:visited{

text-decoration:underline;

}

</style>

▼サイドバーエリアだけ指定したい場合

<style>

.jtpl-sidebar .j-text a:link,

.jtpl-sidebar .j-text a:visited{

text-decoration:underline;

}

</style>

逆にすでにあるリンク下線を消したい場合は、

text-decoration:none;

↑テキストデコレーションは、none（なし）の意味。

<style>

.j-text a:link,

.j-text a:visited{

text-decoration:underline;

}

.j-text a:hover,

.j-text a:active{

text-decoration:none;

}

</style>

ブログ一覧のタイトル箇所は下線を表示したくない場合は、ブログのclassを追加して指定します。

<style>

 .j-blog .j-text a:link,

.j-blog .j-text a:visited{

text-decoration:none;

} 

</style>