왓에버 스킨 버튼 안의 화살표 없애기

버튼 속 화살표를 없애고 나만의 문구를 사용해보자

 

이전 포스트에서는 왓에버 스킨 버튼을 활용하여 이미지 파일 없이도 상단으로 이동하는 버튼을 추가하는 방법에 대해서 알려드렸습니다. 왓에버 스킨 버튼이 참 예뻐서 나의 고품질 블로그에도 참 잘 어울린다고 생각하겠지만 TOP버튼에 화살표 방향이 → 이라니 좀 그렇군요;;;

 

이전 포스트
2020/03/30 - [Useful information] - 이미지 없이 상단으로 가는 버튼 만들기 - 왓에버 자체 버튼 활용

 

왓에버 스킨 버튼을 다양하게 활용할 수 있도록 화살표를 아예 없애봅시다.

※ 아래 내용은 초보자에게 좀 어려울 수 있으니 두려우신 분들은 연습용 티스토리를 하나 개설하셔서 충분히 연습해 본 후 자신의 블로그에 적용해보세요.

 

화살표 → 없애기

 

- 블로그관리 메뉴 중에서 [꾸미기] -> [스킨편집] 클릭
- 스킨 편집 새 탭이 뜨면 오른쪽 [스킨편집] 란의 [html 편집] 클릭
- HTML옆의 CSS 클릭

- 22번 라인 빈칸에 커서를 클릭하고 Ctrl+f (찾기 단축키)
- 검색 창이 뜨면 [Components]를 입력하고 엔터

대략 357번에 /* Components */ 가 나옵니다.
아래쪽에 .btn:after { 어쩌고 저쩌고 }가 나오는데
내용 부분을 살펴보면 background: url(./images/ico_package.png) no-repeat -100px 0; 
이라는 부분이 있습니다.

- 이 라인을 전부 삭제.

 

CSS 모습. Components을 찾은 다음 background: url~ 라인을 삭제

 

전부 삭제하기가 아까운 사람은 url(./images/ico_package.png)만 지우고 나머지는 살려줘도 될 것 같아요. 실험 결과는 동일하였습니다. 저는 깨끗하게 다 지워버렸어요. ㅎ

- 오른쪽 상단의 [적용]을 누르고 [새로고침]한 뒤 (안 해도 상관없었어요) 내 창을 띄워 확인해 봅니다. 
- 버튼 안의 →가 사라짐.

 

버튼 크기, 글자 사이즈, 정렬방식 바꾸기

 

자 이제, 자신감이 붙었다면 이제 다른 것도 건드려봅시다.

CSS 357번 라인 /* Components */ 이하에서
.btn, a.btn { 어쩌고 저쩌고 } 안에 있는
text-align: left;를 (대략 365번 라인)
text-align: center;로 고쳐봅니다.

적용을 누르고 [새로고침]하고 살펴보면
버튼 안의 [더보기] 문구가 가운데 정렬이 되었습니다.

 

나는 수전증이 있는데 버튼이 너무 작아서 클릭하기 힘들어! 하시는 분들은

width: 158px;를 (대략 361번)
width: 240px;으로 고쳐보고

 

내겐 너무 작은 버튼...

 

나는 노안이라 글자가 너무 작아! 안 보여! 하시는 분들은

font-size: 12px;를 (대략 366번 라인)
font-size: 18px;으로 고쳐보세요.

 

도구를 사용하는 인간은 만물의 영장

 

[적용]을 누르고 [새로고침] 해 봅니다.

가끔 스킨편집 창에서는 반영이 안 되는데
막상 다른 창에서 내 블로그 사이트를 띄워보면
바뀐 것이 반영되어 있는 경우도 있습니다.

 

[더보기] 문구 수정하기

 

- HTML로 갑니다. (CSS아님)
- 커서를 코드 창 안에 한 번 클릭한 후 Ctrl+f (찾기 단축키)
- 검색 창이 뜨면 [더보기] 입력하고 엔터
- 대략 52번 라인에 처음으로 등장하는 [더보기]는 슬라이더의 [더보기]입니다.
  (head 안에 메타태그, 자바스크립트 추가 여부에 따라서 번호는 각자 다를 것입니다.)
  s_cover name='cover-slider'하위에 위치합니다.

 

HTML 모습. s_cover name='cover-slider' 하위에 있는 '더보기'를 고쳐 봅시다.

 

- [더보기] 문구를 '클릭', '더 읽기', '이요브의 블로그' 등으로 바꿈.

 

수정 전 / 수정 후

 

이런 식으로 [섬네일 리스트], [스페셜 콘텐츠], [와이드패널] 등의 [더보기] 문구를 수정하여
자신만의 톡톡 튀는 개성을 살려보세요.