본문으로 바로가기

안녕하세요. 오늘은 티스토리 공식 반응형 웹스킨#2 아이콘 플러그인 중복 문제를 수정해보겠습니다.


플러그인 까지 생각을 안했거나, 깜빡하고 지나간 것 같아보이네요.

댓글 및 방명록 사람아이콘이 있지만. ㅠ_ㅠ 기존의 플러그인과 같이 사용하면 중복으로 뜨게됩니다.


우선, 티스토리는 플러그인을 통해 아이콘을 사용 할 수 있습니다.


[환경설정] - [기본정보] 에서 아이콘을 설정하고


[플러그인 설정] 에 들어가서 아이콘 사용 설정을 해주면 됩니다.

[64x64px 사용을 권장합니다.]

그런데 확인을 해보니 ㅡㅡ;;;;;;

아이콘이 중복해서 나타나는 문제가 발생하네요...;;;;


이것을 깔끔하게 고쳐보겠습니다. [HTML/CSS] 편집에 들어가 줍니다.

스킨 수정전에는 꼭 스킨 저장을 하시고 문제가 발생시 불러오면 됩니다. 코드의 쉼표 구분 반드시 신경 써서 해주세요.

동일한 클래스명이 여러개 존재합니다. 반드시 정확하게 잘보고 수정 및 코드 확인을 꼼꼼히 해주시고 쉼표 반드시 확인잘하세요

첫 번째

.list_reply .thumb_profile{float:left;width:48px;height:48px;margin-right:20px;border-radius:48px;background-position:-140px -20px;margin-top:2px}


CSS편집에서 이 부분을 찾습니다.Ctrl + F 를 하시며 됩니다. 다만 주의하실 점은 다음 찾기는 Ctrl + G 입니다.

코드 수정창에서는 엔터키 반복해서 누르지마세요.


아니면 CSS 편집 253번째 줄에 위치해 있습니다.


아래와 같이 고쳐주세요.

.list_reply .thumb_profile{float:left;width:48px;height:48px;margin-right:20px;border-radius:48px;background-position:-140px -20px;position:absolute;z-index:-1;}


중요한 점은 margin-top:2px 삭제를 하고 이 부분을 추가해 주는 겁니다.position:absolute;z-index:-1;


두 번째


.area_reply .tit_nickname을 찾아줍니다. 여러 개가 있습니다.꼭 260줄에 위치해있습니다.

맨 끝에 ;marging-left:68px;을 추가해줍니다.

.area_reply .tit_nickname{float:left;overflow:hidden;max-width:200px;margin-right:10px;color:#222;white-space:nowrap;text-overflow:ellipsis;font-size:16px;margin-left:68px;}



세 번째 - 새롭게 추가

바로 그 밑에 아래 코드를 추가 해줍니다.


.area_reply .tit_nickname img{width:48px!important;height:48px!important;border-radius:50%;position:absolute;margin-left: -68px;}

.hiddenComment .txt_date{margin-left: 68px}


이번엔 새롭게 코드를 적어 넣으셔야 합니다. 위코드 전체를 붙여넣기 해주세요.


네 번째

그리고 마지막으로

.area_reply .txt_reply{display:block;padding-top:4px;font-size:13px;line-height:21px;color:#5c5c5c;clear:both}

이 부분을 찾아서


.area_reply .txt_reply{display:block;padding-top:4px;font-size:13px;line-height:21px;color:#5c5c5c;clear:both;margin-left: 68px;}

완성 된 예시!!



이게 끝일 줄 알았는데 ㅡ_ㅡ


모바일 화면에서 또 깨지네요.. 반응형 웹 ㅡ_ㅡ 아나... 몽디 어디나뒀더라;;;

하....


모바일 대응 작업을 해줍니다. 이작업도 ㅡ_ㅡ 반드시 해야합니다.

지금 수정하는 영역은 전부 @media only screen and (max-width: 738px) 로 감싸져 있기 때문에

738px이하의 해상도에서만 작동하게 되는 것입니다.

첫 번째

.list_reply .thumb_profile{width:33px;height:33px;margin-right:11px;margin-top:2px;background-position:-120px -20px}

.area_reply .reply_content { font-family:applesdgothicneo-light; margin-top:4px }


약 401~2 번 째줄 전후로 있을 겁니다.

붉은 색 부분을 삭제해서 아래와 같이 만들어 줍니다.

.area_reply .reply_content { font-family:applesdgothicneo-light; }

.list_reply .thumb_profile{width:33px;height:33px;margin-right:11px;background-position:-120px -20px}

두 번째

.area_reply .tit_nickname {max-width:120px;margin-right:5px;font-size:14px} 이부분을 찾아줍니다.



.area_reply .tit_nickname {max-width:120px;margin-right:5px;font-size:14px;margin-left: 44px;}


이런식으로 수정을 해줍니다. 보라색을 추가해주면 됩니다.

세 번째 - 새롭게 추가

위 수정한 코드 바로 밑에 아래 코드를 새롭게 추가해 줍니다. 아래 코드 전체를 붙여넣기


.area_reply .tit_nickname img{width: 33px!important;height: 33px!important;margin-left:-44px;}

.hiddenComment .txt_date{margin-left: 44px}

네 번째

.area_reply .txt_reply {line-height:19px;padding-top:2px;margin-left: 44px;}

이부분을 찾아서 보라색을 부분 처럼 추가 해주면 됩니다.




자 이러면 모바일도 깔끔하게 정리가 끝났습니다.



다들 그럼 아이콘 플러그인을 예쁘게 사용해보세요!!!!!

신고

댓글을 달아 주세요

  1. BlogIcon SONYLOVE 2016.03.31 01:32 신고

    이제 다른 스킨까지 섭렵하시려고요.. ㅎㅎ

    • BlogIcon COCOSOFT COCO Media 2016.03.31 01:56 신고

      아니에요 ㅠ_ㅠ ㅎㅎ 이스킨 사용하시는 분들 보니 전부 아이콘 두 개 사용하거나 똑같은 아이콘만 사용하길래 봤더니 ㅎㅎ 코드 수정이 필요해서 봤어요 ㅎㅎ 공식스킨 꾸미기 강의도 이참에 해볼까요?+_+ㅋㅋ

      나중에 시간좀 여유로울때 나만의 스킨 제작 하나 하고싶어서 여러개 보고 배우고있는데 공식스킨이 구조가 가장 깔끔하네요. ㅎㅎ 언제가 될진 모르겠지만 ㅠ_ㅠ 하나 만들어보려구요 ㅎㅎ 아마 여름이나 올해 겨울에+_+?ㅎㅎ도전을 해봐야겟어요. ㅎㅎ 좋은밤되세요

  2. BlogIcon 첼시♬ 2016.03.31 17:53 신고

    와... 대박....... 와........ 물개 박수 짝짝짝 ㅋㅋㅋ
    코코님 덕분에 수정했어요. 성가시고 신경쓰였는데 방법을 몰라서 못 하고 있었는데!!!
    싹 정리하니까 상쾌합니다. ㅋㅋ 정말 감사해요! :D

    아참, 코코님 글에서 PC화면 코드 수정 세번째에 새롭게 적어넣는 코드 맨 끝에 중괄호 }가 빠져있어요..^^;

  3. BlogIcon Lady Expat 2016.04.01 00:56 신고

    감사합니다. 덕분에 제 블로그가 깔끔해졌네요. :)

    • BlogIcon COCOSOFT COCO Media 2016.04.01 01:11 신고

      Lady Expat님 비밀댓글에 마진 오류가 있어서 코드가 추가 되었습니다!! ㅠ_ㅠ 코드 두개를 다시 추가해주시면됩니다!!
      .hiddenComment .txt_date{margin-left: 68px} 이건 PC용

      .hiddenComment .txt_date{margin-left: 44px} 이건 모바일용

      각각 .area_reply .tit_nickname img 밑에 새롭게 추가하시면 될거에요 ㅠ_ㅠ 포스팅에는 코드를 수정해놓았고 PC와 모바일 세 번째 부분을 참고하시고 수정해주시면 됩니다!!+_+

    • BlogIcon Lady Expat 2016.04.01 01:16 신고

      어머,그래요? 한국은 지금 아주 늦은 시간일텐데... 도와주셔서 정말 감사드립니다. 지금 Mac에 로그인 다시 해서 수정할까요. ^^

    • BlogIcon COCOSOFT COCO Media 2016.04.01 01:24 신고

      오오! 영국에 계시나보네요!! 영어 콘텐츠가 정말 많아서 자주 들려서 배워야겠어요!! 코드가 많아서 복잡하셨을텐데 잘수정해주셨네요!! 저 코드만 추가하면 남들이 비밀댓글 표시를 볼 때 겹치는 것도 수정 될 거에요!! 완전 깔끔+_+!! 혹시나 오류사항이 발생한다면 언제든지 연락주세요

    • BlogIcon Lady Expat 2016.04.01 01:38 신고

      예, 어쩌다보니 이곳에 살고 있네요…ㅎ


      알려주신대로 지금 막 수정했는데, 오류가 없는 것 같아요. 과정을 너무나 자세하게 설명해 주셔서 수정하는데 별 문제 없었습니다. 한국에서는 굉장히 늦은 시간인데도 이렇게 신속하게 답장 해주시고 도와 주신것 다시 한번 감사드립니다. 이 스킨을 사용하시는 분들께 많은 도움이 되리라고 생각합니다.

      좋은 꿈 꾸세요. :)

  4. BlogIcon 사진찍는삼촌 2016.04.01 23:17 신고

    이글을 먼저 봤다면 저도 이렇게 했을텐데 말입니다.
    전 그냥 예전 방식으로 수정했는데 이글보니....대충 알아서 수정한게 후회가 되네요...ㅎㅎㅎ;;

    • BlogIcon COCOSOFT COCO Media 2016.04.06 23:36 신고

      그래도 혼자서 html편집을 다루실수있으시면 +_+ 앞으로 꾸미기하실 땜 매우 쉽게 적용이 가능할거에요!! ㅎㅎ 하나씩 변경해보시는 것도 좋은 것 같습니다!

  5. BlogIcon 펀스 2016.05.17 18:18 신고

    저도 대강 제가 아는 방식으로 수정하다보니, 아이콘은 어찌어찌 나왔지만 정렬이 안맞아서 항상 불만족이었는데!!
    코코님 덕분에 해결했어요!! 너무너무 좋습니다 ㅎㅎㅎ 마음만 같아서는 하트 백만개 콕콕 눌러드리고 싶네요 ㅎㅎㅎ

    • BlogIcon COCOSOFT COCO Media 2016.05.17 19:04 신고

      넵+_+ 도움이 되었다니 저야말로 너무 기쁩니다!!
      댓글로 응원해주셔서 감사합니다!! 공식반응형웹 더좋은 팁도 많이 연구해봐야겠네요 ㅎㅎ

티스토리 툴바