소셜 공유 버튼의 해상도

PC로 보면, 기사밑에 설치한 소셜 공유 버튼의 화질이 별로 안좋은데 브라우저 폭을 모바일 사이즈 정도로 좁히면 다시 좋아집니다.이건 어디서 수정 가능한지요?

그리고...화면 폭이 좁아지면 소셜 공유 버튼영역이 2줄로 되는데, 이것을 같은줄 안에서 크기만 작아지게 할 수는 없는지요?

(반은형 사이트처럼)

https://fxant.net/test%EF%BC%91test%EF%BC%91test%EF%BC%91test%EF%BC%91test%EF%BC%91test%EF%BC%91test%EF%BC%91test%EF%BC%91test%EF%BC%91test%EF%BC%91test%EF%BC%91-357.html

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
  • 안녕하세요~^^

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

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

    모바일에서는 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에서는 반대로 브라우저 폭을 줄여도 또는 넓혀도 낮은 해상도로만 표시됩니다.ㅜㅜ

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

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기