티스토리 블로그 스퀘어 스킨 사이드바 찾기메뉴 수정

2016년 1월 18일

한동안 손대지 않던 티스토리 블로그 스킨. 이번에 수정한 것은 사이드 바 찾기 메뉴 ‘위치 이동’과 ‘어썸폰트를 사용해 돋보기 아이콘 넣기’였다.

원래는 맨 아래 위치하고 있어 불편했는데, 아래 사진에서 보이는 것처럼 수정하고 나니 내가 이용하기에도 편리해졌다. 

 

 

1. 찾기 메뉴 위치 이동

위치 이동은 간단하다. 

관리>사이드바 에서 ‘search’메뉴를 원하는 위치로 올리면 된다

 

 

 

2. 돋보기 아이콘 넣기

 

1) 어썸폰트 

 

돋보기 아이콘은 어썸폰트(Font Awesome) 웹 아이콘을 이용했다. 따로 이미지를 만들거나 올려놓지 않아도 이미 있는 아이콘을 이용하기만 되므로 편리하다.

지금 쓰고 있는 스퀘어 ver.2.1 스킨은 어썸폰트를 쓸 수 있게 되어 있어 별다른 조치는 필요하지 않았다. 

사용할 수 있는지 여부는 관리>스킨>html수정 에서 다음 구절이 있는지 찾아보면 된다. 있다면 그대로 진행하면 되고, 없다면 넣어주면 된다.  

 

 

 

2) 돋보기 아이콘 넣기

 

관리>스킨>html수정에서 sidebar, search를 찾는다. 

아래 사진처럼 <s_sidebar_element> <!–search –>가 보인다. 

그 아래<….”press enter to search…”….>구절이 끝나는 곳에 빨간색 밑줄쳐진 대로 ‘<i class=”fa fa-search”></i>를 넣어주면 된다. 

 

 

 

<참고글>

폰트어썸 웹 아이콘 적용하기 : http://gonegone21.tistory.com/31

폰트 어썸 웹 아이콘 : http://fortawesome.github.io/Font-Awesome/icons/