Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › サイドバー 枠付きのアンカーテキストウィジェットの間隔
- このトピックには28件の返信、2人の参加者があり、最後に
みきにより9年、 11ヶ月前に更新されました。
-
投稿者投稿
-
-
2016年10月13日 1:14 PM #46077
miya
ゲストホームページ作成に色々と参考にさせていただき、見よう見まねで作成しております。
フォーラムを探してみたのですが見つけれなかったのでご質問させていただきます。
SimplicityのHPのサイドバーにある「Simplicity2」「Simplicity2 子テーマ」「スキンのダウンロード」のボタンとボタンの間隔ぐらい(5mm)にしたいのですが、私の場合1.5cmぐらい離れてしまいます。
専門知識がほとんどない為、どこをどのようにいじったら修正できるのかを教えていただけると助かります。 -
2016年10月13日 2:10 PM #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>
スタイルは好みに合わせて修正してください。 -
2016年10月13日 3:08 PM #46090
miya
ゲストわいひら様 お世話になります。
外観-ウィジェットからテキスト選び使用したものでウィジェットと表現した方がいいのかと思いましたが、わいひらさんの言うボタンになります。
上記のスタイルとタグはすでに貼り付け済みで、このボタンを試しに2個作ってみたのですがボタンとボタンの間がSimplicityHPのボタンより広くなってしまいました。
HPのURLなのですが、HP自体作成途中でメンテナンス作業表示にしている為、ご確認できないのかと思い提示してないのですが、メンテナンス表示を解除してご提示した方がいいでしょうか。
おっしゃるとおりに貼り付けて表示が違うと言う事は、やはりこちらのHPを確認する必要がありますよね。 -
2016年10月13日 3:43 PM #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>を追加
※アンカーテキストを分けると反映されません -
2016年10月13日 3:43 PM #46092
みき
ゲストすみません
普通にリンクとして反映されました -
2016年10月13日 3:44 PM #46093
みき
ゲスト修正
※<a class="spbtn" href="URL">アンカーテキスト</a>を分けると反映されません -
2016年10月13日 3:48 PM #46094
みき
ゲストおそらくsimplicityのボタンの間隔は17pxぐらいだと思います
※だいたいですのでご自分で調整をお願いいたします
margin: 5px;
↓
margin: 17px; -
2016年10月13日 4:46 PM #46096
miya
ゲストみき様 ありがとうございます。
コピペして貼り付けましたが、ボタン同志の間隔に変化はありませんでした。
夜、もう一度じっくりと見てみます。 -
2016年10月13日 5:09 PM #46097
わいひらキーマスターテキストウィジェットの「自動的に段落追加する」がオンになっている場合はpタグが入るので、そのマージンなどを指定する必要があるかもしれません。
当サイトの場合だと、こんな感じのタグになっています。<p> <a class="simplicity-download" href="http://wp-simplicity.com/downloads/downloads2/">Simplicity2</a> </p>なので、pに対してスタイルを指定する必要があるかもしれません。
メンテナンス表示を解除してご提示した方がいいでしょうか。
見せていただけると、スタイルなどの設定状態を見ることができて、一目瞭然なので助かります。
実際のものを見ないと、思っているのと違う可能性もありますし、全て推測になってしまうので。 -
2016年10月13日 5:14 PM #46098
わいひらキーマスター当サイトの、ボタンが入っているテキストウィジェットを例にすると以下のように指定します。
#text-12 p{ /*スタイルの指定*/ }ただ、上記の12の部分は、ウィジェットによって特定のIDが入るので、自分のサイトのウィジェットIDを調べる必要があります。
-
2016年10月13日 5:20 PM #46099
みき
ゲスト>miyaさん
テキストウィジェットの自動的に段落を追加するにチェックが入っていると
間隔が変化しません
すみませんがチェックをはずして再度お試しください>わいひらさん
テキストウィジェットの自動的に段落を追加するの項目をわいひらさんの投稿を見て気が付きました
ありがとうございます!! -
2016年10月13日 8:43 PM #46148
miya
ゲストわいひら様、みき様ありがとうございます。
まだ作り始めたばかりなので恥ずかしいのですが、URLはこちらになります。
気が付いたところをコピペして変更したところもあり、それが関係しているのかもわかりませんがご確認いただければ幸いです。
超初心者で申し訳ありませんがよろしくお願いいたします。 -
2016年10月13日 8:53 PM #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>を書いてください -
2016年10月13日 8:54 PM #46150
みき
ゲストボタン同士の間隔を変更したい場合は
margin: 17px;を変更してください -
2016年10月13日 9:11 PM #46151
miya
ゲストみき様
上記をコピペし貼り付けましたが、ボタン同士の変化はありません。サイド幅を小さくしている分 width: 230px;にしていますが何か関係があるでしょうか。margin:の数値も変更しましたが変化がありません。
また、ボタンがサイドの中央でなく右に寄ってしまいました。 -
2016年10月13日 9:17 PM #46152
miya
ゲスト追記
margin:5pxだとサイドバーの中央、17だと右に寄りました。 -
2016年10月13日 9:20 PM #46153
みき
ゲスト「テキストウィジェットの自動的に段落を追加する」のチェックをはずしていますか?
-
2016年10月13日 9:21 PM #46154
みき
ゲストテキストウィジェットの自動的に段落を追加するにチェックを入れると
間隔が変わりません
ですのでチェックをはずしてください -
2016年10月13日 9:32 PM #46155
みき
ゲストサイドバーを左側に表示されているようですので
左側に表示してみました
問題はなかったのでその他を見てみます -
2016年10月13日 9:34 PM #46156
miya
ゲストみき様 度々ありがとうございます。
チェックは外れているのですが・・・・(>_<)
-
2016年10月13日 9:35 PM #46157
みき
ゲストサイドバーは何pxですか?
-
2016年10月13日 9:38 PM #46158
miya
ゲスト#sidebar {
width: 280px;CSS スタイルシートエディターに貼り付けました。
-
2016年10月13日 9:40 PM #46159
みき
ゲスト同じサイズと条件でやってみたのですが
正常に表示されました -
2016年10月13日 9:50 PM #46160
miya
ゲストなぜでしょう??? 試しにchromeブラウザで表示してみましたがボタン間の幅は変化がなくmargin:5pxと17pxでボタンがセンターと右寄りになる同じでした。
-
2016年10月13日 9:50 PM #46161
みき
ゲストわかったかもしれません
テキストウィジェットを分けていませんか?
ソースをみると
“widget widget_text”が2つあったので
おそらく原因はこれです
テキストウィジェットを1つにまとめてください
例:1つのテキストウィジェットに
<a class="spbtn" href="URL">HOME</a>と<a class="spbtn" href="URL">初めに</a>を追加してください -
2016年10月13日 9:51 PM #46162
みき
ゲスト#46091にも書かせていただいたのですが
上手く伝わっていなかったみたいで・・・
すみません -
2016年10月13日 9:58 PM #46163
miya
ゲスト出来ました!!!!!!
ありがとうございます。分けての意味が分からないと思いながら、尋ねることなく進めて行ったのがいけなかったですね(T_T)。
本当に色々とありがとうございました。
-
2016年10月13日 10:00 PM #46164
みき
ゲストお疲れさまでした!!
3つ目からも同じテキストウィジェットに追加しないと
間隔が開くので気を付けてくださいね♪
サイト作り頑張っていきましょう!! -
2016年10月13日 10:01 PM #46165
みき
ゲストわいひらさんもありがとうございました!!
-
-
投稿者投稿
- トピック「サイドバー 枠付きのアンカーテキストウィジェットの間隔」には新しい返信をつけることはできません。