티스토리 스킨
해당되는 글 34건
스피드스타 스킨: 본문 제목 드래그 방지 해제
이 블로그에는 스피드스타라는 티스토리 스킨이 적용되어 있습니다. 지난달 카카오 데이터센터 화재 사건 이후 일부 기능이 작동하지 않는 문제가 발생했지만 최근 스피드스타 개발자께서 버그를 패치한 업데이트를 내놓았습니다. 스피드스타 스킨에서 글 제목에 드래그 방지 코드가 적용되어 있어 제목을 선택하여 복사할 수 없습니다. 이 점이 불편한 경우 드래그 방지 코드를 제거하여 본문 제목이 선택 가능하도록 설정할 수 있습니다. 스피드스타 스킨: 본문 제목 드래그 방지 해제 스피드스타 스킨에서 본문 제목을 선택할 수 있도록 변경하려면 스킨 편집 » 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 속성을 사용하여 텍스트 데코레이션(이 경우 밑줄)의 컬러를 변경할 수 있습..
티스토리 스피드스타 스킨에서 다크모드 전환 버튼을 상단으로 이동시키기
스피드스타 스킨에서는 다크모드로 전환하는 기능이 제공됩니다. 이 블로그에서는 눈 피로를 줄이는 데 도움이 되도록 다크모드 강제 선택 모드를 활성화했습니다. 다크모드가 부담이 되거나 마음에 들지 않으면 상단의 라이트모드-다크모드 전환 버튼을 사용하여 라이트모드로 바꿀 수 있습니다. 티스토리 스피드스타 스킨에서 다크모드 전환 버튼을 상단으로 이동시키기 스피드스타 스킨에서는 라이트모드-다크모드 전환 버튼이 글 제목 아래에 표시됩니다. 다크모드 전환 버튼을 상단으로 이동하는 것도 고려해볼 수 있습니다. 라이트모드가 활성화된 상태에서 전환 버튼을 클릭하면 다크모드가 활성화됩니다. 라이트모드-다크모드 전환 버튼을 상단에 표시하는 방법으로 크게 두 가지를 생각할 수 있습니다. HTML 편집에서 전환 버튼 관련 코드를..
티스토리 스킨: 다크모드가 강제로 표시되도록 설정했습니다
이 티스토리 블로그에 적용된 스킨에는 다크모드로 강제적으로 설정하는 옵션이 있습니다. 처음 접속하시면 다크모드로 기본적으로 표시되도록 설정했습니다. 원하시는 경우 "라이트모드"로 전환하실 수 있습니다. 티스토리 스킨: 다크모드가 강제로 표시되도록 설정했습니다 이 블로그에는 속도가 비교적 빠른 스피드스타(Speed Star)라는 스킨이 적용되어 있습니다. 스피드스타에는 티스토리 스킨 중에서는 비교적 많은 옵션을 제공합니다. 이 스킨은 다크모드도 지원하는데요. 스킨 편집에서 '강제 다크모드 선택'을 활성화했습니다. 이 때문에 처음 이 블로그에 접속하시면 '다크모드'가 기본적으로 표시됩니다. 하지만 제목 아래의 라이트모드/다크모드 전환 표시줄에서 라이트모드로 전환이 가능합니다. 시력 보호를 위해서는 '다크모드..
티스토리 스피드스타 스킨 커스텀 (자체 정리용)
이 블로그에 스피드스타 스킨을 적용한 후에 몇 가지 커스텀을 적용했습니다. 티스토리 스킨의 경우 스킨 파일을 수정하면 추후 업데이트 시 수정된 부분을 다시 적용해주어야 하는 번거로움이 있습니다. 워드프레스는 차일드 테마를 설치하여 수정하면 테마가 업데이트되어도 수정 사항이 유지되는데, 티스토리에는 이러한 기능이 없어 불편한 것 같습니다. 이 때문에 업데이트가 나와도 다시 수정 사항을 적용해야 하기 때문에 업데이트된 스킨을 설치하는 것이 엄두가 나지 않는 경우가 많은 것 같습니다. 추후 스피드스타 스킨 업데이트 시에 참조할 수 있도록 여기에 정리해보았습니다. 티스토리 스피드스타 스킨 커스텀 공감 버튼 및 구독하기 버튼 스타일 변경 다음 CSS 코드로 스타일 변경 가능. .Please2,.urlurl2{di..
티스토리 블로그 코어 웹 바이탈 개선하여 검색엔진 유입 늘리기
구글 서치 콘솔의 코어 웹 바이탈 보고서는 실제 사용 데이터(필드 데이터라고도 함)에 따라 페이지의 성능을 보여 것으로, 사이트 속도가 느릴 경우 방문자 이탈률에 심각한 영향을 미치게 되어 SEO에 불리하게 됩니다. 이 블로그의 코어 웹 바이탈 보고서를 체크해보니 다행히 모바일과 데스크톱 모두 느린 URL과 개선이 필요한 URL이 없는 것으로 나오네요. 티스토리 블로그 코어 웹 바이탈 보고서 구글의 코어 웹 바이탈 점수를 높이기 위해서는 사이트 속도 최적화가 필요합니다. 티스토리의 경우 속도와 관련하여 최종 사용자가 건드릴 수 있는 것이 제한적이어서 사이트 속도를 높이는 데 한계가 있을 수 있습니다. 사용자 입장에서는 이미지를 압축하여 이미지 크기를 줄이는 등의 노력을 할 수 있습니다. 그리고 무엇보다 ..
티스토리 스피드스타 스킨 적용(+이미지 자동 워터마크 기능 등)
이 블로그에는 미니멀스타라는 유료 티스토리 스킨이 적용되어 있었습니다. 스킨 판매자께서 스피드스타 스킨 업데이트를 보내주셔서 미니멀스타에 추가한 커스텀 코드와 CSS를 스피드스타 스킨에 적용했습니다. 별다른 이상 없이 작동하는 것 같으므로 이제부터는 스피드스타 스킨을 사용해야 할 것 같습니다. 티스토리 스킨 업데이트 vs. 워드프레스 테마 업데이트 워드프레스에서는 차일드 테마(자식 테마)를 만들어서 커스텀하면 테마가 업데이트되더라도 추가로 할 작업은 없습니다. 초기에 이러한 점을 이해하지 못한 개발자나 사용자들이 부모 테마 파일을 직접 수정하는 바람에 업데이트를 하지 못하는 문제가 발생하기도 했습니다. 자식 테마를 만들어서 제대로 작업하면 워드프레스 테마가 업데이트되더라도 문제가 발생하지 않습니다. 하지..
티스토리 미니멀스타 스킨 커스텀 (개인 정리용)
지난주 월요일에 티스토리 스킨을 미니멀스타로 변경하여 약 일주일 동안 세팅을 하였습니다. 미니멀스타는 많은 옵션을 제공하기 때문에 세부 옵션을 살펴보면서 세팅해야 하지만 저는 필수 설정을 한 후에 마음에 들지 않는 부분을 조금씩 수정했습니다. 추후에 미니멀스타 스킨이 업데이트되어 다시 수정해야 하는 경우를 대비하여 이 블로그를 커스텀하면서 수정이 필요한 부분을 정리해보았습니다. 워드프레스의 경우 차일드 테마를 만들어 작업하면 추후에 테마가 업데이트되더라도 수정 부분을 다시 추가할 필요가 없지만 티스토리의 경우 그런 시스템이 안 되어 있어 조금 불편한 것 같습니다. 티스토리 미니멀스타 스킨 커스텀 (개인 정리용) 1년 이상 무료 티스토리 스킨인 고래스킨을 사용하다 미니멀스타 스킨으로 변경했습니다. Mini..
