티스토리는 워드프레스에 비해 꾸밀 수 있는 자유도가 한정되어 있는 것은 사실입니다. 하지만 티스토리에도 여러 스킨들이 존재하는 만큼 꾸밀 수 있는 요소가 아예 없는 것은 아닙니다. 오늘 글에서는 티스토리 블로그의 타이틀과 메뉴 바를 꾸미는 방법에 대해서 자세히 설명 드리겠습니다.
목차
1. 블로그 타이틀 꾸미기
1-1. 북클럽스킨 타이틀 꾸미기
북클럽스킨의 경우 타이틀을 바꿔도 우측 두개의 버튼때문에 생각보다 그리 이쁘진 않습니다.
(추후 우측버튼이 이동가능한 방법을 확인한다면 수정하겠습니다.)
포스팅에 포함시킬까 고민하다가 필요한분들도 계실 것 같아 항목에 넣었습니다.
위의 파일을 다운받아 [스킨편집] - [HTML편집] - [CSS] 로 이동 후 조금만 내리면 /* Layout Selector */ 부분이 보입니다.
거기서 #header h1 과 #header h1 a 항목을 다운받은 파일로 교체해줍니다. (삭제 후 붙여넣기)
그리고 아래 #header .util .search 항목에서 background-color 부분을 직접 입력해주시고 타이틀 배경색과 일치시켜 줍니다.(돋보기 배경색상 변경)
하늘색 부분은 입맛대로 수정해주시면 됩니다.
1-2. 고래스킨 타이틀 꾸미기
고래스킨의 경우엔 오히려 그 방법이 간단합니다.
타이틀 배경은 [스킨 편집] - 레이아웃 설정 부분에서 [헤더 영역 배경색 선택] 에서 변경 가능하합니다.
타이틀 변경은 [HTML편집] - [CSS] 로 이동 후 #header_wrap #header_gnb #header-title a 부분에서 폰트 크기, 두께, 색상을 변경할 수 있습니다.
2. 블로그 메뉴 바 꾸미기
2-1. 북클럽스킨 메뉴바 꾸미기
[HTML편집] - [CSS] 로 이동해 메뉴 바 하단선과 호버효과를 적용해 보겠습니다.
위의 파일을 다운받아 아래 녹색박스 부분에 추가로 삽입해 줍니다.
파란박스 부분인 메뉴 바 하단선과 메뉴 높이는 직접 추가해 주고, 메뉴 폰트 색은 자유롭게 변경해 줍니다.
box-shadow 부분은 그림자를 조절하는 영역이고, background 부분은 호버효과인데 현재는 그라데이션으로 되어있으나 단일색상으로도 변경 가능합니다.
예시) background: lightblue (or #3a3a3a)
내용추가) #gnb 항목의 height로 메뉴바 높이를 조절할 수 있습니다.
2-2. 고래스킨 메뉴바 꾸미기
해당 파일을 다운받아 #container nav, #container nav ul li 항목을 수정해주고 녹색박스 부분은 추가로 삽입해줍니다.
#container nav 항목의 height 와 #container nav ul li 항목의 line-height는 수치를 일치시켜주는게 좋습니다.
북클럽스킨과 마찬가지로 메뉴호버 항목의 background 는 그라데이션 대신 단색으로 하셔도 무방합니다.
3. 메뉴 항목 변경
3-1. 북클럽 메뉴 항목 변경
북클럽에서 메뉴항목을 변경하는 일은 간단합니다. 블로그 메뉴항목에서 추가 및 삭제하시면 됩니다.
추가 시 링크와 새창으로 열기도 조절이 가능하니 여기서 변경해주시면 됩니다.
3-2. 고래스킨 메뉴 항목 변경
고래스킨 은 HTML에 항목이 지정되어 있기 때문에 기본스킨에서의 방법으로는 변경이 불가능합니다.
[HTML편집] - [HTML] 로 이동 후 아래의 부분에서 추가 및 변경이 가능합니다.
홈은 href="/"이며, 그 외 URL은 href="이동할주소" 로 변경하시면 됩니다.
4. 메뉴바 호버시 무지개효과 주기
티스토리 블로그 플러그인에서 무지개 링크를 활성화시켜주면 됩니다. (짱쉽죠?)
메뉴바에 아이콘을 넣는 방법은 아래 글에서 확인 가능합니다.
5. 함께 보면 좋은 글
티스토리 블로그 아이콘 메뉴 만들기 (북클럽, 고래스킨)
이전 글에서는 티스토리 블로그 타이틀과 메뉴바 꾸미는 방법을 알아보았습니다. 이번 글에서는 메뉴바에 다양한 아이콘을 넣는 방법에 대해서 자세히 알아보겠습니다. 목차 1. 아이콘 메뉴 만
safariNjob.com
티스토리 멀티플렉스 광고 설정. ( 광고 클릭률 2.5배 올리기. )
방문자수에 비해서 광고수익이 생각보다 별로라고 느껴본 적 없으신가요? 그렇다면 잘 오셨습니다. 오늘 포스팅에서는 구글 애드센스 광고 중에서도 '멀티플렉스 광고' 란 무엇인지, 그리고 자
safariNjob.com
작성자의 추천 컨텐츠 모음
'애드센스 & 워드프레스 & 티스토리' 카테고리의 다른 글
| 티스토리 CSS 쉽게 찾는 방법 (0) | 2023.04.20 |
|---|---|
| 티스토리 블로그 소제목 꾸미기 (CSS코드 총 정리) (0) | 2023.03.31 |
| 티스토리 블로그 아이콘 메뉴 만들기 (북클럽, 고래스킨) (0) | 2023.03.29 |
| 티스토리 멀티플렉스 광고 설정. ( 광고 클릭률 2.5배 올리기. ) (0) | 2023.03.07 |
