티스토리css5 티스토리 글 제목 배경 이미지 수정하기 몇 가지 간단한 편집으로도 티스토리 블로그 가독성을 높여줄 수 있다. 이글에서는 다음 세 가지 사항을 적용시켜보려고 한다. 글 배경 크기 및 제목 위치 변경 배경 이미지 수정 전체 글 리스트에서 제목 부분 수정 글 배경 크기 및 제목 위치 변경 블로그관리 홈→스킨 편집→html 편집→CSS로 들어간다. 이곳에서 Ctrl + F를 눌러 .post-cover 로 검색해주고 height: 340px; 이 부분을 200px; 로 변경하고 '적용'버튼을 눌러준다. 배경 크기가 줄어들었지만, 제목 위치를 가운데로 맞추기 위해 다음과 같이 해준다. ‘CSS’에서 .post-cover .inner 를 검색해서 padding-bottom: 78px 부분을 30px; 으로 변경 후 ‘적용’ 버튼을 눌러준다. 이제 제목 위.. 2022. 12. 10. 간단 티스토리 꾸미기 - 본문 드래그 색상 변경 아주 간단한 수정으로 본문 내용을 드래그했을 때 강조할 수 있는 방법이 있다. 이는 독자가 글을 읽을 때 가독성을 높여주고 무의식적으로 글씨를 드래그하면서 읽을 때 재미를 더해 준다. 드래그 색상 바꾸기 (텍스트 블록) 이는 ‘텍스트 블록’이라고도 표현하는데, 간단한 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. 스킨 썸네일 정사각형으로 바꾸기 북클럽’(Book Club)으로 스킨을 정하고 커버 아이템을 ‘뉴스레터’ 방식으로 설정하고 나면 썸네일 화면이 약간 잘려 나오는 모양으로 화면에 보이는 것을 확인할 수 있다. 그렇다면 어떻게 하면 세로형인 썸네일 화면을 정사각형으로 만들 수 있을까? 처음에는 방법을 몰라서 썸네일에 들어가는 사진 파일을 요리조리 수정해보았지만, 항상 이런 식으로 편집하다 보니 일관성이 없어서 많이 답답해 오던 와중에 굉장히 쉽게 해결할 수 있다는 걸 알게 되었다. 그것도 너무나 쉽게. 썸네일 정사각형으로 수정 관리→스킨 편집으로 들어가서 ‘html 편집’ 버튼을 클릭해 준다. 그리고 ‘CSS’에 들어가서 컨트롤+f 키를 눌러 찾기 목록에서 .list-type-thumbnail .post-item .thum img 을 검색.. 2022. 10. 27. 이전 1 다음 반응형
