リンクボタンの作成方法

Simplicityの特徴 フォーラム Simplicityについての質問 リンクボタンの作成方法

6件の返信スレッドを表示中
  • 投稿者
    投稿
    • #29537
      けっけ
      ゲスト

      基本的な質問ですみません。

      このフォーラムのサイドバーにも付いている「最新版のダウンロード」「子テーマのダウンロード」などのリンクボタンはどのように作ったらいいのでしょうか?

      できれば同じものを作りたいと思います。

      背景の色も、場合によって変えられたらと思います。よろしくお願いします。

    • #29544
      Hidekichi
      ゲスト

      おそらくtextウィジェットに、htmlを書いて必要なセレクタにstyle.cssから設定を当てているのではないかと思います。

      例)

      /*ウィジェットに書く中身*/
      <div class="test_button">
        <a href="ページのアドレス"><p>何かしらのテスト</p></a>
      </div>
      
      /*CSS*/
      .test_button {
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 10px;
        text-decoration: none;
      }
      .test_button a{
        color: #f00;
      }
      .test_button p {
        margin: 0;
        padding: 0;
        width: 100%;
        text-align: center;
      }

      cssは適当ですが、こんな感じかなぁと

    • #29550
      アバター画像わいひら
      キーマスター

      当サイトのサイドバーのボタンは以下のように設定されています。

      とりあえず以下のように記入して

      <a class="button">ボタン</a>

      style.cssなどに以下のように設定します。

      .button {
          background-color: #fff;
          border: 1px solid #777;
          border-radius: 10px;
          color: #333;
          display: block;
          font-weight: bold;
          padding: 10px 20px;
          text-align: center;
          text-decoration: none;
          width: 250px;
      }

      幅や細かなスタイルの調整は、環境に合わせて調節してください。

    • #29582
      けっけ
      ゲスト

      Hidekichiさん、わいひらさん ありがとうございます。

      いただいたアドバイスを元に、以下のようにプログラムして、リンクボタンが完成しました。
      ちなみに上のコードだけですと、アンカーテキストにリンクの下線が入ってしまいましたので、もう一つクラスを設定して対処しました。

      子テーマのスタイルシートに以下のコードを追加

      .button {
      background-color: #fff;
      border: 1px solid #777;
      border-radius: 10px;
      color: #333;
      display: block;
      font-weight: bold;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      width: 200px;
      }

      a.noneline{text-decoration : none ;}

      ボタンをつけたいところに、以下の文を挿入。

      <a href="(リンク先のURL)"><div class="button">(アンカーテキスト)</div></a>

      以上でこのサイトと同じようなボタンが完成しました。ありがとうございます。

      • この返信は11年、 2ヶ月前にアバター画像わいひらが編集しました。理由: コード表示修正
    • #29583
      けっけ
      ゲスト

      追伸 リンクのコードが、本当にリンクになってしまいました(汗)

      上記、<div class=”button”>(アンカーテキスト)</div>の

      前に、<a href="http://kmplan.link/contact">
      後に、</a>
      を書きました。

      • この返信は11年、 2ヶ月前にアバター画像わいひらが編集しました。理由: コード表示修正
    • #29584
      けっけ
      ゲスト

      何度もすみません、コードがリンクになってしまいます。
      最初の<>の中には
      a href=”http://kmplan.link/contact&#8221; class=”noneline”
      最後の<>の中には
      /a
      を書きました。

    • #29590
      アバター画像わいひら
      キーマスター

      コード表示の修正を行っておきました。
      うまくいったようでよかったです。

6件の返信スレッドを表示中
  • トピック「リンクボタンの作成方法」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)