티스토리 스킨 수정

해당되는 글 8건

IT & 기타/티스토리 2020.04.03. 00:18 (6)

티스토리 매거진 스킨: 본문 글자 크기 변경하는 방법

이 블로그에는 현재 가장 최근에 티스토리에서 공개한 Book Club 스킨이 적용되어 있습니다. 이 스킨을 사용하기 전에 Magazine (매거진) 스킨을 적용했었습니다. 매거진 스킨도 나름 깔끔하고 괜찮은 것 같습니다. 이 글에서는 티스토리 매거진 스킨에서 본문 글자 크기를 변경하는 방법에 대해 간단히 살펴보겠습니다. 참고로 워드프레스의 경우 아바다, 뉴스페이퍼, Divi 등의 테마에서는 쉽게 본문 글자를 비롯한 다양한 요소(헤더, 메뉴, 푸터, 위젯...)의 글자 크기 등을 변경할 수 있습니다. 테마 옵션에서 해당 옵션이 제공되지 않으면 약간의 CSS 코드를 사용하여 변경이 가능합니다. 워드프레스 글자 크기 변경하는 방법 (제목, 본문 등) - 워드프레스 정보꾸러미 워드프레스에서 제목, 본문 등의 글..

IT & 기타/티스토리 2019.12.17. 23:32 (14)

티스토리 글쓰기에서 컬러 텍스트 상자를 삽입하는 방법

제 블로그에 자주 방문하시는 데보라님께서 다음과 같은 텍스트 상자를 삽입하는 방법이 궁금해하셔서 이 글을 통해 설명해드리려고 합니다. 해당 부분을 복사해서 본문에 넣으면 간단하지만, 티스토리의 새 에디터에서는 서식 있는 텍스트를 복사해도 서식이 적용되지 않습니다.ㅠ 조금 복잡하지만 다음과 같은 방법으로 비슷하게 구현할 수 있습니다. 먼저 꾸미기 > 스킨 편집을 클릭합니다. 스킨 편집 화면이 표시되면 HTML 편집을 선택합니다. HTML 편집 페이지가 표시됩니다. 그러면 CSS 탭을 선택합니다. CSS 섹션에서 맨 아래로 이동하여 다음 코드를 추가하고 저장합니다. /* 컬러 텍스트 상자 */ .bluebox { border-style: solid; border-width: 1px; border-color:..

IT & 기타/티스토리 2019.12.14. 16:05 (6)

티스토리 Book Club 스킨: 모바일에서 사이드바가 표시되도록 하는 방법 (개인 정리용)

티스토리 블로그에서 Book Club 스킨을 사용하는 경우 모바일에서 사이드바가 표시되지 않을 것입니다. 사이드바가 표시되도록 하려면 다음 CSS 코드를 찾도록 합니다. #aside { position: fixed; top: 0; right: -278px; z-index: 400; float: none; overflow: auto; width: 278px; height: 100%; padding: 94px 24px 40px; background-color: #fff; box-sizing: border-box; transition: left .5s; -webkit-transition: right .5s; } 위의 코드 부분을 다음과 같이 변경합니다. #aside { width: 100%; padding-l..

IT & 기타/티스토리 2019.11.20. 09:19 (20)

티스토리 북클럽 Book Club 스킨에서 사이드바 고정하는 간단한 방법

이 티스토리 블로그에는 현재 Book Club (북클럽)이라는 가장 최근에 공개된 스킨이 사용되고 있습니다. 현재 사이드바의 크기를 조금 조정했고, IE를 제외하고는 사이드바가 마우스를 스크롤할 때 함께 따라 내려가도록 설정되었습니다. 티스토리 북클럽 스킨에 사이드바를 고정하고 싶은 경우 아래의 방법을 시도해볼 수 있습니다. 목차 티스토리 북클럽 (Book Club) 스킨에서 사이드바 고정하는 심플한 방법저는 사이드바를 고정하기 위해 다음과 같은 CSS 코드를 추가했습니다./* 사이드바 너비 지정 및 고정 */ @media screen and (min-width:1081px) { #aside { width: 26%; padding: 75px 0 32px; box-sizing: border-box; pos..

IT & 기타/티스토리 2019.10.06. 07:07 (6)

티스토리 Poster 스킨에서 썸네일 위치를 오른쪽에서 왼쪽으로 변경하는 방법

티스토리 스킨 중 하나인 Poster (포스터)를 적용하고 최신 글을 표시하도록 설정하면 첫 페이지(홈페이지)에서 썸네일이 오른쪽에 표시되고 요약글이 왼쪽에 표시됩니다. 썸네일 위치를 오른쪽에서 왼쪽으로 변경하고 싶은 경우, 꾸미기 > 스킨 변경 > HTML 편집 > CSS 탭에 다음과 같은 CSS 코드를 추가하면 됩니다./* Poster 스킨에서 썸네일 위치 바꾸기 */ .post-item .thum { float: left !important; margin-right: 80px; margin-left: 0 !important; } 위의 코드를 CSS 탭의 맨 아래에 추가하도록 합니다. 저장한 후에 블로그를 살펴보면 썸네일 위치가 오른쪽에서 왼쪽으로 변경되어 있는 것을 확인할 수 있을 것입니다. 이 블..

IT & 기타/티스토리 2019.09.01. 10:04 (8)

티스토리 Book Club 스킨 수정: 구글 맞춤 검색 추가

이 블로그에는 현재 최근 공개된 Book Club이라는 티스토리 스킨이 적용되어 있습니다. 이번에 스킨을 변경하면서 수정을 최소화하기 위해 노력했습니다. 몇 가지 수정 사항 중에 하나로 티스토리 검색 아이콘을 제거하고 대신 구글 맞춤 검색 기능을 추가했습니다. Book Club 스킨을 적용하면 오른쪽 상단에 검색 아이콘이 표시되고, 아이콘을 클릭하면 그림과 같이 검색 내용을 입력할 수 있는 상자가 나타납니다. 티스토리 검색 기능보다는 구글 검색 기능을 추가하면 사용자가 검색하는 검색어에 대하여 보다 관련성 있는 검색 결과를 제공할 수 있습니다. 간단한 수정으로 쉽게 구글 맞춤 검색 기능을 추가할 수 있습니다. 구글 맞춤 검색으로 대체한 후의 스크린샷입니다. 검색할 내용을 입력한 후에 검색 아이콘을 누르면..

IT & 기타/티스토리 2019.05.20. 22:24 (1)

티스토리 Magazine 스킨: 스크롤 시 헤더에 글 제목이 표시되지 않도록 하기

이 블로그에는 최근 티스토리에서 공개한 Magazine 스킨이 적용되어 있습니다. 저는 이전 스킨의 레이아웃과 비슷하게 수정하여 사용하고 있습니다. 매거진 스킨을 적용한 상태에서 개별 포스트에서 마우스를 아래로 스크롤하면 헤더에 글 제목이 표시됩니다. 스크롤 시 포스트 타이틀이 헤더에 표시되지 않도록 하려면 스킨 파일 하나를 수정하면 됩니다. 저는 front.js 파일을 다운로드한 후에 아래 그림에 표시된 부분을 삭제했습니다. 이런 부분이 두 군데 있습니다. 표시된 부분을 삭제한 후에 업로드하여 기존 파일을 대체했습니다. 티스토리에서 스킨을 수정하려면, 잘 아시겠지만, 티스토리 관리자 페이지에서 꾸미기 > 스킨 편집을 클릭하고 "HTML"을 클릭하여 HTML 파일과 CSS 파일을 수정하거나 파일을 삭제/..

IT & 기타/티스토리 2018.06.05. 14:32 (10)

티스토리 스킨 수정 마무리

지난 금요일에 티스토리 스킨을 유료 스킨으로 변경한 후 시간이 날 때마다 조금씩 수정을 하여 어제 대강 마무리했습니다. 주로 사용하지 않는 기능을 제거하는 데 초점을 두었습니다. 그리고 본문 글자 크기 등 세세한 부분도 손을 보았습니다. 워드프레스 SEO 플러그인으로 유명한 Yoast SEO의 개발자는 다음과 같은 사항을 권장하지 않습니다("SEO(검색엔진최적화)에 유리한 웹사이트 메뉴 구조" 참고). 태그 클라우드 긴 월간 보관물(Monthly Archive) 목록 글 링크가 포함된 무한 스크롤되는 보관물 페이지 (최소한 요약문을 추가하고 스크롤 시 “더 보기” 링크를 추가하는 것이 좋음) 하나의 목록에 100개나 되는 카테고리 3뎁스 이상의 메뉴 태그 클라우드를 표시하는 티스토리 블로그가 많지만 SE..