文字リンクの色と下線の消し方



  • https://saruwakakun.com/html-css/reference/buttons#section2

    こちらのサイトを参考にボタンをつくってみたんですが、文字が青色で下線がついてしまいます。
    ボタン内の文字の色を指定した色にするのと、下線の消し方を教えてください。

    追加CSSはこのように入れています。↓
    0_1704402789114_スクリーンショット 2023-12-28 061353.png

    投稿画面ではHTMLブロックに以下のように入力しています↓
    0_1704402846547_Screenshot 2024-01-05 06.09.27.png

    この状態でプレビュー画面を見ると、以下の画像のようになり、「楽天トラベル」という文字が青字で下線が出てしまいます。
    「楽天トラベル」という文字は、設定した緑色で下線なしで表示されてほしいです↓
    0_1704402998965_Screenshot 2024-01-05 06.10.41.png

    ボタンにカーソルをあわせると、背景の色と文字色は正しく出ますが、下線はついたままです。↓
    0_1704403032361_Screenshot 2024-01-05 06.10.45.png


    WordPressのバージョン :
    ご利用のサーバー名 :
    PHPのバージョン :
    OS :
    ご利用のブラウザ :
    該当サイトのURL :



  • @くみ さん

    こんにちは!
    画像ありがとうございます。

    実際にボタンが設置されている記事のURLをご共有いただけますか...?

    よろしくお願いいたします!



  • この投稿が削除されました!


  • @くみ さん

    URLありがとうございます!
    CSSの詳細度で負けているのが原因かもしれませんね。

    一度、追加CSSに書いてあるコードの

    .btn-flat-simple1

    の部分を

    #main-contents .btn-flat-simple1

    に置き換えて試してみていただけますか...??



  • ありがとうございます!できました!



  • すみません、ボタンはちゃんと表示されたのですが、このボタンにアフィリエイトリンクを入れるにはどうしたらいいでしょうか・・・?



  • @くみ さん

    こちらのマニュアルの流れが参考になるかと思います!
    https://jin-theme.com/manual/button-afilink/

    ご確認お願いいたします!



  • この投稿が削除されました!


  • 0_1707174058250_スクリーンショット 2024-02-06 055232.png

    すみません、マニュアルを見たんですがわかりませんでした。。。

    上の画像がボタンなんですが、これのどこにリンクを入れたらいいでしょうか。



  • 0_1707180854630_Screenshot 2024-02-06 09.49.48.png

    更に質問ですが、上の画像のJINの「シンプルボタン」へのアフィリエイトリンクURLの入れ方も教えてください。

    楽天やA8など、「リンクのみ」でアフィリエイトリンクが作成できる場合は、赤丸をしたところにリンクをいれています。
    しかし、以下の画像のバリューコマースのように、「広告となるテキストを入力」してリンクを作成した場合、どうやってボタンにリンクをいれたらいいでしょうか。

    0_1707181419519_スクリーンショット 2024-02-06 100005.png



  • @くみ さん

    画像ありがとうございます!

    伝わりにくく、失礼いたしました。。
    ↓ # の部分にリンクURLを入れる形になりますね...!
    0_1707183326354_スクリーンショット 2024-02-06 10.17.10.jpg

    しかし、以下の画像のバリューコマースのように、「広告となるテキストを入力」してリンクを作成した場合、どうやってボタンにリンクをいれたらいいでしょうか。

    こちらについては、以下の記事が参考になるかもしれません。
    https://kitacchi869.com/18964.html#index_id9

    ただ、記事内にも書かれていますが、ASPさんによってルールは異なりますので、
    自己責任でのご対応をお願いいたします...!

    ご確認よろしくお願いいたします!



  • 返信遅くなりもうしわけありません。
    詳しいご回答ありがとうございます!
    解決しました!



  • @くみ さん

    ご報告ありがとうございます!