안녕하세요~^^

소셜 공유 버튼 플러그인에서 이미지는 화면에 크기에 따라

다른 해상도의 이미지로 표시됩니다.

모바일에서는 PC 화면보다 높은 해상도의 이미지를 사용해야 깨끗하게 표시됩니다.

화면 너비가 아닌 해상도의 크기에 따라 이미지 해상도를 다르게 표시하시려면

FTP로 접속해서 /wp-content/plugins/cosmosfarm-share-buttons/layout/default/layout.php 파일의 코드를

아래의 코드로 교체해보시겠어요?

<?php if(!defined('ABSPATH')) exit;?>
<div class="cosmosfarm-share-buttons cosmosfarm-share-buttons-default cosmosfarm-align-<?php echo $align?>">
	<span class="cosmosfarm-share-button-title">
		<img src="<?php echo $skin_path?>/images/icon-share.png" srcset="<?php echo $skin_path?>/images/icon-share-32.png 2x, <?php echo $skin_path?>/images/icon-share-64.png 3x" title="<?php echo __('Share', 'cosmosfarm-share-buttons')?>">
	</span>
	<?php foreach($option->active as $key=>$value):?>
	<button class="cosmosfarm-share-button cosmosfarm-<?php echo $value?>" onclick="return cosmosfarm_share('<?php echo $value?>', '<?php echo addslashes($url)?>', '<?php echo addslashes($title)?>');">
		<img src="<?php echo $skin_path?>/images/icon-<?php echo $value?>.png" srcset="<?php echo $skin_path?>/images/icon-<?php echo $value?>-32.png 2x, <?php echo $skin_path?>/images/icon-<?php echo $value?>-64.png 3x" title="<?php echo $option->sns[$value]?>">
	</button>
	<?php endforeach?>
</div>

소셜 공유 버튼을 화면 크기가 줄어도 한 줄에 표시하시려면

워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

아래의 코드를 추가해보시겠어요?

.cosmosfarm-share-buttons-default .cosmosfarm-share-button-title,
.cosmosfarm-share-buttons-default .cosmosfarm-share-button { width: 7%; }
.cosmosfarm-share-buttons-default img { width: 100% !important; }

위의 코드에서 7% 부분은 적절히 수정해주시면 됩니다.

버튼의 너비를 퍼센트(%)로 줄 경우 이미지가 깨져 보일 수도 있습니다.

고맙습니다.

네, 맞습니다.

이전 코드에 착오가 있었습니다.

/wp-content/plugins/cosmosfarm-share-buttons/layout/default/layout.php 파일의 코드를

아래의 코드로 적용해보시겠어요?

<?php if(!defined('ABSPATH')) exit;?>
<div class="cosmosfarm-share-buttons cosmosfarm-share-buttons-default cosmosfarm-align-<?php echo $align?>">
	<span class="cosmosfarm-share-button-title">
		<img src="<?php echo $skin_path?>/images/icon-share-32.png" srcset="<?php echo $skin_path?>/images/icon-share.png 2x" title="<?php echo __('Share', 'cosmosfarm-share-buttons')?>">
	</span>
	<?php foreach($option->active as $key=>$value):?>
	<button class="cosmosfarm-share-button cosmosfarm-<?php echo $value?>" onclick="return cosmosfarm_share('<?php echo $value?>', '<?php echo addslashes($url)?>', '<?php echo addslashes($title)?>');">
		<img src="<?php echo $skin_path?>/images/icon-<?php echo $value?>-32.png" srcset="<?php echo $skin_path?>/images/icon-<?php echo $value?>.png 2x" title="<?php echo $option->sns[$value]?>">
	</button>
	<?php endforeach?>
</div>

고맙습니다.

소셜 공유 버튼 플러그인은 버전1.6인데, 이게 최신 아닌가요?  최근 업데이트는 2달전이라고 나오는데,,,,

안녕하세요~^^

현재 사용 중이신 소셜 공유 버튼 플러그인의 버전이 어떻게 되시는지요?

최신 버전이 아니라면 최신 버전으로 업데이트해보시겠어요?

최신 버전에는 모바일에서 선명하게 표시하기 위해 기본 이미지보다 큰 이미지도 추가해두었습니다.

이전 댓글에서 안내해드린 코드가 정상적으로 작동하려면 최신 버전으로 업데이트해주셔야 합니다.

고맙습니다.

그런데, 자세히 보니...이번에는 반대로 모바일로 보면 해상도가 떨어져서 표시되네요.ㅜㅜ

해결책 부탁드립니다.
https://fxant.net/kakao-373.html

제가 바라던게 바로 이거였습니다. 이런 중요한 건 초기설정으로 셋팅해 놓으시는게 좋을것 같습니다.
감사합니다!!

안녕하세요.

기존의 코드 대신 아래의 코드로 적용해보시겠어요?

.cosmosfarm-share-buttons-default .cosmosfarm-share-button-title,
.cosmosfarm-share-buttons-default .cosmosfarm-share-button { width: 7%; max-width: 32px; }
.cosmosfarm-share-buttons-default img { width: 100% !important; height: auto !important; }

max-width 속성을 주면 최대 너비를 설정할 수 있고

height를 auto로 적용하시면 가로세로 비율이 유지됩니다.

고맙습니다.

해상도 문제는 해결됬습니다만,,,한줄에 표시될 때는 가로세로 비율이 유지가 않되어 홀쭉한 아이콘이 되버린네요(~_~;)

혹시 이것도 방법이 있나요?
(참고로 위코드의 7%라는 수치는 줄여서도 늘려서도 안되는 수치더군요.)

그런데,,,다시한번 확인해 보니 모바일에서만 해결되었고, PC에서는 반대로 브라우저 폭을 줄여도 또는 넓혀도 낮은 해상도로만 표시됩니다.ㅜㅜ

다시한번 코드확인 부탁드립니다.