바리스타요셉의 삶 속에서 기록하고 전하는 이런 저런 이야기들
광고부분 양해 바랍니다.

함께하는이야기

티스토리블로그의 페이지 밑에 홈/위로/뒤로가기 버튼(아이콘) 추가한 이야기

바리스타요셉 2021. 2. 6. 16:29
광고부분 양해 바랍니다.

제 블로그에 좀 긴 내용의 글을 올렸더니 글을 다 읽은 후 메뉴를 다시 누르거나 홈으로 가기 위해서 한 참 스크롤해서 올라가야 하는 불편함을 느꼈습니다. 

 

제가 불편하면 다른 분들도 불편할 듯하여 제가 사용하는 기본 스킨에 아래 기능에 해당하는 아이콘(icon)과 테그(tag)를 추가해 보았습니다. 

 

1. 홈(Home) 버튼
2. 위로가기(Top) 버튼 : 페이지 맨 위로 이동
3. 뒤로가기(Back / 또는 이전페이지 Previous page) 버튼

 

나오는 위치 : 글 내용 하단의 댓글 입력 부분 바로 위

 

 

 

모양만 봐도 아시겠지만 블로그 첫 페이지로 이동하는 HOME 버튼과 이전 페이지로 돌아가는 BACK 버튼, 그리고 페이지 맨 위로 올라가는 TOP 버튼입니다. 

 

 

필요성을 못 느끼는 분들도 계시겠지만 저는 불편하게 느껴져서 제 블로그에 추가하게 되었으며 그 이야기를 적어 놓으니 혹시 필요하신 분은 적용해 보세요. 

 

 

 

1. 사용스킨 : Odyssey 

 

2. 아이콘 구하기

 

제가 사용한 아이콘은 Font Awesome 이라는 곳에서 구한 것이며 무료 라이센스입니다. 

 

 

2.1 Font Awesome 가입

 

 

사이트 주소 : https://fontawesome.com/

 

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

 

위 사이트에 접속하신 후 메뉴의 'Start' 또는 페이지 가운데 있는 'Start for Free'를 누릅니다. 

 

 

 

아래 화면에서 이메일 주소를 입력 후 'Send Kit Code </>' 버튼을 누릅니다. 

 

 

 

 

이메일을 확인하라고 하니 이메일을 열어 보겠습니다. 

 

 

 

이메일함을 열어보니 아래와 같이 이메일 내용이 보입니다. 아래 'Click to Confirm Your Email Address + Set Things Up'이라고 되어 있는 버튼을 누릅니다. 

 

 

 

 

 

이메일함에서 클릭하니 Font Awesome 페이지로 넘어가면서 비밀번호 입력하라는 내용이 나오네요. 

 

 

 

 

 

비밀번호를 입력하면 이름과 몇 가지 질문이 있지만 중요하지 않으니 대충 선택하고 입력합니다. 

 

 

 

 

 

2.2 Kit Code 얻기

 

 

이름 입력하는 과정 다음에 바로 제공됩니다. 이 코드는 사용자마다 다르므로 꼭 제공된 것을 사용하여야 됩니다. 

 

 

 

 

 

아이콘을 적용하기 위한 스크립트 소스가 제공됩니다.  'Copy Kit Code!' 버튼을 눌러 복사합니다. 

이 코드는 티스토리 블로그 스킨의 <head></head> 사이에 넣어 주는 것입니다. 이 코드를 넣어야 아이콘을 사용할 수 있습니다. 

 

 

 

3. 티스토리 블로그 스킨에 Kit Code 추가

 

 

티스토리 블로그의 스킨 편집에서 'html 편집'으로 들어간 다음 HTML 소스가 보이는 곳에서 </head> 줄 바로 위에 복사한 Kit Code를 붙여 넣기 합니다. 

 

 

 

 

 

 

4. 버튼 추가하기

 

4.1 아이콘 갖고 오기

 

필요한 아이콘은 총 3개 입니다. 

 

   - 홈(Home) 버튼용

   - 상단이동(Top) 버튼용

   - 뒤로가기(Back/Previous page) 버튼용

 

 

4.1.1 홈 버튼용 아이콘 

 

 

Font Awesome 사이트로 다시 가서 상단 메뉴의 Icons을 누릅니다. 

 

 

아래와 같이 나오면 검색창에 home을 입력하고 검색하면 관련 아이콘이 나옵니다. 이 중 색이 진한 것이 무료 라이센스이며 연하게 나오는 아이콘은 유료 라이센스 부분으로 Pro 계정으로 전환해야 사용이 가능합니다. 

 

무료 라이센스로 충분하니 첫 번째 나오는 저 것을 사용하기 위해 첫 번째 아이콘을 클릭합니다. 

 

 

 

첫 번째 아이콘을 클릭하면 아래와 같이 해당 아이콘에 대한 세부 내용이 나옵니다. 

여기에서 표시된 <i class="fas fa-home"></a> 부분을 클릭하면 복사됩니다. 

 

 

 

 

4.1.2 상단이동 / 뒤로가기 버튼용 아이콘

 

 

Top 버튼용 아이콘을 검색하니 유료 라이센스라서 포기하고 arrow라고 검색하여 보니 적당한 것이 보입니다. 

왼쪽의 '□ Free' 부분을 체크한 후 검색하니 무료만 보여 편리하네요. 

 

 

선택한 아이콘에 대한 태그

 

   ④ arrow-circle-up : <i class="fas fa-arrow-circle-up"></i>

   ⑤ arrow-circle-left : <i class="fas fa-arrow-circle-left"></i>

 

저는 아이콘의 통일감을 위해 같은 형식의 두 아이콘을 선택하였으나 취향에 따라 다른것을 선택하면 되겠습니다. 

 

 

 

4.2 아이콘 적용하기 

 

구해 온 아이콘 소스를 티스토리 블로그에 추가해 보겠습니다. 저는 댓글 입력 칸 바로 윗부분에 추가하였습니다만 다른 위치 원하시면 그 위치 찾아서 넣으면 됩니다.

 

Odyssey 스킨을 기준으로 줄 번호는 다를 수 있으나 270번~272번 줄을 찾아보면, 

 

270 : </s_article_related>

271 : 

272 : <!-- article-reply --> 

 

이 부분을 찾을 수 있을 거예요. 저는 저 사이에 아래와 같이 추가하였습니다.  CSS 적용하기 귀찮아서 그냥 Style을 그대로 적어 넣었습니다. 

 

 

 

 

뭔가 좀 복작해 보이지만 그냥 제가 사용할 거라서 저렇게 한 것이니 양해 바랍니다. 

 

하나씩 설명해 보겠습니다. 

 

 

4.2.1 크기 조정

 

 

복사해 온 소스는 단순히, <i class="fas fa-home"></i> 이런 형식으로 되어 있으며 그대로 사용할 경우 아무런 기능도 없는 작은 아이콘만 나오게 됩니다.  

 

그래서 2배 크게 나오도록 fa-2x라는 속성을 부여했습니다. 

 

버튼 기본크기 2배 확대
홈 (Home)    
위로가기 (Top)    
뒤로가기 (Back)    

 

속성 적용소스

 

<i class="fas fa-home fa-2x"></i>

<i class="fas fa-arrow-circle-up fa-2x"></i>

<i class="fas fa-arrow-circle-left fa-2x"></i>

 

 

 

4.2.2 링크속성 적용

 

a 태그를 적용하였을 때 아이콘을 클릭하면 아이콘의 색상이 바뀌어 보기 싫어지더라구요. 그래서 저는 자바스크립트를 이용해서 링크 속성을 부여하였습니다. 

 

   Home : onclick="location.href='링크주소'";

   Top    : onclick="location.href='#'";

   Back   : onclick="history.back();";

 

바로 이 부분입니다.

 

이렇게 자바스크립트로 링크 속성을 부여하게 되면 아이콘 위에 마우스 포인터를 올렸을 때 마우스 아이콘이 손 모양으로 바뀌지 않더라구요. 그래서 아이콘 위에 마우스 포인터를 올렸을 때 마우스 포인터가 손 모양으로 바뀌도록 하는 속성도 추가하였습니다. 

 

style="cursor:pointer;"

 

라는 부분입니다.

 

 

이 두 가지를 적용한 소스는 아래와 같습니다. 

 

   Home : <i class="fas fa-home fa-2x" onclick="location.href='https://jospeh.net'" style="cursor:pointer;"></i>

   Top    : <i class="fas fa-angle-double-up fa-2x" onclick="location.href='#'" style="cursor:pointer;"></i>

   Back   : <i class="fas fa-chevron-left fa-2x" onclick="history.back();" style="cursor:pointer;"></i>

 

 

나오는 순서 및 배치는 적당히 하면 될 듯 합니다. 

 

 

   

 

4.2.3 각 아이콘 사이 공백 넣기

 

아이콘 사이를 좀 띄우기 위해  &nbsp; 라는 것을 사용하였습니다. 

 

   &nbsp;&nbsp;&nbsp;&nbsp;  

 

이러면 4칸이 띄워지게 될거에요. 

 

 

 

4.3 아이콘 표시 영역 꾸미기

 

단순히 아이콘만 나오면 좀 썰렁할 듯해서 사각 모서리가 살짝 둥근 박스를 만들어 넣었습니다. 

 

<div style="text-align:center;padding:20px 0 20px 0;border:#e8e8e8 solid 1px;border-radius:5px;background:#f8f8f8;">

 

    아이콘 소스는 이곳에~

 

</div>

 

태그 안에 스타일 속성을 바로 저렇게 적용하는 방법은 바람직하지 않아서 가급적 CSS 부분에 해당 스타일 속성을 추가한 후 적용하는 방법을 추천합니다만 저는 시험삼아 하면서 바로 적용한 것이니 적용방법은 본인이 원하는 방법대로 하면 됩니다. 

 

이렇게 해서 만든 버튼이 바로 아래에 보이는 버튼입니다. 

 


 

 

모바일페이지에서 편리하여 잘 사용하고 있습니다. 

 

 


 

 

반응형