본문 바로가기

분류 전체보기42

티스토리 블로그_사이드바 고정 방법_스크롤 반응형 사이드바_CSS 블로거들은 사이드바에 방문자들이 봐주었으면 하는 내용을 선별하여 집어넣습니다. 카테고리, 배너 등이 들어가죠. 그런데 사이드바는 글을 읽어 나가면서 스크롤해서 내려가면 안 보이기 마련입니다. 개인적으로 카테고리, 배너와 같은 사이드바의 내용을 계속해서 노출하는 것은 중요한 전략이라고 생각합니다. 내 블로그에 그와 관련된 다른 정보가 있음을 어필하여 페이지 이탈을 최대한 막을 수 있죠. 사이드바가 스크롤이 내려가도 계속 노출되어 있을 수 있도록, 스크롤 반응형으로 만들어보도록 하겠습니다. 목차 CSS에 코드 넣기 아래의 코드를 복사해 가세요. /* 사이드바 고정 */ #aside { position: sticky; position: -webkit-sticky; top: -60px; } "스킨 편집" - ".. 2023. 10. 22.
티스토리 블로그_사이드바에 배너 넣기 목차 1. 배너로 사용할 이미지 파일 만들기 먼저 배너로 사용할 이미지 파일이 필요합니다. 저는 포토 스케이프 X를 이용하여 아래와 같은 이미지를 제작해 보았습니다. 가로 230 * 세로 101 px로 제작하였습니다. 가로 사이즈는 사용 중인 스킨의 사이드바 가로 사이즈에 맞춰서 제작하시면 됩니다. (사용 중이신 스킨 사이드바 가로 사이즈를 모르신다면 아래 1-2의 글을 참고하세요.) 세로 사이즈는 본인의 취향껏 넣으시면 됩니다. 1-1. PhotoScape X 포토 스케이프 X는 무료 툴이고, 윈도우뿐만 아니라 맥 버전의 프로그램도 배포하고 있습니다. 다른 이미지 생성 툴 쓰시는 게 있다면 그걸로 디자인을 하셔도 되고, 저처럼 포토 스케이프를 사용하는 것도 좋습니다. PhotoScape X 다운로드 바.. 2023. 10. 22.
양꼬치_유래, 제조 과정, 향신료, 양고기 부위, 어울리는 술, 어울리는 맥주 목차 1. 양꼬치란? 양꼬치는 양고기를 사용하여 만든 중국 전통 요리입니다. "양"은 양고기를, "꼬치"는 나무나 금속 등으로 만든 꿰어 굽는 방식을 의미합니다. 양고기의 얇은 조각을 나무 꼬챙이에 꿰어 구워내는 형태로 준비됩니다. 양꼬치는 특유의 향신료와 소스로 맛을 낸다는 점에서 독특합니다. 1-1. 양꼬치의 유래 양꼬치는 중국 북서부 지역인 신장 웨이우르 자치구에서 시작되었습니다. 신장 지역은 양 축사가 많이 있어 양고기 생산이 풍부하며, 이로 인해 양고기 요리가 발전하게 되었습니다. 2. 양꼬치의 제조 과정 신선한 양고기를 선택하고 적절한 크기로 잘라서 꼬챙이에 꿰어줍니다. 숯불이나 가스 그릴 위에 올려 꼬치를 구워줍니다. 양고기가 완전히 익을 때까지 여러 번 뒤집어가며 조리합니다. 양고기는 고소.. 2023. 10. 21.
티스토리 블로그_구글 서치 콘솔 블로그 삭제 방법 수익형 티스토리 블로그를 운영하다 보면 블로그를 여러 개 만들게 됩니다. 이런저런 시도도 하게 되고, 어떤 블로그는 폐쇄를 하기도 하죠. 여러 개의 사이트를 운영하더라도 구글 서치 콘솔 아이디는 한 개로 이용합니다. 구글 서치 콘솔에 이미 폐쇄한 블로그의 리스트가 남아 있는 건 은근히 거슬리죠. 구글 서치 콘솔에서 폐쇄한 사이트를 지우는 법을 알아보겠습니다. 구글 서치 콘솔에서 블로그 삭제하기 구글 서치 콘솔에 로그인합니다. 구글 서치 콘솔 바로가기 Google Search Console Search Console 도구와 보고서를 사용하면 사이트의 검색 트래픽 및 실적을 측정하고, 문제를 해결하며, Google 검색결과에서 사이트가 돋보이게 할 수 있습니다. search.google.com 삭제하고자 하.. 2023. 10. 21.
티스토리 블로그_접은글 더보기 버튼 꾸미기_CSS 티스토리에서 기본으로 제공하는 접은글은 미적으로도 예쁘지 않고 가독성도 떨어지죠. 본문과 접은글 속 내용의 경계도 불분명하죠. 오늘은 접은글을 커스터마이징하여 글의 가독성을 높이는 작업을 해보겠습니다. 완성을 하고 나면 아래와 같은 접은글 디자인이 나올 것입니다. 더보기 접은글 예시입니다. 접은글 더보기 버튼 꾸미기는 CSS 코드만 붙이면 되는 작업으로 정말 간단합니다! 목차 1. CSS 코드 복사하기 아래의 CSS 코드를 복사하세요. /* 접은글 더보기 꾸미기 */ .btn-toggle-moreless, .btn_more, .btn_less { background: #1b9a1a; /* 버튼 배경색 */ } .btn-toggle-moreless, .btn_more, .btn_less { z-index:.. 2023. 10. 18.

티스토리툴바