안녕하세요~^^

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

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

모바일에서는 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% 부분은 적절히 수정해주시면 됩니다.

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

고맙습니다.

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

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

안녕하세요.

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

.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로 적용하시면 가로세로 비율이 유지됩니다.

고맙습니다.

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

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

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

안녕하세요~^^

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

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

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

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

고맙습니다.

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

네, 맞습니다.

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

/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>

고맙습니다.

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

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