Simplicityの特徴 › フォーラム › Simplicity2に関する話題何でも › SNSのボタンと「シェアする」の行間を狭くしたい
- このトピックには11件の返信、2人の参加者があり、最後にjunにより6年、 5ヶ月前に更新されました。
-
投稿者投稿
-
-
2017年10月22日 8:09 PM #56532
-
2017年10月22日 8:11 PM #56533junゲスト
-
2017年10月23日 7:43 AM #56534かうたっくゲスト
該当ページのリンクを置き忘れているようです。
※テーマカスタマイズに関する質問は、カスタマイズ対象ページのURLと対象部分の詳細を書き込んでください。
/*SNSボタン下、余白の場合以下*/ ul.snsb { padding: 10px 0 0; } /*フォローする上・余白の場合*/ .sns-follow-msg { margin: 0; } /*フォローボタン上余白の場合*/ ul.snsp { margin: 0 0 15px; }
上記はテーマ側で指定されたスタイルの余白をなくしたものですが、どこの指定がどうなっているかは実際のページを見ないと何とも言えません。
スタイル変更後、反映しないときはキャッシュを削除してご確認ください。また説明をいれているので好みのスタイルになるよう試してくださいね。
※うまく行かなければ、該当ページのリンクがあると早い解決になりそうです。
-
2017年10月23日 6:59 PM #56537わいひらキーマスター
当サイトのシェアボタンのラベルはそのようになっていないため、何かしらテーマ以外に原因がありそうです。
かうたっくさんのコードでうまくいかない場合は、実際のページのURLを提示していただければ幸いです。
特に、テーマCSSをカスタマイズしていないのであれば、プラグインが原因の可能性が高いかもしれません。
動作不良時のガイドライン -
2017年10月23日 8:42 PM #56539junゲスト
お世話になっております。
かうたっくさん、わいひらさん、ありがとうございます。
あまりにも無知でかうたっくさんの言われていることが理解できていません。すみません。以下、Simplicity2 child: スタイルシート (style.css)に書き込んだものです。
@charset "UTF-8"; /*! Theme Name: Simplicity2 child Template: simplicity2 Version: 20161002 */ /* Simplicity子テーマ用のスタイルを書く */ .article h2 { padding: .25em 0 .5em .75em; border-left: 6px solid #ff89ff; border-bottom: 1px solid #ff89ff; } .article h3{ padding-bottom: .5em; border-bottom: 3px double #ff89ff; } /* フォント */ body{ color:#5c5c5c !important; }/* フォントを灰色にする */ /* 記事の行間を修正 */ .article { line-height: 170%; } .article p { margin: 30px 0; } /* エントリーカードの間に点線 */ #main .entry { border-bottom: 1px dotted #333333; padding-bottom: 15px; } /* 関連記事間に線を引く */ #main .related-entry { border-bottom: 1px dotted #333333; padding-bottom: 10px; }
よろしくお願いいたします。
-
2017年10月23日 9:15 PM #56540Akiraゲスト
子テーマの下記の CSS が原因です。
.article p { margin: 30px 0; }
article p は上記の margin を維持しつつ、「シェアする」と「フォローする」の margin をデフォルトの値にするために、上記のCSS を下記の CSS に書き換えます。
.article p:not(.sns-share-msg):not(.sns-follow-msg) { margin: 30px 0; }
-
2017年10月23日 9:28 PM #56541かうたっくゲスト
いえそんなことないです。リンク置いて頂けたら説明は簡単です^^
原因は、子テーマ側の以下のスタイルです。
.article p { margin: 30px 0; }
以下のスタイルを子テーマCSSに追加してください。
#sns-group p { margin: 10px 0; } #sns-group .snsb { padding-top: 0; }
上の段落pは
.article p
で30px
の指定があるものをSNSのところだけ10px
に変更しました。もっと狭い方が良い場合は8px
・広くしたい時は15px
などに変更してください。下の.snsbが付いている方『シェアする』の下、『SNSボタン』上部の余白
padding-top
をなくした方がバランスが良いかと思って付けました。※padding-top: 3px;
などと数値を変更したら余白が広がります。リロードしても反映しないときはキャッシュを削除すれば反映されるので、試してくださいね。
-
2017年10月23日 10:26 PM #56542junゲスト
お世話になっております。
Akiraさん、かうたっくさん、早速ありがとうございました。
子テーマに追加したとこと行間が狭まりました。
これで十分なのですが、「シェアする」の方が「フォローする」より行間が広いです。こんなものなのですか?何となくバランスが・・・
何か方法がありましたら再度ご教授お願いします。よろしくお願いいたします。
-
2017年10月23日 10:53 PM #56543Akiraゲスト
下記の親テーマの CSS を上書きしてしまっているためです。
.sns-share-msg { margin-bottom: -20px; }
私の方法ではダメなんでしょうか?
-
2017年10月23日 11:46 PM #56544かうたっくゲスト
「シェアする」の方が「フォローする」より行間が広いです。
以下の場所ですかね?具体的によくわかりません。。以下の場所として。
http://netakiri.net/uploader/src/up0355.pngこのくらいにしてみました。次のCSSでは画像の通りです。
http://netakiri.net/uploader/src/up0356.png#sns-group .snsb { padding-top: 0; margin-top: 10px; }
上記のコードは『シェアする』下に並ぶSNSシェアボタンの上余白調整です。
margin-top: 10px;
としましたが、好きな数値を入れてベストな余白を入れてください。 -
2017年10月23日 11:58 PM #56545かうたっくゲスト
ちなみに。スタイルの指定方法がちょっとだけ違って、多分marginのアイサツてきなヤツです。
デフォルトのままが良いのであれば、上述で追記したスタイルをなしにして
.article p { margin: 30px 0; }
上記の記載を以下の記載に変更するのも良さそうです。
.entry-content p { margin: 30px 0; }
スタイル変更って色んなパターンや癖があるかもしれません^^
-
2017年10月24日 9:00 PM #56555junゲスト
お世話になっております。
Akiraさん、かうたっくさん、ありがとうございました。
今後ともよろしくお願いいたします。
-
-
投稿者投稿
- トピック「SNSのボタンと「シェアする」の行間を狭くしたい」には新しい返信をつけることはできません。