Tumblr에서 HTML을 사용하여 테마를 편집하는 방법

Tumblr은 선택한 무료 테마뿐만 아니라 Tumblr 블로그의 전체 사용자 정의 테마에 대한 전체 사용자 정의를 지원합니다. Tumblr의 테마는 다양한 개발자에 의해 만들어지며, 그 중 다수는 Tumblr 사용자입니다. 따라서 코드의 디자인과 레이아웃은 테마 사이에서 크게 다르며 공통된 핵심 요소 만 있습니다. 실험은 시스템의 기능을 배우는 효과적인 수단이지만, 편집하기 전에 테마에 기초를 두는 것이 가장 좋습니다. Tumblr은 사용자 정의 테마 및 변수에 대한 전체 설명서를 제공합니다.

Tumblr.com/customize에서 Tumblr 사용자 정의 페이지를 엽니 다. Tumblr 대시 보드 상단에서 사용자 이름을 클릭 한 다음 사이드 바에서 "Customize Appearance"를 클릭 할 수도 있습니다.

"테마"버튼을 클릭하십시오. 기본 화면은 테마 선택 화면입니다. 아직 마음에 들지 않는 테마를 선택하십시오. 선택한 후에는 테마 메뉴의 하단에있는 "사용자 정의 HTML 사용"을 클릭하십시오.

삼.

코드를 살펴보면 개발자가 원래 테마를 제작 한 방법에 대한 느낌을 얻을 수 있습니다. 테마는 HTML, CSS 및 Javascript를 포함한 코드를 혼합하여 사용합니다. Tumblr 테마는 표준 블록 집합을 사용하여 블로그의 여러 게시물 및 섹션에 적용되는 코드 영역을 정의합니다. 예를 들어 오디오 게시물을 정의하는 섹션은 "{block : Audio}"로 시작하고 "{/ block : audio}"로 끝나고 인용 게시물의 섹션은 {block : Quote}부터 시작하여 {{/ block : } "개별 게시물 유형 및 섹션을 쉽게 찾을 수 있습니다. 특정 요소를 검색하는 경우 브라우저의 "찾기"기능은 테마 HTML 내에서 단어를 찾을 수 있어야합니다.

원하는 모든 사용자 지정 HTML을 삽입하십시오. 테마에 대한 새 스타일 시트를 만들려면 문서 머리 부분의 여는 태그와 닫는 태그 사이에 어딘가에 삽입하십시오. 스타일 시트는 다음 형식으로되어 있습니다.

필요한만큼 스타일 시트에 많은 요소를 포함 할 수 있습니다. CSS를 사용하여 모든 요소를 수정할 수 있습니다. 예를 들어, H2 태그로 수정 한 내용을 22 픽셀 크고 어두운 회색으로 설정하려면 스타일 시트에 다음 블록이 포함됩니다.

h2 {글꼴 크기 : 22px; color : # A8A8A8;}

"style"태그를 사용하여 개별 HTML 요소에 스타일을 추가하십시오. 예를 들어, 페이지의 따옴표를 밝은 회색 텍스트 그림자로 변경하려면 견적을 수정하고 HTML 태그의 대괄호 안에 HTML을 추가하십시오. 이 방법으로 추가 된 모든 CSS는 페이지의 스타일 시트와 함께 작동합니다.

변경 사항을 저장하지 않고 미리보기에서 Tumblr 블로그의 변경 사항을 보려면 "업데이트 미리보기"를 클릭하십시오. 마지막으로 Tumblr 블로그를 원하는대로 변경하고 커밋 할 준비가되면 "저장"을 클릭하십시오.

팁

테마 변경은 대시 보드 나 Tumblelog가 아닌 페이지에만 영향을 미칩니다.

경고

구문에주의하십시오. 모든 오타 또는 구문 오류로 인해 전체 테마가 손상 될 수 있습니다.
테마 선택 옵션으로 돌아가려면 "맞춤 HTML 사용 안 함"을 선택해야합니다. 이것은 묵시적으로, 사용 된 모든 사용자 정의 HTML을 제거합니다.
테마가 테마 요소에 외부 스타일 시트를 사용하는 경우 CSS 요소를 변경하는 것이 더 어려울 수 있습니다.