본문 바로가기
블로그 BOX/블로그 팁

티스토리 더보기 색상, 아이콘 변경 방법!

by 쿨펀치 2011. 12. 28.
반응형


티스토리 더보기 색상, 아이콘 변경 방법!

티스토리 블로그를 운영 하면서 모르고 있던 기능을 새로이 알아 가는 맛이 있는 거 같습니다.
저번 포스팅에서 티스토리 블로그 기본 기능인 '더보기 / 접기' 에 대해서 알아봤습니다. 

티스토리 더보기, 접기 기능  이해와 활용 TIP - 구경가기
포토샵 강좌/포토샵 표준 RGB 색상표 1 - 구경가기
포토샵 강좌/포토샵 표준 RGB 색상표 2 - 구경가기
한국 전통색 표준 색상표 - 구경가기
이번 시간에는 '더보기 / 접기' 기능을 좀 더 꾸며보고자 합니다.
'더보기 / 접기' 글의 색상과 아이콘 변경 방법에 대해 알아보겠습니다. 

'더보기 / 접기'
1. 색상 변경 방법.
2. 아이콘 변경 방법.


 


 

 더보기 / 접기 색상 변경 방법.

처음 '더보기 / 접기' 적용 하면 클릭 부분의 색상이 포스트 글 색상과 같아 눈에 띄지 않습니다.  방문자로 하여금 글이 더 있다는 것을 강조하기 위해 본문의 글 색상과 차별을 줘야 합니다.

1. 색상 변경 방법.

티스토리 관리자 모드에 접속해 주세요.

HTML/CSS 편집 클릭.

   
검색 Ctrl + F 하셔서 

moreless       <=== 요 항목을 검색해 주세요.


style.css 에서 소스 수정이 이루어집니다.


붉은 박스 안에 내용이 '더보기 / 접기' 변경전 부분입니다.
color부분의 색상을 원하는 코드를 입력 해주세면 됩니다. 
쿨펀치의 경의 #ff3366 의 색상 코드를 사용 했습니다. 

#ff3366   -->  #ff3366




붉은 박스 안에 색상을 변경후 적용 사래


   
style.css  에서

/* 본문 - more / less */
 .moreless_fold        <== 더보기 메뉴 (펼치기전)  
{ background:url(images/iconMore.gif) top left no-repeat;  padding-left:20px; color:#ff3366; font-weight:bold;}
 .moreless_top         <==  접기 메뉴 (펼쳐졌을 때 상단)   
{ background:url(images/iconLess.gif) top left no-repeat;  padding-left:20px; color:#ff3366; font-weight:bold;}
 .moreless_body          { }
 .moreless_bottom    <== 접기 메뉴 (펼쳐졌을 때 하단)    
{ background:url(images/iconLess.gif) top right no-repeat;  padding-right:20px; color:#ff3366; font-weight:bold; text-align:right;}


이곳에서 컬러, 폰트 두께, '더보기 / 닫기' 제목 정렬 방식 등을 제어 할 수 있다.

color:#ff3366  컬러변경
text-align:right '더보기 / 닫기' 제목 정렬 방식
font-weight:bold; 폰트 두께 변경




 더보기 / 닫기 아이콘 변경 방법

더보기 / 닫기 색상 변경방법에 대해 알아봤습니다.
글 색상만 바꾸기엔 좀 밋밋한 경향이 있습니다.  그럼 좀 더 시각적으로 눈에 띄는 방법인 아이콘을 삽입해서 좀 더 '더보기 / 닫기' 메뉴를 부각 시켜 보도록 하겠습니다.

2. 아이콘 변경 방법.

버튼 이미지를 포토샵 등을 이용해서 직접 만드셔도 되지만 귀찮은 분들은 무료 아이콘을 다운 받아서 사용하셔도 됩니다.

   
무료 아이콘 이미지  -  다운로드

이미지의 크기는 너무 크지 않은 16 x 16 정도면 적당 합니다. 

티스토리 관리자 모드에 접속해 주세요.

HTML/CSS 편집 클릭.


1. 파일업로드 탭 선택.
2. + 추가 버튼 클릭.
3. 추가한 이미지를 찾아 선택.
4. 이미지의 클릭 마우스 우측버튼 속성 클릭.


속성 보기 창에서 주소:(URL) 의 이미지 주소를 드래그 복사 해주시면 됩니다.
위의 붉은 박스 안에처럼 이미지 확장자 까지만 선택 해주시면 됩니다. 
이미지 확장자 JPG, GIF, PNG 등


HTML/CSS탭 선택 해주세요.
   
검색 Ctrl + F 하셔서 

moreless       <=== 요 항목을 검색해 주세요.

 

 

 

 변경전

/* 본문 - more / less */
 .moreless_fold         
{ background:url(images/iconMore.gif) top left no-repeat;  padding-left:20px; color:#ff3366;}
 .moreless_top          
{ background:url(images/iconLess.gif) top left no-repeat;  padding-left:20px; color:#ff3366;}
 .moreless_body         
{ }
 .moreless_bottom       
{ background:url(images/iconLess.gif) top right no-repeat;  padding-right:20px; color:#ff3366; text-align:right;}
 


 변경후

/* 본문 - more / less */
 .moreless_fold         
{ background:url(http://cfs.tistory.com/custom/blog/87/872494/skin/images/moreless_01.png) top left no-repeat;  padding-left:20px; color:#ff3366; font-weight:bold;}
 .moreless_top          
{ background:url(http://cfs.tistory.com/custom/blog/87/872494/skin/images/moreless_02.png) top left no-repeat;  padding-left:20px; color:#ff3366; font-weight:bold;}
 .moreless_body         
{ }
 .moreless_bottom       
{ background:url(http://cfs.tistory.com/custom/blog/87/872494/skin/images/moreless_02.png) top right no-repeat;  padding-right:20px; color:#ff3366; font-weight:bold; text-align:right;}
 



위 이미지에서처럼 어떤 항목이 어떤 변화를 주는지 알 수 있습니다.
적용 완료 되었으면 저장을 하시면 완료가 됩니다. 


다소 심심했던 더보기 / 닫기를 좀 더 주목성 있도록 변경이 완료 되었습니다.
요 며칠 감기 기운으로 고생하다보니, 포스팅을 하는 제 자신이 ㅡ,.ㅡ; 무슨 글을 쓰고 있는지 멍하네요. 

모두 감기 조심 하시구요.  감기 걸리기전 미리 예방 하는 게 가장 좋습니다.  
며칠 남은 2011년 마무리 잘 하시구요. 2012년 항상 행복 하세요. ^^

   
관련 글 & 도움이 되는 글

- 티스토리 더보기, 접기, 기능 이해와 활용 TIP
- 티스토리 제목 물결무늬 플래시로 바꾸는 방법
- 티스토리 블로그 이미지 테두리 없애는 방법 TIP

- 티스토리 제목 색상 바꾸기 2가지 방법

- 티스토리 블로그 이미지 테두리 없애는 방법 TIP
- 티스토리 블로그 스크롤바 색상 변경하는 법 !
- 티스토리 블로그 댓글창 스크롤바 넣어보자.
- 티스토리 댓글창 위치 변경하는 법!

- 블로그 사용 중인 광고용어 정리
- 블로그 자신의 SEO 지수 확인 사이트!


쿨펀치의 세상리뷰 는 여러분의 소중한 댓글과 VIEW ON 클릭 구독 클릭이 큰힘이되어.
더 좋은 블로그를 만들 수 있게 하는 원동력이 됩니다.  

반응형

댓글