본문 바로가기

티스토리8

티스토리 링크 버튼 만들기 (CSS 버튼 만들기 사이트 활용) 티스토리에 작성한 글을 보면 링크 버튼이 있는 경우를 보셨을 겁니다. 이번에 저도 제 티스토리 링크 버튼을 만들어 보려고 합니다. 결과물 먼저 보여드리고 시작하겠습니다. 만약 결과물이 원하는 내용이라면 천천히 따라 읽어보면서 적용해보세요! 그렇게 어렵지 않습니다. 그럼 바로 시작하겠습니다. 티스토리 링크 버튼 만들기 1) CSS 코드 만들기 CSS Button Generator 사이트에 접속 디자인 선택 CSS 코드 얻기 사이트에 접속하면 위와 같은 화면이 나옵니다. 좌측의 원하는 모양의 버튼 디자인을 선택합니다. 우측에 텍스트, 사이즈, 버튼 경계 등 세부적인 요소를 조정합니다. 버튼 디자인이 결정되면 버튼을 누르거나 버튼 아래 Get Code를 클릭합니다. 그러면 우측에 CSS 코드가 나옵니다. CS.. 2023. 8. 11.
티스토리 소제목 꾸미기 (한번만 적용하면 끝!) 티스토리 글을 작성할 때 소제목으로 구분하면 가독성을 높이는데 도움이 됩니다. 그래서 오늘은 소제목 꾸미기 내용을 정리합니다. 한번만 적용하면 스킨을 바꾸거나 하기 전까지 한동안 신경쓸 필요가 없으니 이번 기회에 소제목 꾸미기 도전해보시길 바랍니다. 그럼 소제목 꾸미기 바로 시작해보겠습니다. 소제목 서식으로 작성했을 때 문제점 처음에는 소제목을 서식으로 저장해서 사용했는데, 이렇게 하다보니 2가지 문제가 있었습니다. 첫 번째 문제는 서식으로 적용하면 글마다 적용해야 하기 때문에 디자인이 바뀌거나 할 때 모든 글에 일일이 바꿔줘야 한다는 점입니다. 이거 굉장히 비효율적입니다. 저도 이제 글을 10개 정도 작성했는데.. 이 전에 작성한 글의 소제목 서식을 바꾸기가 너무 힘들어서 그냥 앞으로 쓰는 글에만 적용.. 2023. 8. 6.
티스토리 #1 스킨 댓글, 태그, 하단 푸터 영역 숨기기 #1 스킨 헤더 영역 숨기기에 이어 푸터 영역을 보이지 않게 설정하려고 합니다. #1 스킨 푸터 영역 숨기기 #1 스킨 푸터 영역을 안보이게 하는 방법은 다음과 같습니다. 스킨편집 > HTML 편집 > CSS 아래의 영역에 display:none; 추가 [수정전] [수정후] 수정 전에는 공지사항, 최근글, 방문자수, 달력 등 여러가지가 표시되었는데, 수정 후에 댓글과 태그라인만 남아있는 것을 볼 수 있습니다. 댓글과 태그라인도 숨기기 댓글과 태그 라인 숨기려면 아래 영역에 display:none; 을 추가하면 됩니다. [수정후] 하단 영역을 보면 공감 버튼을 제외하고 보이지 않는 것을 볼 수 있습니다. 이렇게 수정하면 컨텐츠만 보이기 때문에 글을 보는 사람이 더 집중하는 효과가 있을 것 같습니다. 이상 .. 2023. 8. 6.
티스토리 #1 스킨 헤더 영역 숨기기 티스토리 #1 스킨으로 변경하고 나니 스크롤을 내릴 때마다 따라 내려오는 헤더 영역이 눈에 거슬립니다. 특히 모바일에서 화면은 적은데 저렇게 일부 영역을 차지하면 보는 사람 입장에서 짜증이 날 것 같다는 생각입니다. 비슷한 이유로 구글 앵커 광고를 싫어하는 사람들이 있죠. 그래서 오늘은 헤더 부분이 보이지 않도록 설정하려고 합니다. 그럼 바로 시작할께요! #1 스킨 헤더 안보이게 하기 #1 스킨 헤더 영역을 안보이게 하는 방법은 다음과 같습니다. 스킨편집 > HTML 편집 > CSS 아래의 4군데 영역에 display:none; 추가 원래 4군데 영역에는 display:none; 이라는 속성값이 없는데, 혼동하지 않도록 수정 후의 모습을 캡쳐해서 올립니다. 위의 라인 번호 참고하셔서 똑같이 수정하면 더 .. 2023. 8. 6.