サイドバー 枠付きのアンカーテキストウィジェットの間隔

Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › サイドバー 枠付きのアンカーテキストウィジェットの間隔

  • このトピックには28件の返信、2人の参加者があり、最後にみきにより9年、 11ヶ月前に更新されました。
28件の返信スレッドを表示中
  • 投稿者
    投稿
    • #46077
      miya
      ゲスト

      ホームページ作成に色々と参考にさせていただき、見よう見まねで作成しております。
      フォーラムを探してみたのですが見つけれなかったのでご質問させていただきます。
      SimplicityのHPのサイドバーにある「Simplicity2」「Simplicity2 子テーマ」「スキンのダウンロード」のボタンとボタンの間隔ぐらい(5mm)にしたいのですが、私の場合1.5cmぐらい離れてしまいます。
      専門知識がほとんどない為、どこをどのようにいじったら修正できるのかを教えていただけると助かります。

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

      「枠付きのアンカーテキストウィジェット」というのがどこの部分のことかちょっとわからないです。
      「Simplicity2」「Simplicity2 子テーマ」「スキンのダウンロード」のボタンは、ボタンであって、ウィジェットではないので、ちょっと何について指しているのかがわからず混乱しています。
      もしよかったら、URLを提示していただいて、「この部分(〇〇と書かれている部分)」と示していただけると助かります。

      もし単に「Simplicity2」「Simplicity2 子テーマ」「スキンのダウンロード」のようなボタンを表示したい場合は、以下のようなスタイルとタグで書くと挿入できると思います。

      style.cssに以下のスタイルを貼り付ける。

      .spbtn {
          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;
      }

      記入するHTML。
      <a class="spbtn" href="URL">アンカーテキスト</a>
      スタイルは好みに合わせて修正してください。

    • #46090
      miya
      ゲスト

      わいひら様 お世話になります。
      外観-ウィジェットからテキスト選び使用したものでウィジェットと表現した方がいいのかと思いましたが、わいひらさんの言うボタンになります。
      上記のスタイルとタグはすでに貼り付け済みで、このボタンを試しに2個作ってみたのですがボタンとボタンの間がSimplicityHPのボタンより広くなってしまいました。
      HPのURLなのですが、HP自体作成途中でメンテナンス作業表示にしている為、ご確認できないのかと思い提示してないのですが、メンテナンス表示を解除してご提示した方がいいでしょうか。
      おっしゃるとおりに貼り付けて表示が違うと言う事は、やはりこちらのHPを確認する必要がありますよね。

    • #46091
      みき
      ゲスト

      ボタン同士の間隔が広くなるということなら
      以下のようにすれば間隔が調整できます

      .spbtn {
          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;
          margin: 5px;//数字を変更すれば間隔が変更できます
      }

      外観>ウィジェット>テキストに
      <a class="spbtn" href="URL">アンカーテキスト</a>と
      2個目の<a class="spbtn" href="URL">アンカーテキスト2</a>を追加
      ※アンカーテキストを分けると反映されません

    • #46092
      みき
      ゲスト

      すみません
      普通にリンクとして反映されました

    • #46093
      みき
      ゲスト

      修正
      ※<a class="spbtn" href="URL">アンカーテキスト</a>を分けると反映されません

    • #46094
      みき
      ゲスト

      おそらくsimplicityのボタンの間隔は17pxぐらいだと思います
      ※だいたいですのでご自分で調整をお願いいたします
      margin: 5px;
      ↓
      margin: 17px;

    • #46096
      miya
      ゲスト

      みき様 ありがとうございます。
      コピペして貼り付けましたが、ボタン同志の間隔に変化はありませんでした。
      夜、もう一度じっくりと見てみます。

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

      テキストウィジェットの「自動的に段落追加する」がオンになっている場合はpタグが入るので、そのマージンなどを指定する必要があるかもしれません。
      当サイトの場合だと、こんな感じのタグになっています。

      <p>
        <a class="simplicity-download" href="http://wp-simplicity.com/downloads/downloads2/">Simplicity2</a>
      </p>

      なので、pに対してスタイルを指定する必要があるかもしれません。

      メンテナンス表示を解除してご提示した方がいいでしょうか。

      見せていただけると、スタイルなどの設定状態を見ることができて、一目瞭然なので助かります。
      実際のものを見ないと、思っているのと違う可能性もありますし、全て推測になってしまうので。

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

      当サイトの、ボタンが入っているテキストウィジェットを例にすると以下のように指定します。

      #text-12 p{
        /*スタイルの指定*/
      }

      ただ、上記の12の部分は、ウィジェットによって特定のIDが入るので、自分のサイトのウィジェットIDを調べる必要があります。

    • #46099
      みき
      ゲスト

      >miyaさん
      テキストウィジェットの自動的に段落を追加するにチェックが入っていると
      間隔が変化しません
      すみませんがチェックをはずして再度お試しください

      >わいひらさん
      テキストウィジェットの自動的に段落を追加するの項目をわいひらさんの投稿を見て気が付きました
      ありがとうございます!!

    • #46148
      miya
      ゲスト

      わいひら様、みき様ありがとうございます。
      まだ作り始めたばかりなので恥ずかしいのですが、URLはこちらになります。
      気が付いたところをコピペして変更したところもあり、それが関係しているのかもわかりませんがご確認いただければ幸いです。
      超初心者で申し訳ありませんがよろしくお願いいたします。

    • #46149
      みき
      ゲスト

      urlからみさせていただきました
      やはりボタンの間隔がテストサイトと一緒でした

      .spbtn {
          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;
          margin: 17px;//数字を変更すれば間隔が変更できます
      }

      こちらのソースをstyle.cssに追加し
      外観>ウィジェット>テキストウィジェットに<a class="spbtn" href="URL">アンカーテキスト</a>を書いてください

    • #46150
      みき
      ゲスト

      ボタン同士の間隔を変更したい場合は
      margin: 17px;を変更してください

    • #46151
      miya
      ゲスト

      みき様
      上記をコピペし貼り付けましたが、ボタン同士の変化はありません。サイド幅を小さくしている分 width: 230px;にしていますが何か関係があるでしょうか。margin:の数値も変更しましたが変化がありません。
      また、ボタンがサイドの中央でなく右に寄ってしまいました。

    • #46152
      miya
      ゲスト

      追記
      margin:5pxだとサイドバーの中央、17だと右に寄りました。

    • #46153
      みき
      ゲスト

      「テキストウィジェットの自動的に段落を追加する」のチェックをはずしていますか?

    • #46154
      みき
      ゲスト

      テキストウィジェットの自動的に段落を追加するにチェックを入れると
      間隔が変わりません
      ですのでチェックをはずしてください

    • #46155
      みき
      ゲスト

      サイドバーを左側に表示されているようですので
      左側に表示してみました
      問題はなかったのでその他を見てみます

    • #46156
      miya
      ゲスト

      みき様 度々ありがとうございます。

      チェックは外れているのですが・・・・(>_<)

    • #46157
      みき
      ゲスト

      サイドバーは何pxですか?

    • #46158
      miya
      ゲスト

      #sidebar {
      width: 280px;

      CSS スタイルシートエディターに貼り付けました。

    • #46159
      みき
      ゲスト

      同じサイズと条件でやってみたのですが
      正常に表示されました

    • #46160
      miya
      ゲスト

      なぜでしょう??? 試しにchromeブラウザで表示してみましたがボタン間の幅は変化がなくmargin:5pxと17pxでボタンがセンターと右寄りになる同じでした。

    • #46161
      みき
      ゲスト

      わかったかもしれません
      テキストウィジェットを分けていませんか?
      ソースをみると
      “widget widget_text”が2つあったので
      おそらく原因はこれです
      テキストウィジェットを1つにまとめてください
      例:1つのテキストウィジェットに
      <a class="spbtn" href="URL">HOME</a>と<a class="spbtn" href="URL">初めに</a>を追加してください

    • #46162
      みき
      ゲスト

      #46091にも書かせていただいたのですが
      上手く伝わっていなかったみたいで・・・
      すみません

    • #46163
      miya
      ゲスト

      出来ました!!!!!!

      ありがとうございます。分けての意味が分からないと思いながら、尋ねることなく進めて行ったのがいけなかったですね(T_T)。

      本当に色々とありがとうございました。

    • #46164
      みき
      ゲスト

      お疲れさまでした!!
      3つ目からも同じテキストウィジェットに追加しないと
      間隔が開くので気を付けてくださいね♪
      サイト作り頑張っていきましょう!!

    • #46165
      みき
      ゲスト

      わいひらさんもありがとうございました!!

28件の返信スレッドを表示中
  • トピック「サイドバー 枠付きのアンカーテキストウィジェットの間隔」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)