記事下のSNSボタンの位置変更について

PR 2015/3/22

このトピックには5件の返信、2人の参加者があり、最後に蟹爪フライにより11年、 4ヶ月前に更新されました。

5件の返信スレッドを表示中

投稿者

投稿
- 2015年3月20日 10:39 PM #24154
  
  蟹爪フライ
  ゲスト
  
  こんにちは。とても役に立つテーマとフォーラム運営に感謝します。
  SNSボタンの位置変更について質問があります。
  PCではテーマカラータイプ、モバイルではデフォルトを使っています。
  右寄せにしたい場合、cssのどこが該当しますか。
  検索してもわからなかったので教えていただけると幸いです。
  よろしくお願いします。
- 2015年3月21日 10:51 AM #24189
  
  hidekichi
  ゲスト
  
  公開されているサイトのアドレスと、どの部分のSNSボタンかを教えていただけると説明しやすいです。
- 2015年3月21日 3:23 PM #24201
  わいひら
  キーマスター
  僕も以下のことを確認させてください。
  
  僕のサイトの以下のページなら、添付画像のボタンなのかなと思いますが、どの部分のSNSボタンなのでしょうか？
  http://nelog.jp/flexible-box-layout-module
  シェアボタン、フォローボタン全てでしょうか。
  Attachments:
  2015-03-21_15h20_28.png
- 2015年3月21日 4:08 PM #24204
  
  蟹爪フライ
  ゲスト
  
  さっそくのお返事ありがとうございます。
  まさにご提示いただいた画像のとおりの部分です。
  シェアボタン、フォローボタンです。
  一列に並んでいるこれらをまとめて右寄せにしたいのですが
  該当部分がわからず質問させていただきました。
  よろしくお願いいたします。
- 2015年3月21日 9:38 PM #24236
  わいひら
  キーマスター
  以下のように書けば良いかと思います。
```
.sns-group-bottom {
    float: right;
    text-align: right;
}
```
  floatによって回り込みをするので、下に続く要素が回り込むかもしれません。
  そういった場合は、.sns-group-bottomの次に来る要素で、clear: both;もする必要があります。
- 2015年3月21日 11:59 PM #24240
  
  蟹爪フライ
  ゲスト
  
  お返事ありがとうございました。解決いたしました。
  
  個人的な経緯になりますが・・・
  entry-bodyを見て「sns～」のような名前の要素をかたっぱしから試していたのですが
  同じような名前が複数ありよくわかりませんでした。
  またfloatはまわりこみの解除がこわくて
  勝手にpadding-right:0pxでためしていたのですが
  それで反映されなかったのではとも思います。
  
  教えていただいた方法で無事、右寄せにすることができました。
  またその下の要素がfooter-post-metaで
  あらかじめ親要素でclear:both;されていたので
  何もせずともきれいに表示されていました。
  ご親切なご対応に感謝いたします。
  
  別にお聞きしたいことがあるので、別トピックにて質問させていただきます。
  よろしくお願いします。
投稿者

投稿