티스토리 스킨 39

티스토리 오디세이 스킨에서 블로그 글 제목 글자 크기 조정하기

티스토리 공식 스킨 중 하나인 오디세이(Odyssey)를 사용하는 경우 블로그 글 제목이 길어지면 제목 일부만 표시됩니다. 특히 모바일에서 이런 현상이 두드러집니다. 제목이 긴 경우에도 모두 혹은 일정 길이 이상 표시되도록 하고 싶은 경우에는 CSS를 사용하여 제목 글자 크기를 조정하는 것을 고려할 수 있습니다. 티스토리 오디세이 스킨에서 블로그 글 제목 글자 크기 조정하기 이 티스토리 블로그에는 현재 오디세이(Odyssey)라는 스킨이 적용되어 있습니다. 깔끔한 스킨을 원하는 경우 괜찮은 선택 같습니다. 이 스킨을 사용하는 경우 블로그 제목이 긴 경우 그림과 같이 제목 일부만 표시되고 나머지는 생략 기호(...)로 표시됩니다. 특히 모바일에서 이 현상이 두드러집니다. 모바일에서 블로그 글에 접속하더라도..

티스토리 스킨을 오디세이(Odyssey)로 변경했습니다

어제 제 티스토리 블로그에서 '응답 없는 페이지' 경고가 표시되면서 블로그 글들이 제대로 로드되지 않는 현상이 발생했습니다. 이 문제는 아마도 티스토리 개발팀이 티스토리를 업데이트하면서 사용 중인 스킨과 충돌을 일으켜 발생한 것 같습니다. 스킨에 포함된 자바스크립트에서 무한 루프에 걸려서 이런 현상이 발생하는 것이 아닌가 생각되네요. 스피드스타라는 유료 스킨을 사용하고 있었는데요. 지난 10월에도 티스토리 시스템 업데이트로 갑자기 댓글 영역이 표시되지 않아서 긴급히 수정한 적이 있습니다. 티스토리 스피드스타 스킨: 댓글 영역이 표시되지 않는 문제 최근 티스토리에서 시스템을 변경하면서 스피드스타 스킨에서 댓글 영역이 표시되지 않는 문제가 나타나고 있는 것 같습니다. 댓글이 달리지 않아서 살펴보니 5일 전에..

티스토리 스피드스타 스킨: 댓글 영역이 표시되지 않는 문제

최근 티스토리에서 시스템을 변경하면서 스피드스타 스킨에서 댓글 영역이 표시되지 않는 문제가 나타나고 있는 것 같습니다. 댓글이 달리지 않아서 살펴보니 5일 전에 달린 댓글을 마지막으로 댓글이 달리지 않았네요. 그리고 댓글 창과 댓글 목록이 표시되지 않아서 관심을 가지고 살펴보지 않으면 댓글창이 사라진 것을 인지하지 못할 수 있을 것 같습니다. 티스토리 스피드스타 스킨: 댓글 영역이 표시되지 않는 문제 발생 시 임시 조치 혹시 스피드스타 스킨에서 댓글 영역이 표시되지 않고 있다면 꾸미기 » 스킨 편집 » html 편집을 클릭하여 스킨 편집 화면으로 이동합니다. 상단의 CSS 탭을 클릭하고, 맨 아래로 이동합니다. 하단에 다음과 같은 코드를 추가하여 저장하시기 바랍니다. body:not(#tt-body-gu..

티스토리 스킨: 스피드스타 (Speed Star) 업데이트

이 블로그에는 현재 유료 스킨인 스피드스타(Spped Star)가 적용되어 있습니다. 스피드스타가 3.0.0으로 업데이트되어 어제 일요일에 잠시 시간을 내어 업데이트를 적용했습니다. 티스토리 스킨: 스피드스타 (Speed Star) 3.0.0 업데이트 워드프레스의 경우 올바른 방식으로 수정을 하면 테마가 업데이트되더라도 추가적인 작업이 필요하지 않습니다. 하지만 티스토리의 경우 스킨이 업데이트되면 수정 사항을 다시 적용하고 설정도 새로 해야 하는 번거로움이 있습니다. 업데이트 파일을 메일로 전달받아서, 수정 사항을 적용한 후에, 구 버전이 설치된 상태에서 파일들을 모두 제거하고 업데이트된 스킨 파일들을 업로드하니 에러가 발생했습니다. 파일들을 덮어쓰기 한 후에 JS 파일 오류가 발생하여 스피드스타 개발자..

티스토리 스피드스타 스킨에서 유튜브 영상이 올바르게 삽입되지 않는 문제 해결

이 티스토리 블로그에는 스피드스타라는 스킨이 사용되고 있습니다. 티스토리가 업데이트되면서 어느 순간부터 이 블로그에 삽입된 유튜브 영상들이 제대로 표시되지 않고 있습니다. 유튜브가 표시될 자리에 여백이 표시되거나 줄이 표시되는 현상이 발생했습니다. 티스토리 스피드스타 스킨에서 유튜브 영상이 올바르게 삽입되지 않는 문제 해결 스피드스타 스킨에서 이 문제가 발생하는 경우 꾸미기 » 스킨 편집 »HTML 편집에서 을 검색하여 다음 CSS 코드를 추가하면 문제가 해결될 것입니다. a[href*=youtu]>.resvid { padding-bottom: 56.25%!important; } 저는 살펴보니 다음 라인이 추가되어 있어 삭제하고 위의 라인을 추가하니 문제가 해결되었습니다. .resvid {padding-..

티스토리 스피드 스타 스킨: 유튜브 영상 아래 여백 제거하기

이 티스토리 블로그에는 현재 스피드 스타(Speed Star)라는 스킨이 사용되고 있습니다. 얼마 전부터 유튜브 영상 링크로 유튜브 동영상을 삽입하면 영상 아래에 여백이 표시되는 문제가 발생했습니다. 이전에는 발생하지 않았는데, 카카오 데이터센터 화재 사건 이후에 티스토리가 업데이트되면서 이런 문제가 발생하는 것 같습니다. 티스토리 스피드 스타 스킨: 유튜브 영상 아래 여백 제거하기 스피드 스타 스킨에서 유튜브 영상 삽입 시 위의 그림과 같이 아래에 여백이 표시된다면 꾸미기 » 스킨 편집 » HTML 편집 » HTML 섹션에서 [****]을 검색하여 바로 위에 다음 코드를 추가하면 문제가 해결될 것입니다. .resvid {padding-bottom:0;} 다음 그림과 같이 추가하시면 됩니다. 스피드 스타..

스피드스타 스킨: 본문 제목 드래그 방지 해제

이 블로그에는 스피드스타라는 티스토리 스킨이 적용되어 있습니다. 지난달 카카오 데이터센터 화재 사건 이후 일부 기능이 작동하지 않는 문제가 발생했지만 최근 스피드스타 개발자께서 버그를 패치한 업데이트를 내놓았습니다. 스피드스타 스킨에서 글 제목에 드래그 방지 코드가 적용되어 있어 제목을 선택하여 복사할 수 없습니다. 이 점이 불편한 경우 드래그 방지 코드를 제거하여 본문 제목이 선택 가능하도록 설정할 수 있습니다. 스피드스타 스킨: 본문 제목 드래그 방지 해제 스피드스타 스킨에서 본문 제목을 선택할 수 있도록 변경하려면 스킨 편집 » html 편집 » HTML 탭에서 다음 코드 부분을 검색합니다. title{font-weight:700;word-break:break-all;margin:25px 0;lin..

text-decoration-color를 사용하여 링크 밑줄 색상 변경하기

링크의 밑줄 색상은 text-decoration-color라는 CSS 속성을 사용하여 설정할 수 있습니다. 그러면 밑줄 색상을 텍스트 컬러와 다르게 설정하는 것이 가능합니다. text-decoration-color를 사용하여 링크 밑줄 색상 변경하기 기본적으로 밑줄(underline) 컬러는 링크의 텍스트 컬러와 동일하게 설정됩니다. 그러나 링크의 텍스트 색상과 다르게 밑줄 색상을 변경하고 싶은 경우가 있습니다. 이를 위해 대부분 border-bottom 속성을 사용하여 밑줄과 비슷하게 설정해왔습니다. 그러나 border 방법을 사용하지 않고 직접 밑줄 색상을 변경하는 방법이 있습니다. 바로 text-decoration-color 속성을 사용하여 텍스트 데코레이션(이 경우 밑줄)의 컬러를 변경할 수 있습..

IT & 기타/CSS 2022.07.13

티스토리 스피드스타 스킨에서 다크모드 전환 버튼을 상단으로 이동시키기

스피드스타 스킨에서는 다크모드로 전환하는 기능이 제공됩니다. 이 블로그에서는 눈 피로를 줄이는 데 도움이 되도록 다크모드 강제 선택 모드를 활성화했습니다. 다크모드가 부담이 되거나 마음에 들지 않으면 상단의 라이트모드-다크모드 전환 버튼을 사용하여 라이트모드로 바꿀 수 있습니다. 티스토리 스피드스타 스킨에서 다크모드 전환 버튼을 상단으로 이동시키기 스피드스타 스킨에서는 라이트모드-다크모드 전환 버튼이 글 제목 아래에 표시됩니다. 다크모드 전환 버튼을 상단으로 이동하는 것도 고려해볼 수 있습니다. 라이트모드가 활성화된 상태에서 전환 버튼을 클릭하면 다크모드가 활성화됩니다. 라이트모드-다크모드 전환 버튼을 상단에 표시하는 방법으로 크게 두 가지를 생각할 수 있습니다. HTML 편집에서 전환 버튼 관련 코드를..

티스토리 스킨: 다크모드가 강제로 표시되도록 설정했습니다

이 티스토리 블로그에 적용된 스킨에는 다크모드로 강제적으로 설정하는 옵션이 있습니다. 처음 접속하시면 다크모드로 기본적으로 표시되도록 설정했습니다. 원하시는 경우 "라이트모드"로 전환하실 수 있습니다. 티스토리 스킨: 다크모드가 강제로 표시되도록 설정했습니다 이 블로그에는 속도가 비교적 빠른 스피드스타(Speed Star)라는 스킨이 적용되어 있습니다. 스피드스타에는 티스토리 스킨 중에서는 비교적 많은 옵션을 제공합니다. 이 스킨은 다크모드도 지원하는데요. 스킨 편집에서 '강제 다크모드 선택'을 활성화했습니다. 이 때문에 처음 이 블로그에 접속하시면 '다크모드'가 기본적으로 표시됩니다. 하지만 제목 아래의 라이트모드/다크모드 전환 표시줄에서 라이트모드로 전환이 가능합니다. 시력 보호를 위해서는 '다크모드..