Jimdo で、リンクの文字下に線を引きたい!でも線引くボタンが出てこないやで・・・ってなりませんか?
実は、そのリンクの線を出すにはちょっとしたカスタマイズが必要です。
まずは、仕込みをしましょう。
目次
手順1:スタイル(CSS)の設定
「管理メニュー」→「基本設定」→「ヘッダー編集」と進み、下記のコードを貼り付けます。
.line_a{ text-decoration: underline!important; }
貼り付けた際のイメージはこちら
手順2:アンダーラインを引く箇所を指定(html)
まずはリンクを設定します。
私は「コンテンツ追加」というところに「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のデザインカスタマイズ、リンクにアンダーライン編でした。