안녕하세요. 오늘은 티스토리 공식 반응형 웹스킨#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;}
이부분을 찾아서 보라색을 부분 처럼 추가 해주면 됩니다.
자 이러면 모바일도 깔끔하게 정리가 끝났습니다.
다들 그럼 아이콘 플러그인을 예쁘게 사용해보세요!!!!!
