본문 바로가기

티스토리 꾸미기7

북클럽 스킨 커버 아이템 활용과 썸네일 정사각형 변환 티스토리로 블로그를 시작하는 많은 이들이 북클럽(Book Club) 스킨을 가장 많이 선호합니다. 그 이유는 아무래도 무료로 주어지는 직관적이고 깔끔한 레이아웃을 사용할 수 있다는 점과 사이드바 활용 등에 최적화된 스킨이기 때문입니다. 오늘은 북클럽 스킨 커버를 활용한 홈 설정에 대해 알아보겠습니다. 북클럽 스킨 커버 아이템 기본적으로 북클럽 스킨 편집으로 들어가면 ‘최신글’과 ‘커버’ 아이템 두 가지 홈 설정을 정할 수 있습니다. 특히 기본설정인 ‘최신글’ 과는 다르게 ‘커버’ 형식을 활용한다면 별도의 편집 없이도 간단하게 본인의 개성을 살린 특별한 블로그로 완성할 수 있습니다. 커버 아이템에는 기본리스트, 섬네일리스트, 뉴스레터, 커버 갤러리 1,2, 이벤트배너로 총 6가지 종류가 있고 각 기능을 홈.. 2023. 2. 9.
티스토리 목차 만드는 가장 쉬운 방법 블로그에 목차를 추가하면 전체적인 내용을 서두에서 볼 수 있다는 장점이 있다. 또한 글의 내용이 길면 길어질수록 목차 링크를 이용해서 가독성을 높여줄 수 있을 뿐만 아니라 구글이 원하는 검색 노출에도 도움이 된다. 이번 포스팅에서는 티스토리 서식을 이용한 본문 목차 추가하는 방법에 대해 소개하고자 한다. 본문 목차 추가하는 방법 서식 1. 출발 링크 서식 2. 도착 링크 목차 링크 확인하는 방법 본문 목차 추가하는 방법 예를 들어 위의 목차 제목을 누르면 해당 항목으로 이동되는 것을 확인할 수 있다. 블로그 관리 홈 > 콘텐츠 > 서식 관리로 이동해서 ‘서식 쓰기’ 버튼을 클릭한다. 총 2개의 서식을 작성해야 하는데 첫 번째는 목차 부분이고(출발 링크), 두 번째는 그 목차의 이동 위치이다(도착 링크)... 2023. 1. 6.
티스토리 글 제목 배경 이미지 수정하기 몇 가지 간단한 편집으로도 티스토리 블로그 가독성을 높여줄 수 있다. 이글에서는 다음 세 가지 사항을 적용시켜보려고 한다. 글 배경 크기 및 제목 위치 변경 배경 이미지 수정 전체 글 리스트에서 제목 부분 수정 글 배경 크기 및 제목 위치 변경 블로그관리 홈→스킨 편집→html 편집→CSS로 들어간다. 이곳에서 Ctrl + F를 눌러 .post-cover 로 검색해주고 height: 340px; 이 부분을 200px; 로 변경하고 '적용'버튼을 눌러준다. 배경 크기가 줄어들었지만, 제목 위치를 가운데로 맞추기 위해 다음과 같이 해준다. ‘CSS’에서 .post-cover .inner 를 검색해서 padding-bottom: 78px 부분을 30px; 으로 변경 후 ‘적용’ 버튼을 눌러준다. 이제 제목 위.. 2022. 12. 10.
누구나 할수있는 티스토리 날짜 없애기 편집 블로그 포스팅을 하는 데 있어서 가끔 최신 글이 아니어서 검색 결과에서 제외되는 경우가 있다. 특히 정보성 관련 글은 시간이 지나도 변하지 않는 주옥같은 글인데도 불구하고 단지 작성된 날짜 기준으로 밀려난다면 너무나 억울한 상황일 것이다. 그런 점을 미연에 방지하고자 아예 포스팅 작성 날짜를 없애는 방법에 관해서 설명하려고 한다. 포스팅 발행날짜 없애기 블로그 관리 홈→꾸미기→스킨 편집→html 편집으로 들어간다 그다음 컨트롤+F 키를 눌러 ‘##_article_rep_simple_date_##’ 이라고 검색을 한다. 그리고 다음과 같이 두 군데에 앞에는 ''룰 붙여준다. 437행은 블로그 홈 화면에 보이는 날짜에 대한 수정이고, 450행은 있는 본문에 나오는 날짜를 없애주는 편집이다. 그리고 적용을 눌.. 2022. 12. 7.
간단 티스토리 꾸미기 - 본문 드래그 색상 변경 아주 간단한 수정으로 본문 내용을 드래그했을 때 강조할 수 있는 방법이 있다. 이는 독자가 글을 읽을 때 가독성을 높여주고 무의식적으로 글씨를 드래그하면서 읽을 때 재미를 더해 준다. 드래그 색상 바꾸기 (텍스트 블록) 이는 ‘텍스트 블록’이라고도 표현하는데, 간단한 CSS 수정 방법으로도 적용이 가능하다. 티스토리 블로그 관리 홈 → 꾸미기 → 스킨 편집으로 들어가서 오른쪽 상단에 html 편집으로 들어간다. CSS를 클릭해서 아래의 코드를 다음과 같이 적당한 곳에 붙여 넣으면 끝이다. ::selection { color:black; background:#FFD8D8; } Color: 드래그 시 글자색 Background: 드래그 시 배경색 드래그했을 때 나타나는 백그라운드 색상은 네이버 색상 코드표에.. 2022. 11. 8.
티스토리 북클럽 블로그 이름 편집 티스토리 사용 시 블로그 이름은 첫인상을 안겨주기 때문에 정말 중요하다. PC 화면에서는 대부분 제목이 잘 보이는 데 반해 모바일로 보면 글씨 자체가 잘리거나 너무 크게 나와서 보기에 안 좋을 수가 있다. 하지만 이 부분도 CSS 편집을 통해서 간단하게 수정이 가능하다. 북클럽 스킨 사용 시 블로그 제목 편집 방법 위 화면에서 보이는 거와 같이 블로그 제목이 너무 크게 자리 잡고 있다. 이때 기본적으로 적용된 폰트의 서식이 마음에 들지 않을 경우 구글 검색을 통해서 (구글 웹폰트) 원하는 폰트로 수정시킬 수 있다. 블로그 관리 홈 → 꾸미기 →스킨 편집으로 들어가서 html 편집 → CSS를 눌러준다. 화면에서 보이는 거와 같이 22번째에 웹 폰트 관련된 내용들을 확인할 수 있다. 이곳에다가 앞서 구글 .. 2022. 11. 4.
스크롤바 하나로 나도 전문 블로거! 최근 HTML/CSS를 활용한 티스토리 꾸미기를 시도해보는 재미에 푹 빠져있다. 특히 다른 분들의 티스토리에 들어가면 초보인 나의 페이지와 다른 점들이 하나씩 눈에 뜨이게 발견되는데, 그 부분이 무엇인지 검색해보고 하나씩 적용해 나가는 중이다. 오늘은 글을 읽을 때 상단에 나타나는 스크롤바를 만드는 과정에 대해서 알아보려고 한다. 스크롤바 만들기 글을 읽을 때 스크롤바 기능을 추가하면 가독성을 높여준다고 한다. 사실 이 스크롤바의 정식 명칭은 프로그레스 바 (Progress bar)라고 하고 자바스크립트 효과라고 한다. 소스는 쉽게 인터넷으로 구할 수 있어서 편집하는 데에는 그리 오래 걸리진 않는다. ≪소스≫ 편집 방법 꾸미기→스킨 편집→HTML에서 사이의 공간 아무 데나 붙여 넣기만 하면 끝이다. He.. 2022. 10. 28.
반응형