티스토리 블로그를 처음 운영하기 시작하면 소스코드를 참으로 많이 만줘 줘야 하는데요, 이러다보면 뭐 하나만 잘못 쓰던가 빠트려도 당장 뒤죽박죽이 되버리곤 하죠. 저의 경우에는 어느날 갑자기 사이드 바가 없어져 버렸더군요. 뭐지 ? 하면서 뒤적뒤적 하니 본문 최하단 아래쪽으로 쭉내려가서 혼자 덩그러니 있더군요. 뭔가 태그가 엉켰을꺼 같은 생각에 티스토리 HTML 편집창을 열어놓고 위부터 훑어보다 보니 이상한 부분이 눈에 띠더군요. 태그트레일 이라고 써있는 부분 바로 위에 이 부분입니다. 상대태그가 없어 저렇게 빨간글씨로 에러를 표시하고 있더군요. 짚히는게 있었습니다. 태그트레일 부분은 얼마전에 카테고리 목록출력하는 페이지 상단에 광고를 넣기 위해 들락날락했던 부분이었던 거죠. 소스를 이리저리 손보면서 그때..
사이드바에 있는 카테고리를 누르면 카테고리들이 목록으로 리스트화되어 있는 페이지로 넘어가는데 이때 그 목록페이지에도 광고를 실어야 겠습니다. 붉은색 굵은 줄이 있는 저부분에 반응형 광고 한개를 넣어 보겠습니다. 일단 애드센스로 가서 반응형광고코드 한개를 신규로 받아서 복사해 옵니다. 많이 하셔서 이 단계는 코드를 받는 단계는 생략하겠습니다. 티스토리 스킨편집버튼을 누른다음 HTML편집 탭을 누르고 Ctrl + F 를 눌러 검색창을 띠운후 clearfix 라고 치고 엔터를 칩니다. 그러면 위와 같은 부분에서 해당문구가 나오는데 주석태그로 추천광고 위치라고 써진 박스부분에 아까 애드센스에서 생성한뒤 복사해온 코드를 집어넣습니다. 이제 저장을 하고 나온뒤 블로그 페이지를 새로고침해서 보면 카테고리 목록페이지 ..
아래 그림과 같은 위치에 광고를 넣어보도록 하겠습니다. 사실 저 위치는 거의 반정도는 항상 공백상태로 있는 공간낭비가 심한곳같아 보여서 넣어도 상관 없을것 같습니다. 아래에 텍스트 파일을 첨부하니 구글 애드센스에서 반응형광고 한개를 새로 발급받아 아이디와 광고번호를 여기에 넣습니다. 많이 해보셔서 모두 아시리라 생각하고 반응형광고 만드는 법은 생략합니다. 내광고의 광고단위로 가신다음 새광고 선택후 세가지중 첫번째 클릭후 생성버튼을 누르면 아래와 같은 새 반응형 광고코드가 나옵니다. 여기서 본인 아이디와 광고 고유번호를 복사해서 좀전에 다운로드 한 텍스트의 해당위치에 붙입니다. 애드센스 아이디와 광고 고유번호 두개 모두 붙여넣기가 잘 되었으면 저장합니다. 이제 티스토리에 메모장 전체를 복사해서 붙여넣기 하..
제 블로그 상단을 대충 손보았는데 아무래도 블로그 제목부분이 뭔가 허전하고 부조화스럽습니다. 이번 포스팅에서는 검정색인 블로그 이름을 상단바의 색과 동일하게 맞춰보도록 하겠습니다. 먼저 티스토리 관리자 화면의 스킨편집을 누른뒤 HTML편집창이 열리게 한뒤 CSS 탭으로 갑니다. 이과정은 우리가 FastBoot 스킨 상단부분을 수정하면서 항상 해왔던 과정이라 어렵지 않을 것입니다. 예상하시는 대로 다음 과정은 열린 CSS창에서 Ctrl + F를 눌러 검색창을 엽니다. 검색창에 #desktopNav 라고 칩니다. 블로그 제목색상을 바꾸기전에 주위의 글씨색들도 어차피 바꾸어야 하니 우측의 아이콘있는 메뉴들 먼저 바꾸어 보겠습니다. 첫번째 네모는블로그 제목이 들어가는 부분의 바탕색 설정이고, 두번째 네모는 블로..
티스토리 블로그를 시작한지 얼마 되지 않으신 분들이 겪는 문제중의 하나가 카테고리 한개에 여러개의 페이지들이 축적되었는데 막상 사이드 바에서 클릭하면 그냥 해당카테고리의 글들이 쭉 붙어 나온다는거죠. 일일이 스크롤해서 페이지를 다 봐야 내가 원하는페이지가 어디 있는지 보이는데다 페이지들 로딩과정에서 버벅임이 발생하고 화면출력도 미세하게 느려지는 느낌이 듭니다. 그이유는 FastBoot스킨 티에디션의 경우 기본설정이 글목록형태가 내용만 보게 되어 있어서 블로그 사용자가 설정을 직접 바꾸기 전까진 이런형태가 계속되는 것입니다. 이제 이 문제를 해결해 보도록 하겠습니다. 스킨편집을 누르면 나오는 우측 HTML편집창의 하단에 보면 기본설정이 있는데 여기서 바꾸어 주어야 합니다. 시스템 리소스를 잡아먹는거나 구독..
예전 포스팅에서 FastBoot스킨 사이드바에 구글 검색창을 넣어본적이 있습니다. 구글검색창 넣기 http://itfix.tistory.com/21 이번시간에는 구글검색창과 나란히 위치할 구글 번역창을 사이드바에 넣어보도록 하겠습니다. 아래의 구글번역기 설치 사이트로 이동합니다. https://translate.google.com/manager/website/ 100개 이상의 언어로 웹사이트 바로 번역할수 있는 Google의 강력한 자동 번역 기능을 웹사이트에 추가하세요. 무료 웹사이트 번역기 플러그인을 사용하면 쉽고 빠르게 전 세계 사용자와 만날 수 있습니다. 라고 자랑질하고 있는 구글 사이트를 만나실 수 있는데 좌측하단의 웹사이트에 지금추가 버튼을 눌러 주세요. 그럼 위와 같은 화면의 페이지가 나오는..
작업을 하다보니 밑에서 부터 위로 올라가게 되네요. 본문 글씨크기를 키우다보니 본문제목크기도 키우고, 제목색상을 바꾸다 보니 상단바 색상도 바꿔야 할것같아서 여기까지 오게 되네요. 위의 제 블로그 상단부 빨간박스부분이 뭔가 좀 부조화스럽습니다. 색상이라도 바꿔줘야 할것 같습니다. 방법은 역시나 추측하시는 대로 본문수정할때와 같습니다. 티스토리 HTML편집에서 CSS탭으로 가서 Ctrl F 찿기를 눌러줍니다. 검색창에 #SecondNavWrap 라고 치고 엔터를 칩니다. 대략 1000에서 1100대줄 사이쯤에 있습니다. 코드를 보시면 감이 오겠지만 밑줄이 배경색상이고, 나버지 부분들은 상단 고정바의 넓이 등을 설정하는 부분입니다. 상단바의 두께까지 손대보실 분들은 여기서 설정을 바꾸어 주시면 되겠습니다. ..
이전 포스팅에서 본문내용의 글꼴크기를 키우고, 본문 포스팅 제목 글꼴의 크기도 키워봤습니다. 두가지 모두 함께 작업하셨다면 아마도 본문 포스팅 제목바의 컬러나 제목글꼴 색상 등을 어떻게 바꿀지 대충 감이 오실것입니댜. FastBoot스킨 본문 글꼴 키우기 https://itfix.tistory.com/31 FastBoot스킨 본문 제목 키우기 https://itfix.tistory.com/32 두번의 포스팅에서 모두 우리는 CSS탭으로 찿아가서 h.title을 찿아낸뒤 그부분에서 작업을 했습니다. 이번포스팅의 작업도 마찬가지입니다. 먼저 티스토리 HTML편집페이지로 가서 CSS탭을 누른 다음 Ctrl + F를 하여 h.title를 검색한뒤 그위치로 찿아갑니다. 그러면 title color와 backgro..
FastBoot스킨의 본문제목 폰트크기 바꾸기는 바로 전에 포스팅했던 본문내용 글꼴키우기랑 방법이 똑갑습니다. 당연한 이야기겠지만 단지 css태그에서 설정하는 부분이 각각 서로 다른 곳에 있기 때문에 변경하는 위치만 다를 뿐입니다. FastBoot스킨 본문 내용 폰트크기 바꾸기 -> http://itfix.tistory.com/31 자 이제 본문 글꼴크기 수정시에 했던 것처럼 HTML편집창으로 간뒤 CSS탭을 눌러줍니다. 그런다음 Ctrl + F를 이용해 검색창을 열어 h3.title 라고 입력한뒤 엔터키를 누릅니다. 기본이 20px로 설정되어 있는 것이 보이는데 본문 폰트 크기를 키우셨다면 본문제목의 크기도 미관상 어울리게 적당히 키워줘야 하겠습니다. 적당한 숫자를 더해가며 실제 보여지는 페이지를 새로..
FastBoot 반응형 스킨의 기본 본문 폰트는 12px로 요즘 블로그들의 추세에 비하면 다소 작고 답답한 감이 없지 않아 있습니다. 물론 모바일에서는 좋아보이는 편입니다. 단지 pc버전의 경우 너무 작아보여서 가독성이 떨어진다는 지적이 있습니다. 오늘은 FastBoot 스킨의 폰트크기를 일괄 적용하여 크게 키워보는 작업을 하겠습니다. 티스토리 블로그 관리창의 HTML 편집 페이지로 가십시요. 그다음 CSS탭을 클릭한뒤 Ctrl + F 를 눌러 검색창을 띠우고 post-body-font-size 라고 입력합니다. 주의해야 할 점은 HTML탭이 아니라 CSS탭이라는 점입니다. 메모장에 붙여넣기 해놓고 드래그한뒤 찿기창에 Ctrl + V 하시면 좀 쉽습니다. 그러면 해당 소스코드가 있는 곳이 찿아지는데 기본..