SNSのボタンと「シェアする」の行間を狭くしたい

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも SNSのボタンと「シェアする」の行間を狭くしたい

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

      いつもお世話になっております。

      SNSのボタンを表示させていますが「シェアする」とボタンの行間が広すぎます。
      「SNSの設定」カスタマイズについての解説の画像と違います。

      ご教授の程、よろしくお願いいたします。

    • #56533
      jun
      ゲスト

      続けて申し訳ありません。

      http://netakiri.net/uploader/src/up0354.png

      見れますでしょうか?

    • #56534
      かうたっく
      ゲスト

      該当ページのリンクを置き忘れているようです。

      ※テーマカスタマイズに関する質問は、カスタマイズ対象ページのURLと対象部分の詳細を書き込んでください。

      /*SNSボタン下、余白の場合以下*/
      ul.snsb {
      	padding: 10px 0 0;
      }
      
      /*フォローする上・余白の場合*/
      .sns-follow-msg {
      	margin: 0;
      }
      
      /*フォローボタン上余白の場合*/
      ul.snsp {
      	margin: 0 0 15px;
      }

      上記はテーマ側で指定されたスタイルの余白をなくしたものですが、どこの指定がどうなっているかは実際のページを見ないと何とも言えません。

      スタイル変更後、反映しないときはキャッシュを削除してご確認ください。また説明をいれているので好みのスタイルになるよう試してくださいね。

      ※うまく行かなければ、該当ページのリンクがあると早い解決になりそうです。

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

      当サイトのシェアボタンのラベルはそのようになっていないため、何かしらテーマ以外に原因がありそうです。
      かうたっくさんのコードでうまくいかない場合は、実際のページのURLを提示していただければ幸いです。
      特に、テーマCSSをカスタマイズしていないのであれば、プラグインが原因の可能性が高いかもしれません。
      動作不良時のガイドライン

    • #56539
      jun
      ゲスト

      お世話になっております。

      かうたっくさん、わいひらさん、ありがとうございます。
      あまりにも無知でかうたっくさんの言われていることが理解できていません。すみません。

      https://oh-naruhodo.com/

      以下、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; 
      }

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

    • #56540
      Akira
      ゲスト

      子テーマの下記の 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;
      }
    • #56541
      かうたっく
      ゲスト

      いえそんなことないです。リンク置いて頂けたら説明は簡単です^^

      原因は、子テーマ側の以下のスタイルです。

      .article p {
      	margin: 30px 0;
      }

      以下のスタイルを子テーマCSSに追加してください。

      #sns-group p {
      	margin: 10px 0;
      }
      #sns-group .snsb {
      	padding-top: 0;
      }

      上の段落pは.article p30pxの指定があるものをSNSのところだけ10pxに変更しました。もっと狭い方が良い場合は8px・広くしたい時は15pxなどに変更してください。

      下の.snsbが付いている方『シェアする』の下、『SNSボタン』上部の余白padding-topをなくした方がバランスが良いかと思って付けました。※padding-top: 3px;などと数値を変更したら余白が広がります。

      リロードしても反映しないときはキャッシュを削除すれば反映されるので、試してくださいね。

    • #56542
      jun
      ゲスト

      お世話になっております。

      Akiraさん、かうたっくさん、早速ありがとうございました。

      子テーマに追加したとこと行間が狭まりました。
      これで十分なのですが、「シェアする」の方が「フォローする」より行間が広いです。

      こんなものなのですか?何となくバランスが・・・
      何か方法がありましたら再度ご教授お願いします。

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

    • #56543
      Akira
      ゲスト

      下記の親テーマの CSS を上書きしてしまっているためです。

      .sns-share-msg {
        margin-bottom: -20px;
      }

      私の方法ではダメなんでしょうか?

    • #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;としましたが、好きな数値を入れてベストな余白を入れてください。

    • #56545
      かうたっく
      ゲスト

      ちなみに。スタイルの指定方法がちょっとだけ違って、多分marginのアイサツてきなヤツです。

      デフォルトのままが良いのであれば、上述で追記したスタイルをなしにして

      .article p {
      	margin: 30px 0;
      }

      上記の記載を以下の記載に変更するのも良さそうです。

      .entry-content p {
      	margin: 30px 0;
      }

      スタイル変更って色んなパターンや癖があるかもしれません^^

    • #56555
      jun
      ゲスト

      お世話になっております。

      Akiraさん、かうたっくさん、ありがとうございました。

      今後ともよろしくお願いいたします。

11件の返信スレッドを表示中
  • トピック「SNSのボタンと「シェアする」の行間を狭くしたい」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)