FastBoot 스킨은 기본 폰트가 돋움으로 가독성도 조금 뒤쳐지는 듯 느껴지는데 모바일에서는 더욱더 그러합니다. 예를 들자면 다음 포털에서 뉴스를 읽다 제 블로그로 들어가보면 그 차이가 확연히 느껴집니다. 마치 클리어 타입의 다음 폰트를 보다 클리어 타입이 아닌 제 블로그의 폰트를 보는 듯한 느낌입니다. 이번 포스팅에서는 티스토리 FastBoot 스킨에서 기본 폰트인 돋움을 가독성 좋은 구글 무료 폰트로 바꾸어 보도록 하겠습니다. 먼저 구글 폰트로 들어갑니다. - 링크 : https://fonts.google.com/ 언어를 한국으로 바꾸고 폰트를 살펴보도록 하겠습니다. 이제 한글을 지원하는 폰트들만 보여주는데 저는 모바일에서 가독성이 좋은 폰트를 구하고 있는 지라 가장 가독성이 좋아 보이는 폰트로 N..
FastBoot 스킨에서 본문의 폰트크기와 줄간격은 html 편집의 CSS에서, 자간은 html 탭에서 하게 됩니다. 하나씩 설명하여 드리겠습니다. 1. 본문 폰트 크기 수정 CSS탭에서 "@post-body-font-size" 가 써있는 부분을 찿아간 뒤 아래의 그림처럼 나오는 부분에서 폰트 사이즈를 원하는 사이즈로 바꾸어 주면 됩니다. 바꾸신 뒤 저장까지 눌러 주셔야 변경된 내용이 적용됩니다. 2. 본문 줄간격 수정 CSS탭에서 line-height 값을 변경해주면 되는데 주의할 점은 px과 같은 절대값을 주게 되면 폰트 크기 변경시에 줄이 겹쳐지거나 하는 부자연스러운 외관을 보여줄 수도 있게 됩니다. 1, 1.5, 2 등과 같은 상대값을 사용해야 합니다. 만약, line-height가 1이라면 폰트..
이번 티스토리측의 SSL보안 적용이후 사이드바 메뉴중의 최신글 목록의 아이콘이 사라지는 분들이 계실 수 있을것 같아 포스팅합니다. 저의 경우 보시는 바와 같이 FastBoot스킨을 사용중인데요. 초록색 안전함 표시를 얻기위해 모든 적용을 마치고 html편집으로 들어가서 우선적으로 모든 http 링크들을 https 링크로 교체했습니다. 그랬더니 구글크롬에서 안전함 초록색 표시를 얻을 수는 있었지만 사이드바의 최신댓글 아이콘이 깨져나오거나 사라지더군요. 사실 이 깨짐현상은 티스토리측의 이미지파일 주소가 변경된것이 스킨에 제대로 반영되지 않아 일어나는 일이었습니다. 아이콘이 깨지거나 사라지시는 분들은 html편집창으로 들어가셔서 사이드바 부분중 최근 포스트모듈중 이미지 파일의 링크부분을 찿습니다. 이부분중 을..
FastBoot스킨의 가장 하단부 색상만 변경해보도록 하겠습니다. 상단부의 바와 블로그 제목 등의 색상을 변경했는데 하단부는 그냥 놔두자니 뭔가 언밸런스한게 이상합니다. 상단부위들 색상바꾸는 방법은 이전에 포스팅했으니 참조하시기 바랍니다. FastBoot스킨 상단 고정바 색상변경 FastBoot 스킨 최상단 블로그이름 색깔 바꾸기 화살표가 가리키는 저곳의 색상만 변경하기 위해서는 티스토리 HTML 편집페이지의 CSS탭으로 가서 Ctrl + F 검색창이 나오면 footer 라고 치고 검색하세요. 제일 처음으로 나오는 footer 바로 아래에 하단부 색상정보코드가 있습니다. 이제 마지막으로 background-color:#434a54; 라고 써있는 부분에서 뒤의 여섯자리 코드기호를 자신이 원하는 색상코드로 ..
이틀동안 전혀 포스팅을 하지 못했는데 승인이 난후 포스팅과 광고설정등에만 신경쓰다보니 댓글창이 없다는걸 엊그제서야 알았습니다. 성격이 무뎌서 그랬는지 하여튼 그랬습니다. 구글링을 해도 똑같은 증상을 호소하는 포스팅을 하나도 찿을 수 없었습니다. 수십번 확인한 티스토리 설정에는 분명히 댓글펼침으로 설정되어 있었고 다른 모든 설정들도 이 이유를 설명할 만한 것이 없었습니다. 블로그를 새로 한개 만들어서 FastBoot 스킨을 입힌뒤 댓글창이 잘 나오는걸 보고 HTML창과 CSS창 시작부터 종료지점까지 모든 코드를 비교했습니다. 그렇지만 전혀 알수 없었습니다. 특이점이 없었다. 나중엔 의심가는 부분은 아예 그림판에 붙여넣고 비교해보기도 했습니다. 이방법은 포기하고 스킨을 백업한뒤 FastBoot 스킨을 재설치..
티스토리 블로그를 처음 운영하기 시작하면 소스코드를 참으로 많이 만줘 줘야 하는데요, 이러다보면 뭐 하나만 잘못 쓰던가 빠트려도 당장 뒤죽박죽이 되버리곤 하죠. 저의 경우에는 어느날 갑자기 사이드 바가 없어져 버렸더군요. 뭐지 ? 하면서 뒤적뒤적 하니 본문 최하단 아래쪽으로 쭉내려가서 혼자 덩그러니 있더군요. 뭔가 태그가 엉켰을꺼 같은 생각에 티스토리 HTML 편집창을 열어놓고 위부터 훑어보다 보니 이상한 부분이 눈에 띠더군요. 태그트레일 이라고 써있는 부분 바로 위에 이 부분입니다. 상대태그가 없어 저렇게 빨간글씨로 에러를 표시하고 있더군요. 짚히는게 있었습니다. 태그트레일 부분은 얼마전에 카테고리 목록출력하는 페이지 상단에 광고를 넣기 위해 들락날락했던 부분이었던 거죠. 소스를 이리저리 손보면서 그때..
사이드바에 있는 카테고리를 누르면 카테고리들이 목록으로 리스트화되어 있는 페이지로 넘어가는데 이때 그 목록페이지에도 광고를 실어야 겠습니다. 붉은색 굵은 줄이 있는 저부분에 반응형 광고 한개를 넣어 보겠습니다. 일단 애드센스로 가서 반응형광고코드 한개를 신규로 받아서 복사해 옵니다. 많이 하셔서 이 단계는 코드를 받는 단계는 생략하겠습니다. 티스토리 스킨편집버튼을 누른다음 HTML편집 탭을 누르고 Ctrl + F 를 눌러 검색창을 띠운후 clearfix 라고 치고 엔터를 칩니다. 그러면 위와 같은 부분에서 해당문구가 나오는데 주석태그로 추천광고 위치라고 써진 박스부분에 아까 애드센스에서 생성한뒤 복사해온 코드를 집어넣습니다. 이제 저장을 하고 나온뒤 블로그 페이지를 새로고침해서 보면 카테고리 목록페이지 ..
아래 그림과 같은 위치에 광고를 넣어보도록 하겠습니다. 사실 저 위치는 거의 반정도는 항상 공백상태로 있는 공간낭비가 심한곳같아 보여서 넣어도 상관 없을것 같습니다. 아래에 텍스트 파일을 첨부하니 구글 애드센스에서 반응형광고 한개를 새로 발급받아 아이디와 광고번호를 여기에 넣습니다. 많이 해보셔서 모두 아시리라 생각하고 반응형광고 만드는 법은 생략합니다. 내광고의 광고단위로 가신다음 새광고 선택후 세가지중 첫번째 클릭후 생성버튼을 누르면 아래와 같은 새 반응형 광고코드가 나옵니다. 여기서 본인 아이디와 광고 고유번호를 복사해서 좀전에 다운로드 한 텍스트의 해당위치에 붙입니다. 애드센스 아이디와 광고 고유번호 두개 모두 붙여넣기가 잘 되었으면 저장합니다. 이제 티스토리에 메모장 전체를 복사해서 붙여넣기 하..
제 블로그 상단을 대충 손보았는데 아무래도 블로그 제목부분이 뭔가 허전하고 부조화스럽습니다. 이번 포스팅에서는 검정색인 블로그 이름을 상단바의 색과 동일하게 맞춰보도록 하겠습니다. 먼저 티스토리 관리자 화면의 스킨편집을 누른뒤 HTML편집창이 열리게 한뒤 CSS 탭으로 갑니다. 이과정은 우리가 FastBoot 스킨 상단부분을 수정하면서 항상 해왔던 과정이라 어렵지 않을 것입니다. 예상하시는 대로 다음 과정은 열린 CSS창에서 Ctrl + F를 눌러 검색창을 엽니다. 검색창에 #desktopNav 라고 칩니다. 블로그 제목색상을 바꾸기전에 주위의 글씨색들도 어차피 바꾸어야 하니 우측의 아이콘있는 메뉴들 먼저 바꾸어 보겠습니다. 첫번째 네모는블로그 제목이 들어가는 부분의 바탕색 설정이고, 두번째 네모는 블로..
티스토리 블로그를 시작한지 얼마 되지 않으신 분들이 겪는 문제중의 하나가 카테고리 한개에 여러개의 페이지들이 축적되었는데 막상 사이드 바에서 클릭하면 그냥 해당카테고리의 글들이 쭉 붙어 나온다는거죠. 일일이 스크롤해서 페이지를 다 봐야 내가 원하는페이지가 어디 있는지 보이는데다 페이지들 로딩과정에서 버벅임이 발생하고 화면출력도 미세하게 느려지는 느낌이 듭니다. 그이유는 FastBoot스킨 티에디션의 경우 기본설정이 글목록형태가 내용만 보게 되어 있어서 블로그 사용자가 설정을 직접 바꾸기 전까진 이런형태가 계속되는 것입니다. 이제 이 문제를 해결해 보도록 하겠습니다. 스킨편집을 누르면 나오는 우측 HTML편집창의 하단에 보면 기본설정이 있는데 여기서 바꾸어 주어야 합니다. 시스템 리소스를 잡아먹는거나 구독..