【Jimdo】リンクの文字の下に線を引く方法

Jimdo で、リンクの文字下に線を引きたい！でも線引くボタンが出てこないやで･･･ってなりませんか？

実は、そのリンクの線を出すにはちょっとしたカスタマイズが必要です。

まずは、仕込みをしましょう。

手順１：スタイル（CSS）の設定

「管理メニュー」→「基本設定」→「ヘッダー編集」と進み、下記のコードを貼り付けます。

.line_a{
        text-decoration: underline!important;
}

貼り付けた際のイメージはこちら

まずはリンクを設定します。

私は「コンテンツ追加」というところに「Yahoo!」へのリンクを貼ってみたいと思います。
リンクは貼れましたか？

ここから少し難しくなります。
下の</>というボタンをクリック。

クリックすると、難しそうな画面が出てきます。
※これが、プロのWebデザイナーなどが書くのと同じ「HTML」という言語です。

難しそうですが、変更するのは少しだけなので大丈夫！

自分がリンクを設定した文字列を探してください。
私が作った例で言うと「コンテンツ追加」と書いている部分を探します。

<a title="https://www.yahoo.co.jp/" href="https://www.yahoo.co.jp/" target="_blank" 
rel="noopener">コンテンツ追加</a>、編集が驚くほど簡単にできます。

見つけることができたら、次は「class=”line_a”」というおまじないを書きます。
先ほど「ヘッダー編集」で線を引く仕込みをしたので、それを呼び出すようなイメージです。<a class=”line_a” と、aの後ろに半角スペースをあけて書きましょう。
下記のようになります。

<a class="line_a" title="https://www.yahoo.co.jp/" href="https://www.yahoo.co.jp/" target="_blank" 
rel="noopener">コンテンツ追加</a>、編集が驚くほど簡単にできます。

こんな仕上がりになります。
アンダーラインがあると「クリックできるんだ」ってわかりやすくなりましたね。

（文字の色と、下の線の色は同じ色になります）

Jimdoのデザインカスタマイズ、リンクにアンダーライン編でした。

ウェブデザイン講師＆制作を行っています。