티스토리 반응형#2 초간단! 댓글 방명록 프로필사진 달기

프로필사진을 달아보려고 치환자를 붙였다 떼었다... 아무리해도 안되고...여기 저기 다른 블로거들이 변경했다는 글보며 따라하려니 맘에 드는 방법들을 못찾겠더군요. 그래서 직접 눈빠지게 CSS를 보며 머릴 굴려봤습니다.

 

 

 

 

티스토리 반응형#2 초간단! 댓글 방명록 프로필사진 달기

 

 

이것저것 CSS의 스타일을 잔뜩 바꿀 필요도 없습니다.

방법을 간단히 요약하자면

 

1.댓글

2.댓글의 댓글

3.방명록댓글

4.방명록댓글의 댓글

이렇게 총4군데에 있는 쓸데 없는 HTML소스 부분를 사용하지 않도록 합니다.

 

그런 후,

CSS의 한부분을 변경합니다.

 

자 그럼 한번 따라해보세요~

그림의 나타난 줄 수를 보시고 근처에서 동일한 부분을 참고하시면 됩니다.

아래 그림을 참고해서 필요없는  HTML을 감춰주세요. <!-, --> 앞뒤로 붙이면 됩니다.

 

 

 

 

 

위 그림 : 댓글달기 부분

 

 

 

 

위 그림 : 댓글의 댓글달기 부분

 

 

 

 

위 그림 : 방명록 댓글달기 부분

 

 

 

 

 

위 그림 : 방명록 댓글의 댓글달기 부분

이렇게 사용되지 않는 부분의 앞 뒤에 <!--, -->를 붙여주시면 됩니다.

 

 

 

그럼 이제 CSS를 손봐줘야 합니다.

위 그림의 위치정도에 가보시면 프로필 사진과 닉네임의 스타일을 지정하는 부분이 있습니다.

여기에다가 아래 소스로 바꿔치기/추가해주세요.

 

.area_reply .tit_nickname{float:left;overflow:hidden;max-width:250px; height:55px;margin-right:10px;color:#222;white-space:nowrap;text-overflow:ellipsis;font-size:16px;background:url(images/ico_skin.png) no-repeat;background-position:-140px -20px; padding-left:55px;}

.area_reply .tit_nickname a:hover{text-decoration:none}

.area_reply .tit_nickname img{border-radius:50px; width:50px; height:50px; float:left; margin-left:-55px;background-color:#fff}

 

간단히 설명을 드리자면,

.tit_nickname은 관리자 설정화면에서 메뉴>기본정보>아이콘(프로필사진이 아님)사진과 필명수식어가 뜨는 부분입니다.

이 곳의 영역의 바탕에 티스토리 반응형 #2의 스킨이미지(사진없을때뜨는이미지) 파일을 깔아주고 그 위에 겹쳐서 아이콘을 덮는 겁니다.

간격이나 크기는 티스토리 스킨이미지를 고려해서 적당히 제가 임의로 정하긴한건데, 혹 맘에 안드시면 변경하셔도 됩니다.

 

 

 

이미지가 많아서 글이 길어진 것 뿐!

사실 해보시면 쉽습니다.~

 

급하게 변경하고 글쓰며 혹 제가 빠뜨린 부분이 있을지도 모르겠네요.

이상한 부분이 발견되면 언제든지 제보해주세요~ 저도 전문가가 아닌지라....

더 좋은 방법들 있다면 공유도 부탁드립니다.^^

 

 

 

무지 공감하신다면 공감버튼 꾸욱~!!!!