티스토리 45 티스토리 스킨 공유 합니다. 티스토리 기본스킨인 북클럽 스킨을 기본으로 수정하여 만든 스킨입니다. 기본 설정 스킨옵션으로 블로그 스타일을 라이트와 다크모드를 선택할 수 있습니다. '컬러모드 자동전환'을 켜두면 라이트 모드에서 PC 테마를 다크 테마를 사용할 경우 자동으로 다크 모드를 전환합니다. 다크모드를 사용할 경우 라이트 모드 자동전환은 지원하지 않습니다. 사이드바 위치 왼쪽, 오른쪽 또는 없음으로 설정하여 오른쪽에 숨겨 두고 사용할 수 있습니다. 로딩화면 기능을 사용할 수 있는데 실제 로딩을 기다리지는 않고 3초 동안만 로딩 메시지를 보여주고 자동으로 종료가 됩니다. 이는 불필요하게 로딩이 길어지는 경우가 있는데 완전히 로딩이 되지 않더라도 기다리는 시간을 줄이기 위해서입니다. 이미지 페이드인 기능은 블로그에 올린 사진이 투명.. 블로그&인터넷/티스토리 2022. 12. 31. (18) 티스토리 블로그 주소 뒤에 #gsc.tab=0 제거하기 애드센스의 검색엔진 서비스를 이용을 하면 블로그 벗어나지 않더라도 검색바를 이용하여 구글 검색이 가능하여 블로그 내에 검색 기능이 있어도 구글 검색엔진을 추가적으로 사용을 하게 되는데 이로 인하여 #gsc.tab=0 추가적으로 주소 뒤에 붙게 됩니다. 사이드바에 애드센스 검색 바를 설치하니 블로그 주소 뒤에 #gsc.tab=0 추가적으로 생성이 되었는데 이로 인하여 발생하는 장단점을 확인할 수는 없지만 원하지 않은 주소가 생성되었으니 왠지 모를 불편함이 생겨 제거를 하고 싶으면 애드센스 에서 검색엔진 설정을 변경해 줘야 합니다. 애드센스에서 광고 > 광고 단위 기준 메뉴에서 해당 검색엔진의 연필 아이콘을 선택하고 편집 페이지로 이동을 합니다. 편집기에서 왼쪽 메뉴 중 '검색 결과 기능'을 선택하고 하위 .. 블로그&인터넷/티스토리 2022. 10. 29. 티스토리 블로그 공감 버튼 이동하기 티스토리 게시물을 작성하면 게시물 하단에 공감 밑 공유, 신고 버튼과 함께 설정에 따라 저작권 관련 아이콘이 생기는데 티스토리 블로그는 스킨에 관계없이 자동으로 생성되는 것으로 알고 있습니다. 위치나 여백 등이 마음에 들지 않아 수정을 하려고 해도 자동으로 적용이 되었기에 HTML, CSS 아무리 찾아봐도 관련 속성들을 찾을 수가 없지만 사용자가 속성을 추가적으로 적용을 하여 지우거나 위치 등을 변경할 수가 있습니다. 글 내용은 수정한 북클럽을 기반으로 하여 작성하였기에 스킨에 따라 내용이 상이할 수 있습니다. 공감 버튼을 확인해 보면 container_postbtn를 사용하는 것을 알 수 있는데 이는 저작권 관련 아이콘과 함께 DIV에 같이 묶여 있어 기본 위치인 페이지 하단이 아닌 다른 곳으로 이동을.. 블로그&인터넷/티스토리 2022. 10. 8. 티스토리 사이드바 카테고리 접기 티스토리 블로그 스킨 중 일부 스킨은 사이드바의 카테고리 항목이 하위 카테고리까지 모두 노출이 되도록 펼침 상태로 설정이 되어있는데 목록을 바로 확인할 수 있어 클릭을 유도할 수는 있지만 운영기간이 늘어나면서 목록도 늘어나게 되고 많은 공간을 차지하게 되는데 스킨 편집에서 치환자를 변경하여 주면 접힌 카테고리로 변경이 가능합니다. 오랜 기간 운영도 하였고 잡 블로그이다 보니 이것저것 목록만 계속 늘어나 한 화면을 가득 채우는 지경까지 이렀네요. 치환자 수정을 위해서는 블로그 관리 모드에서 꾸미기 > 스킨편집 > Html 편집을 선택하여 수정할 수 있습니다. HTML 편집기에서 'Ctrl + F' 단축키를 이용하여 '_category_list_' 검색하여 카테고리 치환자를 찾는데 검색 단축키는 브라우저의 .. 블로그&인터넷/티스토리 2022. 9. 22. 티스토리 블로그 섬네일 링크, 이전 글 넣기 플러그인 티스토리 문서 작성 중 참고로 이전 글의 링크가 필요할 경우 이전 작성한 글의 링크 주소를 일일이 찾아서 넣는 불편함 없이 플러그인을 이용하여 간단하게 이전 글 링크를 가져올 수 있습니다. 텍스트 링크를 엔터키 한 번으로 간편하게 대표 이미지를 포함하여 타이틀 요약내용까지 자동을 섬네일 링크 를 만들 수 있습니다. 이전 글 넣기 이전 글 넣기 기능은 일단 플러그인 기능을 활성화되어 있어야지만 글 작성 중에 본문에 쉽게 추가를 할 수가 있습니다. 스마트 에디터 상단에 글 작성 중에 간단하게 적용이 가능한 메뉴들이 있는데 이중 오른쪽에 있는 점 세게 더보기를 선택하고 더보기 메뉴 중에서 '플러그인'을 선택하고 '이전 발행 글 넣기'를 선택하면 플러그인에서 설정한 대로 링크가 삽입이 됩니다. 최신 글부터 작성.. 블로그&인터넷/티스토리 2022. 6. 16. 구글 웹폰트 적용하는 방법 티스토리 블로그에 폰트를 업로드하지 않고 웹폰트를 이용하여 내 블로그에 바로 폰트를 적용할 수 있습니다. 무료 웹폰트를 제공하는 Goole Fonts : https://fonts.google.com/?subset=korean 사이트에 접속하여 많은 폰트 중에 적용할 폰트를 선택합니다. 폰트를 선택하면 여러 미리보기가 나오는데 그중 'Styles' 항목에서 굵기 별로 미리보기가 있는데 해당 폰트 오른쪽에 '+Select this style' 선택합니다. 오른쪽에 설정 창이 열리면 를 '@import'로 변경하고 아래 두개 박스 내용을 복사해서 CSS 추가하여주면 됩니다. 웹폰트를 선택하였다면 블로그 관리로 가서 '꾸미기 → 스킨 편집 → html 편집 → CSS'를 선택하고 폰트 변경합니다. CSS 편집에.. 블로그&인터넷/CSS 2022. 4. 12. 티스토리 블로그 작성글 발행 오류 블로그 운영 중 글을 작성하고 발행을 하면 발행 단계에서 오류로 인해 발행 및 저장이 되지 않는 경우가 있습니다. 글 완성하고 완료 버튼을 클릭하고 저장을 하면 '게시글을 작성하는데 실했습니다. 잠시 후 다시 시도해주세요'라는 에러 메시지가 나오면 저장이 되지 않습니다. 이 때는 임시저장도 안 됐던 거 같은데 이미지를 보면 게시글 정보에 섬네일이 표현되지 않고 있는데 이렇게 되면 저장이 가능한 경우도 간혹 있지만 거의 저장이 되지 않는 상태가 됩니다. 섬네일에 문제가 있으니 섬네일을 지워 주면 되는데 저는 대표 섬네일을 숨겨두기 때문에 HTML 지워야 하지만 숨김 처리를 하지 않았다면 모드 전환 없이 1번 사진 혹은 대표 사진을 지워줍니다. 따로 대표 지정을 하지 않거나 첫 번째 이미지를 대표로 사용해서.. 블로그&인터넷/티스토리 2022. 3. 31. 티스토리 이미지 숨기기, 세로 이미지 나란히 넣기 블로그에서 사진을 사용할 때 섬네일용으로 사용하는 이미지 숨기는 방법과 세로로 된 사진을 나란히 나오게 하는 방법입니다. 1. 티스토리 대표 이미지 숨기기 블로그에서 섬네일용 대표 이미지를 본문 내용에서는 노출되지 않기 위해서 제가 사용하는 방법입니다. 사진을 등록한 뒤 상단 메뉴 중 모드 메뉴에서 "HTML" 모드를 선택합니다. 검색이나 타 사이트에서 섬네일을 적용할 때 첫 번째 사진을 섬네일로 등록되는 경우가 많은 것 같으니 이미지 파일이 많을 경우 가능하면 첫 번째로 대표 이미지를 업로드하는 것이 좋아 보입니다. HTML 모드에서 이미지 치환자를 찾아 태그를 태그로 변경하고 display:none 속성도 추가해 줍니다. [＃＃_Image|kage@322Mw/btrlfdFytfK/dFyxtGu7aSV.. 블로그&인터넷/티스토리 2021. 11. 16. CSS 텍스트 첫글, 첫줄 강조하기 블로그나 사이트를 운영하면서 제목이나 본문의 첫 글자 또는 첫 줄에 별도의 속성을 부여하여 강조나 디자인적인 효과를 낼 수 있는데요. 웹문서를 작성하면서 해당 문서의 글 색상, 크기 등의 설정을 변경하여 문서 특성을 살릴 수도 있지만 CSS 적용하여 일괄적으로 효과 적용이 가능합니다. :first-line { 속성값 } 글 중에서 첫 글에 별도로 속성을 부여할 수 있습니다. 티스토리의 경우 본문 첫 글자를 강조한 싶으면 스킨마다 다르지만 본문 내용 치환자를 감싸는 태그 클래스가 article일 경우 CSS에 .article:first-line { 속성값 }을 적용하여 첫 글을 강조할 수 있습니다. 첫글 강조하기 첫글 강조하기 보통 제목이나 본문 첫 글에 강조를 위한 폰트 크기와 색상을 변경하는 방식으로 .. 블로그&인터넷/CSS 2018. 12. 31. 티스토리 공유 버튼 만들기 티스토리에서 제공하는 포트폴리오 스킨에 SNS 글 보내기 코드를 이용하여 사용 중인 스킨에 적용해 봤습니다. 이미지 처럼 페이스북, 트위터, 카카오 스토리, 카카오톡 공유버튼 만들기가 가능합니다. 공유 버튼 기능에 필수적으로 들어가는 코드들인듯한 것만 추려 봤는데, 적용하는 방법으로는 두 가지가 있는데 기본적으로 스킨의 각 위치에 삽입하는 방법과 티스토리 플러그인을 이용하는 방법입니다. 스킨을 수정하여 적용하는 방법 외부 문서를 불러오는 링크 태그는 HTML 사이에 넣어줍니다. icomoon.css의 역할은 각각의 아이콘을 만들어 주는데 신기하게 아이콘 이미지가 아닌 코드를 이용하여 만들어 표현합니다. 페이스북 트위터 카카오스토리 카카오톡 본문을 공유 버튼을 노출할 코드로 HTML 문서 내에 치환자를 찾.. 블로그&인터넷/티스토리 2018. 12. 30. 티스토리 Portfolio 스킨 SNS 공유버튼 만들기 티스토리가 제공하는 방응형 포트폴리오 스킨 본문 하단에 SNS 공유 버튼을 타 사이트나 블로그의 등에서 소스코드를 받아 복사할 필요 없이 HTML 편집만 조금 해주면 생성할 수 있습니다. 관리 > 꾸미기 > 스킨 편집 모드에서 상단 오른쪽 프리뷰 이미지 아래 'HTML 편집'을 눌러 코드를 수정할 수 있습니다. HTML 편집 모드에서 'Ctrl + F' 기능으로 'list_share' 문구를 이용하여 찾을 수 있으며 449 라인부터 454 라인까지 공유 코드로 주석 처리되어 있어 기본적으로는 노출이 되지 않습니다. 페이스북 트위터 카카오스토리 카카오톡 처리가 되면 코드가 노출이 되지 않기 때문에 웹상에 노출을 위해서는 제거를 해줘야 합니다. 붙은 것도 지워 주면 코드가 활성화되면서 속성 고유의 색으로 바.. 블로그&인터넷/티스토리 2018. 12. 28. 티스토리 사이드바 인기글 목록 추가하기 티스토리 블로그 사이드바에 조회 수 높은 순으로 글 목록을 적용할 수 있는 치환자가 추가되었습니다. 적용 방식은 최신 글 목록과 동일한 방식으로 전용 치환자를 사용하여 줍니다. : 인기글을 반복 출력합니다 : 글 주소 : 글 제목 : 글 댓글 갯수 : 작성자 이름 (*팀블로그용 치환자) : 글 발행시간 : 대표 이미지가 있는 경우 치환 : 대표 이미지 : 카테고리 이름 : 카테고리 리스트 url 인기글에 사용할 수 있는 치환자 목록입니다. 썸네일 치환자가 추가되면서 인기글에서도 썸네일 노출이 가능합니다. 이 블로그 인기글 기본 제공되는 샘플 코드로 ... 태그 사이에 추가하여 주면 사이드바에 인기글 목록이 추가 되게 됩니다. 스타일 코드 샘플은 제공을 하지 않기 때문에 직접 짜야 하는데 사용중인 최신 글.. 블로그&인터넷/티스토리 2018. 12. 21. (2) 티스토리 블로그 사이드바 썸네일 치환자 적용 티스토리가 개편을 하면서 다양한 스킨과 추가적으로 사용가는 한 치환자들이 많이 추가되었는데요. 요즘은 사이드바를 사용하지 않는 1단 형 모바일 최적화된 신규 스킨들이 많이 사용하는데 개인적으로 PC 환경에서는 사이드바를 추구하는 편이라 고수하고 있는데 치환자를 지원하지 않을 때에도 스크립트를 추가하는 방법 등으로 적용은 가능하였지만 자체적으로 최근 글 목록에 섬네일을 사용할 수 있는 치환자가 추가되어 간편하게 적용을 할 수 있게 되었네요. 최근에 올라온 글 [＃＃_rctps_rep_title_＃＃] [＃＃_rctps_rep_rp_cnt_＃＃] [＃＃_rctps_rep_category_＃＃] 매뉴얼에 있는 기본 적용 HTML 코드로 사이드바에서 최근 등록된 글 목록을 보여주는 기능을 하는 기존 코드에 10.. 블로그&인터넷/티스토리 2018. 12. 14. (2) 티스토리 애드센스 광고 언어 설정 구글 애드센스를 적용 중인 블로그를 운영하면서 영어로 된 광고가 간간이 나오는데 추가 코드를 삽입하여 한글로 된 광고가 노출되도록 설정해줄 수 있습니다. 두 개의 광고가 모두 영어로 나오고 있는데 방문자로 하여금 관심을 끌기 힘들어 보이고 영어를 잘 아는 한국인이라고 하여 저 광고가 관심이 생길까라는 의문이 듭니다. 기본적인 애드센스 코드에 다른 내용은 손댈 필요 없이'data-language=”ko” '만 추가해 주면 언어 설정을 한국어로 지정할 수 있는데 코드를 적용 후에도 한글 우선 적용 방식으로 영어 광고가 비중이 줄어들 뿐?? 차단되어 전혀 나오지 않는 것은 아니었습니다. 포스팅 주제와도 많은 관련이 있겠지만 체험상 인지도 낮은 블로그에서 영어된 광고가 많이 나오는듯하고 양질의 콘텐츠가 많은 블.. 블로그&인터넷/티스토리 2018. 8. 6. 티스토리 블로그 애드센스 플러그인 사용할 때 주의할 점 티스토리는 애드센스 광고 코드를 삽입하기 편하게 플러그인을 제공하고 있습니다. 이는 스킨에 직접 적용하지 않기 때문에 스킨을 잘못 건드리는 일이 없을뿐더러 스킨을 변경하여도 자동적으로 적용이 되는 등의 적용법을 잘 모르더라도 어려움 없이 사용할 수 있는 편리함을 주는데요. 반응형 코드를 적용할 때 지동으로 적용하지 않고 사이즈별로 크기를 지정하는 스타일 코드를 같이 삽입 하였을 때 코드가 RSS 피드에 그대로 노출이 되는 문제 발생합니다. RSS 받아보면 내용보다는 상단 플러그인에 적용된 미디어 쿼리가 노출되어 본문은 전혀 보여주지 못하고 오른쪽 앱의 경우에는 일부 애드센스 코드까지 포함되어 보이고 있네요. 왼쪽 이미지를 보면 반응형 코드를 모두 제거하고 광고 코드만을 적용하였는데도 일부 코드가 노출되고.. 블로그&인터넷/티스토리 2018. 7. 31. (1) 이전 123 다음
