티스토리 flatinum 상단 메뉴, 폰트 굵게, 중간 선 넣는 방법

티스토리 반응형 스킨인 Flatinum은 현재 회사에서 사용하고 있는 블로그 스킨중에 하나입니다.

사용자가 원하는 대로 이미지 변경 및 상단 메뉴를 수정해서 사용할 수 있는데요.

자신만의 감성으로 편집하시길 원하시는 분들을 위해 정리해 보았습니다.

스킨을 적용하면 보이는 기본 메인 화면 입니다.

상단 좌측에는 공지사항과 우측에는 드롭다운을 할 수 있는 티스토리 버튼이 보입니다.

티스토리를 클릭하면 태그, 위치로그 등의 기본 블로그 메뉴를 확인할 수 있습니다.

티스토리 블로그의 장점은 내가 원하는 대로 편집이 가능하다는 점이죠.

아래는 제가 수정해 본 저희 회사 블로그 상단 화면입니다.

상단 바에 메뉴를 추가해 보았습니다.

정보 전달의 목적이 크므로 폰트를 굵게해서 차별화를 두었습니다.

아래 방법대로 따라해 보시면 쉽게 편집할 수 있을 것 입니다.

1. 티스토리 관리자 페이지에서 스킨 편집 - html 편집을 클릭하면 다음과 같은 화면이 나옵니다.

HTML 페이지인 우측 화면에서만 작업을 진행하며, 왼쪽에서는 작업한 내용으로 새로고침을 클릭하면 실시간 반영되는 화면을 볼 수 있습니다.

2. 상단 바에 드롭다운 버튼이 없는 메뉴를 추가 및 편집하는 방법입니다.

<li><a href="https://netopvision.tistory.com/90">회사 소개</a></li>

위 라인을 그대로 복사해서 붙어넣으면 동일한 메뉴가 추가되며, 삭제하면 메뉴가 없어집니다.

빨간색의 라인은 이동할 페이지 주소이며,

초록색은 메뉴의 이름입니다.

해당하는 내용을 편집하면 됩니다.

3. 드롭다운 버튼이 있는 메뉴의 편집 방법입니다.

관리를 클릭하면 여러 상품에 대한 이름이 확인될 수 있으며, 클릭하면 상세 페이지로 이동합니다.

- 드롭다운 메뉴 추가

<ul class="dropdown-menu">

....

</ul>

위 구문을 그대로 복사해서 붙여넣거나 삭제해서 활용하면 됩니다.

- 드롭다운 하위 메뉴 추가

2번에서 안내한 메뉴 추가와 동일합니다.

- 폰트 굵게

<li class="dropdown-header"><strong>PC통합관리</strong></li>

제목에 앞뒤로 strong 구문이 들어갔습니다.

- 중간에 선넣기

<li class="divider"></li>

위 구문을 원하는 곳에 넣으면 됩니다.

4. 작업을 하면서 새로고침 버튼을 클릭해서 제대로 수정되고 있는지 확인할 수 있으며,

최종 작업이 마무리 됐으면 적용 버튼을 클릭한 뒤 창을 닫으면 됩니다.