블로그 운영/티스토리 꾸미기

보기 HTML 코드로 제목 앞에 직사각형 모양의 네모상자 바 bar 같은 모양을 만드는 방법 순서 블로그관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 > CSS 적용할 제목 태그를 코드에서 찾아 코드 추가 적용 원본 코드는 저장해두거나 지우지 말고 주석처리한 다음 밑에 새로 적용할 코드를 적어도 좋다. 태그 이름 오디세이 Odyssey 스킨에서 ctrl / command + F로 제목 태그 찾기 제목1 : / .article-view h2 제목2 : / .article-view h3 밑줄 만들기 border-bottom: 1px solid #000000; 아래쪽에 : border-bottom 실선 : solid 크기 : 1px 검정색 HEX 코드 : #000000 색상은 인터넷에 #000000 ..

개발자도구 활용 블로그관리 페이지에서 위젯으로 스킨을 편집하는게 잘안된다면 개발자도구를 통해 바꾸고 싶은 부분을 직접 편집할 수 있다. F12 키 마우스 오른쪽 버튼 > 페이지 검사 메뉴 웹브라우저 상단 메뉴 > 개발자용 같은 이름의 메뉴 검사할 페이지 요소 선택 > 선택한 부분의 코드 확인 제목 글자 크기 줄이기 블로그관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 > 적용 원본코드는 편집 전에 저장해두기 제목1인 를 font-size 24에서 4px로 줄인 모습

오디세이 스킨 폭이 좁아 애드핏 광고를 본문 상단에 배치하니 밑에 첨부한 사진처럼 상단 광고가 본문 폭을 넘는다. 수정할 부분 코드는 main.main으로 가로 1020px을 적당한 크기로 바꿔보자. .main의 max-width 값을 1020px에서 1030px, 1050px로 적당한 값을 입력해가며 사이드 메뉴바까지 넘어갔던 상단 광고가 적당해지는지 보는데 1070px이 맞는거 같아 그렇게 수정. 개발자도구에서 값을 조정했다고 티스토리 스킨 코드가 변경된건 아니라서 적용을 원하면 까먹지 말고 티스토리 스킨 코드에 적용하도록 한다.

오디세이 Odyssey 스킨은 블로그 이름이 태그를 쓰고 있어 글을 쓰면 본문의 제목은 제목1을 선택하고 써도 이 아니라 태그로 적용된다. 블로그 이름 : h1.title-logo 제목1 : 제목2 : 찾아보니 글에 타이틀을 의미하는 태그가 중복되면 안좋대서 게시글 제목1은 태그로 시작한다고 하는데. 이렇게 제목1이 h2, 제목2가 h3, 제목3이 h4 같은 식으로 밀려서 적용되어 있는게 헷갈리거나 하는 이유로 고쳐보고 싶다면 바꾸는 방법은 간단하다. 개발자도구를 열고 요소 선택을 누른 다음 글 제목에 마우스를 두면 글 제목은 로 된 걸 알 수 있다. 클래스 이름인 tiitle-article을 찾아 h2 부분만 h1으로 바꾸면 되는데 3군데 정도 나온다. [ ##art..

■ 웹 브라우저 Chrome ■ 오디세이 스킨 제목2 태그 .article-view h3 ■ 웹 브라우저 개발자 도구 > 기기툴바전환 > 모바일 화면으로 전환 검사할 페이지 요소를 누르고 본문에 마우스를 갖다대면 마우스가 위치한 부분의 HTML 요소들이 나오는데 오디세이 스킨에서 제목2는 태그명이 으로 .article-view h3이다. 제목 요소를 클릭하면 개발자도구 화면에서 스타일시트에 그 요소의 스타일 설정 내용이 나오니 그 부분 코드를 수정해 바뀌는 모습을 보고 티스토리 스킨 편집에 가서 HTML이나 CSS 코드를 수정하면 된다. ■ 설정 부분 글자 크기 : font-size 글자 굵기 : font-weight 줄 간격 : line-height 선택된 박스 안쪽 여유 공간 : padding 선택된..