티스토리 9

오디세이 스킨 편집: 댓글에 비밀글 옵션 숨기기

불필요한 비밀 댓글 잠그기 티스토리뿐만이 아니라 네이버 블로그, 지금은 없어진 이글루스나 싸이월드 블로그에는 비밀 댓글 기능이 있었는데요. 비교적 나중에 생긴 브런치, 해외 서비스인 Ghost, Tumbler, 그 외 댓글 기능을 지원하는 서비스들은 이러한 비밀 댓글 기능이 없습니다. 누군가가 댓글로 질문을 하면 작성자나 또 다른 누군가가 답변을 하고 그것을 누군가 검색해서 보게 되면서 도움이 되는 선순환 구조를 가져야 한다고 생각합니다. 가능한 비밀글 기능을 숨기고 싶어서 오디세이 스킨 편집에서 조금 수정했습니다. 비밀글 스킨 편집 👉 HTML 편집에서 위 부분을 각주 표기 감싸 넣어주면 비밀글 버튼을 숨길 수 있습니다. 티스토리 앱에서는 막을 수 없는 비밀 댓글 작성 스킨을 수정해도 모바일 티스토리 ..

Tip 2023.10.27

오디세이 스킨 편집: 포스터 타입에서 모바일 타이틀 2줄로 변경하기

모바일 환경에서 타이틀이 너무 짧게 나오는 경우 해결 스킨편집 👉 기본설정 👉 기본 목록 스타일 👉 포스터 타입을 설정하면 모바일 환경에 경우 2개의 칼럼으로 포스팅된 글이 표현되는데요. 칼럼이 2개다 보니 가로폭이 짧아 타이틀이 너무 조금 출력되는 게 마음에 걸렸습니다. 데스크톱 환경의 경우에도 타이틀이 2줄에서 말 줄임표 처리가 되는데 모바일 환경에서는 1줄에서 말줄임 처리가 되었거든요. 모바일 환경에서 타이틀 2줄로 변경하기 /* ----- media query - mobile ----- */ @media screen and (max-width: 1060px) { .article-type-common .title { max-height: 48px; margin-bottom: 7px; font-siz..

Tip 2023.10.12

내 티스토리 블로그에 광고를 내린 이유

티스토리 자체 광고로 인한 오해 어느 날 내 블로그에 원하지 않는 위치에 구글 광고가 게재되기 시작했습니다. 처음엔 스킨 HTML 편집기로 잘못 설정한 게 있는지, 광고 설정을 잘못 건드렸는지 확인해 보고 모두 꺼보기도 했지만 광고가 사라지지 않았는데요. 구글에 ‘티스토리 원하지 않는 광고’, ‘에드센스 원하지 않는 광고 위치’ 등 시간 날 때마다 검색해 보다가 우연히 티스토리 공지사항을 읽게 되었습니다. 티스토리 자체 광고가 신설 되었습니다. [안내] 6월 27일부터 티스토리 자체 광고를 신설합니다. 안녕하세요. 티스토리팀입니다. 6월 27일부터 개별 티스토리 본문 내에 티스토리 자체 광고를 신설합니다. 티스토리 자체 광고를 통한 수익은 안정적인 서비스 환경 제공을 위해 활용될 예정입 notice.ti..

Diary 2023.07.24

블로그 SEO와 성능을 위한 이미지 최적화하기

수고스럽지만 필요한 이미지 작업 2023년, 블로그를 다시 시작하다 보니 어느새 포스팅 다듬기가 취미 생활이 되었습니다. 옛날 포스팅도 다시 열어서 글을 고쳐 쓰거나 이미지를 수정하곤 합니다. 이미지 최적화는 검색 엔진 최적화(SEO)와 웹 페이지 성능 개선을 위해 필수적인 작업입니다. 이를 위해 이미지 용량을 줄이고, 이미지의 가로세로 비율을 조정하며, 대체 텍스트를 추가하는 등의 작업이 필요합니다. 여행 포스팅과 같이 이미지가 많이 들어가는 경우 자연스럽게 최적화가 필요해집니다. 찍은 사진을 보정만 해서 올리다 보면 용량이 커서 페이지로딩이 오래 걸릴 수 있습니다. 귀찮아서 마구 올릴 수도 있지만 조금이나마 SEO를 최적화하여 검색이 잘되도록 만들고 성능을 개선해서 중간에 이탈하는 독자를 줄일 수 있..

Tip 2023.03.10

오디세이 스킨 편집: 포스팅 타이틀 가로폭 수정하기

포스팅 타이틀의 애매한 줄바꿈 고치기 오디세이 스킨의 기본 설정은 포스팅 타이틀이 width: 780px; 로 잡혀있는데요. 짧은 제목은 상관없지만 긴 제목의 경우 애매한 위치에서 줄바꿈이 되는 듯한 느낌을 줍니다. 사이드바를 노출 설정을 한 영향이 있는 지도 모르겠습니다. 일단은 블로그의 전체 가로폭인 1020px로 수정했습니다. 티스토리 스킨편집 👉 HTML 편집 👉 CSS 탭에서 수정 개발자 도구로 확인해 보니 .box-meta 와 .title-article의 max-width가 780px로 잡혀 있어서 둘 다 1020px로 수정해 줍니다. .article-header .box-meta { position: absolute; bottom: 56px; width: 100%; max-width: 102..

Tip 2023.03.03

오디세이 스킨 편집: 타이틀 배경 이미지 고정(Fix) 시키기

포스팅 페이지를 보다 문득 타이틀 배경에 깔린 배경이미지를 스크롤과 상관없이 고정시키고 싶어졌습니다. 워드프레스, 엘리멘터를 사용했을 때는 Background 이미지에 Position을 Fix로 변경하면 간단히 되었는데요. 검색을 하다보니 티스토리 스킨 내에서도 간단히 해결할 수 있었습니다. 해당 셀렉터를 찾아서 background-attachment:fixed; 추가하기 .article-header에서 배경 이미지를 조정하는 부분을 확인 후 background-attachment를 추가해 주었습니다. /* area-view - 상세 페이지 */ /* article-header */ .article-header { position: absolute; top: 0; left: 50%; width: 100v..

Tip 2023.03.01

오디세이 스킨 편집: 사이드바와 본문 콘텐츠 가로폭 수정하기

블로그 광고 배너 시작하기 블로그에 광고 달기는 제대로 수익을 벌기 위해서 라기보다는 인터넷 배너 광고 절차가 어떠한 지 프로세스를 한 번은 경험해 보고 싶은 점이 컸습니다. 실제로 제대로 수익을 내기까지 몇 년이 걸렸다는 포스팅도 많이 보았고요. 수익을 위해서면 광고를 인터넷 기사 웹페이지 수준 이상으로 붙여야 하기 때문에 본문을 해치지 않는 선에서 간단하게 넣어 보고 싶었습니다. 애드센스와 애드핏 승인 받기 애드센스는 이미 몇 년 전에 설치를 했었는데요. 제대로 광고 집행까지 가지 못하고 블로그는 방치상태였습니다. 올해 제대로 블로그를 써보자는 생각으로 포스팅을 하고 애드센스 2차 승인을 요청했지만 2주가 넘도록 준비 중 상태에서 반응이 없었습니다. (2023-02-25 기준으로 준비됨 상태로 넘어가..

Tip 2023.02.26

오디세이 스킨 편집: H1 태그 바꾸기

H1 태그란? SEO 최적화를 하는데 있어서 H1은 페이지의 제목 역할을 하기 때문에 고유한 태그로써 하나만 있는 것이 좋습니다. 최근 구글에서는 H1이 꼭 하나일 필요는 없다고 이야기했지만 가능한 웹표준을 맞춰주는게 좋습니다. 아직 Bing의 경우는 H1태그는 하나만 쓰는 것으로 권장하고 있습니다. 오디세이 스킨의 H1 태그는 바꿔줄 필요가 있어보입니다. 오디세이 스킨의 H1 태그는 블로그 이름에 붙어 있습니다. Odyssey 스킨은 H1이 블로그 이름에 달려 있고 포스팅 타이틀을 H2로 되어 있는데 이러면 검색 시 H1인 블로그 이름이 포스팅 타이틀로 인지하게 됩니다. 예를 들어 '오디세이 스킨 편집' 으로 구글 검색을 하더라도 웹페이지 제목은 'minihong's lifelog'인 상태이므로 웹페이..

Tip 2023.02.24

티스토리에 구글 지도를 깔끔하게 넣는 방법

티스토리 에디터 > HTML블럭을 사용한 구글 지도 넣기 티스토리 에디터에서 구글 지도를 넣는 방법을 검색하다 보면 대부분 HTML 모드에서 직접 코드를 넣는 방법을 찾을 수 있었는데요. HTML블럭 기능을 사용해서 넣을 수 있는 방법도 있어서 정리해 보았습니다. 몇 가지 장점이 있어서 이 방법을 주로 쓰고 있습니다. Odyssey 스킨 기준이며 다른 스킨에서는 다르게 적용될 수 있습니다. 1. 구글 지도에서 원하는 위치 가져오기 원하는 위치를 검색해서 공유 > 지도 퍼가기 > HTML 복사를 클릭해 줍니다. 2. 티스토리 에디터 > 더 보기 (… ) > HTML블럭 클릭 3. 복사한 HTML 삽입하기 지도 사이즈는 취향 것 넣으시면 되는데 저는 아래와 같이 적습니다. 가로(height)는 공간을 모두 ..

Tip 2023.02.18