티스토리 더보기 색상, 아이콘 변경 방법!
티스토리 블로그를 운영 하면서 모르고 있던 기능을 새로이 알아 가는 맛이 있는 거 같습니다.
저번 포스팅에서 티스토리 블로그 기본 기능인 '더보기 / 접기' 에 대해서 알아봤습니다.
티스토리 더보기, 접기 기능 이해와 활용 TIP - 구경가기
포토샵 강좌/포토샵 표준 RGB 색상표 1 - 구경가기
포토샵 강좌/포토샵 표준 RGB 색상표 2 - 구경가기
한국 전통색 표준 색상표 - 구경가기
이번 시간에는 '더보기 / 접기' 기능을 좀 더 꾸며보고자 합니다.
'더보기 / 접기' 글의 색상과 아이콘 변경 방법에 대해 알아보겠습니다.
'더보기 / 접기'
1. 색상 변경 방법.
2. 아이콘 변경 방법.
 |
더보기 / 접기 색상 변경 방법. |
처음 '더보기 / 접기' 적용 하면 클릭 부분의 색상이 포스트 글 색상과 같아 눈에 띄지 않습니다. 방문자로 하여금 글이 더 있다는 것을 강조하기 위해 본문의 글 색상과 차별을 줘야 합니다.
1. 색상 변경 방법.
티스토리 관리자 모드에 접속해 주세요.
| 검색 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 정도면 적당 합니다. |
티스토리 관리자 모드에 접속해 주세요.
1. 파일업로드 탭 선택.
2. + 추가 버튼 클릭.
3. 추가한 이미지를 찾아 선택.
4. 이미지의 클릭 마우스 우측버튼 속성 클릭.
속성 보기 창에서 주소:(URL) 의 이미지 주소를 드래그 복사 해주시면 됩니다.
위의 붉은 박스 안에처럼 이미지 확장자 까지만 선택 해주시면 됩니다.
이미지 확장자 JPG, GIF, PNG 등
HTML/CSS탭 선택 해주세요.
| 검색 Ctrl + F 하셔서 moreless <=== 요 항목을 검색해 주세요. |
|
변경전 |
|
변경후 |
위 이미지에서처럼 어떤 항목이 어떤 변화를 주는지 알 수 있습니다.
적용 완료 되었으면 저장을 하시면 완료가 됩니다.
다소 심심했던 더보기 / 닫기를 좀 더 주목성 있도록 변경이 완료 되었습니다.
요 며칠 감기 기운으로 고생하다보니, 포스팅을 하는 제 자신이 ㅡ,.ㅡ; 무슨 글을 쓰고 있는지 멍하네요.
모두 감기 조심 하시구요. 감기 걸리기전 미리 예방 하는 게 가장 좋습니다.
며칠 남은 2011년 마무리 잘 하시구요. 2012년 항상 행복 하세요. ^^
쿨펀치의 세상리뷰 는 여러분의 소중한 댓글과 VIEW ON 클릭 구독 클릭이 큰힘이되어.
더 좋은 블로그를 만들 수 있게 하는 원동력이 됩니다.
'블로그 BOX > 블로그 팁' 카테고리의 다른 글
| [티스토리]제작한 배너 사이드바에 넣기 (33) | 2012.01.10 |
|---|---|
| 티스토리 방명록 비밀글 기능 추가 방법 (44) | 2012.01.05 |
| 애드센스 수익 단가 올리는 방법 1 [1000 달러 목표] (27) | 2012.01.04 |
| 다음 검색이 안되요 다음 검색 누락된 내 글 찾는 방법 (10) | 2012.01.04 |
| 네이버 검색이 안되요 네이버 검색 누락된 내 글 찾는 방법 (16) | 2012.01.04 |
| 티스토리 더보기, 접기, 기능 이해와 활용 TIP (4) | 2011.12.28 |
| 티스토리 제목 물결무늬 플래시로 바꾸는 방법 (20) | 2011.12.24 |
| 티스토리 블로그 이미지 테두리 없애는 방법 TIP (0) | 2011.12.24 |
| 블로그 자신의 SEO 지수 확인 사이트! (23) | 2011.12.22 |
| 티스토리 블로그 view 최신글,인기글,구독 위젯 사라졌을 때! 해결방법 (0) | 2011.12.22 |
댓글