오디세이 7

오디세이 스킨 편집: 단락 간격 조절하기

'엔터'와 '쉬프트+엔터'를 구분하여 글쓰기 일반적으로 Word나 한글 문서를 쓸 때 줄바꿈을 하려면 '엔터'를 누릅니다. 하지만 웹, HTML 상에서 에디터로 글을 작성할 때는 단순 줄바꿈이 아닌 단락이 나뉘게 되는데요. 엔터를 치고 타이핑을 때마다 p태그가 생성되며 의 형태로 감싸 쥔 상태로 타이핑이 들어가게 됩니다. '엔터'를 누를 때마다 이와 같은 p태그가 자동으로 추가됩니다. Word나 한글 문서를 쓸 때 단락을 나누려면 의도적으로 '엔터'를 두 번 누르곤 합니다. 웹 상에서도 동일하게 '엔터'를 두 번 누르게 되면 불필요하게 가 입력이 되게 되며 SEO 상에서는 빈 단락으로 인식하여 검색 시에 좋은 점수를 받지 못하는 데 영향을 줄 수 있습니다. 티스토리 에디터에서는 '엔터'와 '쉬프트+엔터'..

Tip 2023.11.27

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

불필요한 비밀 댓글 잠그기 티스토리뿐만이 아니라 네이버 블로그, 지금은 없어진 이글루스나 싸이월드 블로그에는 비밀 댓글 기능이 있었는데요. 비교적 나중에 생긴 브런치, 해외 서비스인 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

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

포스팅 타이틀의 애매한 줄바꿈 고치기 오디세이 스킨의 기본 설정은 포스팅 타이틀이 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