소셜 공유 버튼을 CSS를 사용하여 인라인 블록으로 표시하는 방법은 무엇입니까?

나는 내가 선호하는 인라인 블록 형식으로 현재 표시된 소셜 공유 버튼 (Facebook, Twitter, LinkedIn)이 있습니다. 그러나 모든 게시물에 대해 각각의 개별 단추에 YUI를 사용하는 방식은 실제로 CSS가 부풀려졌습니다. 나는 단순히 CSS 클래스 선택자를 사용하여이를 최적화하고 싶습니다. 현재 스타일링 프로세스는 매우 지루합니다.소셜 공유 버튼을 CSS를 사용하여 인라인 블록으로 표시하는 방법은 무엇입니까?

각 플랫폼의 개발자 웹 사이트에서 제공하는 코드 인 HTML/JS 버튼을 사용하고 있습니다. 그러나 새로운 코드를 효과적으로 만들 수있는 선택기의 올바른 조합을 찾을 수 없었습니다. 그렇게하는 것에 도움이된다면 도움이 될 것입니다.

내 사이트는 다음과 같습니다 www.tylercharboneauprofessional.com

버튼 코드 :

<div class="fb-share-button" data-href="https://www.tylercharboneauprofessional.com/international-pulse/opinion-we-must-win-the-battle-against-climate-change" data-layout="button" data-mobile-iframe="false"> 
    <a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.tylercharboneauprofessional.com%2Finternational-pulse%2Fopinion-we-must-win-the-battle-against-climate-change&amp;src=sdkpreparse">Share</a> 
</div> 

<a href="https://twitter.com/share" class="twitter-share-button" data-show-count="false">Tweet</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 

<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>

각각 다음과 같이

현재 버튼 그룹 (FB, 트위터, 링크드 인은) 스타일된다 :

padding-top: 0, padding-bottom: 0/
padding-top: 12px, padding-bottom: 5px/
padding-top: 0, padding-bottom: 5px

감사합니다.

타일러

출처

2017-04-20 TCharb

귀하의 코드를 포함 시키십시오. 귀하의 답변에 [MCVE] –

아주 기본적인 예입니다. 사회 아이템을 그룹화 한 다음 그룹의 항목에 필요한 스타일을 적용합니다. 이런 식으로 다른 일반적인 스타일을 적용 할 수 있습니다.

/*Common Styling*/ 
 
.social-group>.social-item { 
 
    display: inline-block; 
 
} 
 

 
/*Facebook specific*/ 
 
.social-group>.social-item.facebook { 
 
    padding-top: 0, padding-bottom: 0 
 
} 
 

 
/*Twitter Specific*/ 
 
.social-group>.social-item.twitter { 
 
    padding-top: 12px, padding-bottom: 5px 
 
}

<div class="social-group"> 
 
    <div class="fb-share-button social-item facebook" data-href="https://www.tylercharboneauprofessional.com/international-pulse/opinion-we-must-win-the-battle-against-climate-change" data-layout="button" data-mobile-iframe="false"> 
 
    <a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.tylercharboneauprofessional.com%2Finternational-pulse%2Fopinion-we-must-win-the-battle-against-climate-change&amp;src=sdkpreparse">Share</a> 
 
    </div> 
 

 
    <a href="https://twitter.com/share" class="twitter-share-button social-item twitter" data-show-count="false">Tweet</a> 
 
</div> 
 

 

 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 
 
<script src="//platform.linkedin.com/in.js" type="text/javascript"> 
 
    lang: en_US 
 
</script>

당신은 당신이 일반적인 스타일을 제공하기 위해 선택 목록을 사용할 수있는 HTML을 수정에 대한 액세스를 제한합니다. 이 경우 HTML 그룹은 필요하지 않습니다. 이 - 공유 버튼를 포함하는 클래스 아무것도을 선택합니다

[class*='-share-button'] { 
    display:inline-block; 
}

.fb-share-button, .twitter-share-button { 
    display:inline-block; 
}

또는 모든 미디어 항목이 클래스는 something-share-button 같은 구조 한 경우 속성 선택기를 사용할 수

. 이 접근법은 아마도 너무 연약합니다.

출처

2017-04-20 03:54:31

을 (를) 적어주십시오. 제 경우에는 Squarespace 사이트의 범위 내에서 작업하고 있다는 점은 주목할 가치가 있습니다. 내 단추 코드는 개별 코드 블록 내에 있습니다. 3 개의 다른 공유 버튼이 있기 때문에 각 블로그 게시물 다음에 3 개의 코드 블록이 있습니다. 불행히도, 나는 처음부터 조립 한 자유형 HTML 문서로 작업 할 사치품이 없습니다. 설명을 위해 요소를 그룹화하지 않으면 렌더링 할 수 없습니까? – TCharb

요소에 클래스를 추가하고 변경할 수 있습니까? –

나는이 분야에서 많은 경험을 쌓지 못했다. 일반적으로 전통적인 CSS 규칙은 내 사이트 내에서 적용하려는 모든 곳에 적용됩니다. 그러나 템플릿을 수정하기 위해 Squarespace의 핵심 HTML 구조에 액세스 할 수 없다는 점을 명심해야합니다 ("개발자 모드"의 잠금을 해제하지 않는 한, 이는 전문성 범위를 벗어납니다). 내비게이션 요소 등에 의사 클래스를 추가하는 것 외에는 일반적으로 사파리 개발 도구를 사용하여 요소 클래스가있는 것처럼 "사냥"한 다음 속성을 변경합니다. – TCharb

소셜 공유 버튼을 CSS를 사용하여 인라인 블록으로 표시하는 방법은 무엇입니까?

답변

관련 문제