Tumblr의 스크롤 페이지가 아닌 설명 상자를 고정하는 방법

Tumblr 블로그 테마에서 설명 상자가 블로그 게시물과 함께 페이지 아래로 스크롤 할 수있는 경우 상자를 제자리에 고정 할 수 있습니다. 이렇게하려면 테마는 설명 상자를 잠그는 옵션과 함께 CSS 페이지에 옵션을 포함해야합니다. 개발자는 종종 모든 테마에 동일한 CSS 코드를 사용하기 때문에 일반적으로이 옵션이있을 가능성이 높습니다. 까다로운 부분은 개발자가이 기능을 잠금 해제하는 데 사용한 단어를 찾으려는 것입니다. 대부분의 경우 "고정"이라는 단어만큼 간단 할 수 있지만 코드를 검토 할 때까지 단어가 무엇인지 확신 할 수 없습니다.

HTML 코드 검토

Tumblr에 로그인하고 대시 보드 상단에있는 기어 모양의 설정 아이콘을 클릭하세요. 사이드 바의 블로그 섹션에서 블로그를 선택하고 "테마 편집"을 클릭하십시오. 사이드 바의 테마 이름 아래에있는 "HTML 편집"링크를 클릭하십시오. 테마의 HTML 코드가 왼쪽에 표시되고 Tumblr 블로그 미리보기가 오른쪽에 표시됩니다.

키보드에서 "Ctrl-F"를 눌러 검색 필드를 열고 블로그의 설명 상자에 표시된대로 정확하게 2 ~ 3 개의 단어를 입력합니다. 그러면 해당 단어에 대한 HTML 코드로 직접 이동합니다. "block : Description"과 같은 설명 상자 코드가 나타날 때까지 위로 스크롤하십시오.

설명 상자 코드 바로 위에있는 줄을 검토하고 "unstuck"또는 "float"와 같이 설명 상자를 부동 상태로 유지하는 속성을 찾습니다. 이 단어는 ""와 같은 "div id"태그 내에 있어야합니다.

."

설명 상자가 페이지에 떠있게 유지하는 속성을 "고정"이라는 단어로 바꿉니다 (예 : "

. ""미리보기 업데이트 "버튼을 클릭하십시오. 오른쪽의 미리보기를 클릭하고 페이지를 스크롤 해보십시오.이 방법이 작동하면"저장 "버튼을 클릭하십시오. 설명 상자는 블로그 콘텐츠가 스크롤되는 동안 제자리에 고정됩니다. 그렇지 않으면 작동하지 않으면 올바른 단어를 찾기 위해 CSS 코드를 검사해야합니다.

CSS 코드 찾기

Tumblr 테마의 HTML 코드 상단으로 스크롤합니다. 코드 위의 "검색"필드를 클릭하고 "스타일 시트"를 입력합니다. 이렇게하면 일반적으로 "rel = stylesheet"와 같이 처음 50 줄 내에서 HTML 코드에서이 단어의 첫 번째 인스턴스로 이동합니다. "http :"로 시작하고 "css"로 끝나는이 단어 바로 앞의 URL을 강조 표시하십시오. 테마 CSS 페이지의 웹 주소입니다.

새 브라우저 탭을 열고 주소 표시 줄에 CSS URL을 붙여넣고 "Enter"를 누르십시오. 처음에는 의미없는 문자와 숫자를 볼 수 있지만 페이지를 아래로 스크롤하면 HTML 코드와 매우 유사한 CSS 코드가 표시됩니다. 이 코드는 변경할 수 없지만 설명 상자를 제자리에 잠글 수있는 단어를 찾는 데 사용할 수 있습니다.

"Ctrl-F"를 누르고 테마의 HTML 코드에 사용 된 단어를 입력하면 설명 상자가 "부동"과 같이 부동 상태로 유지됩니다. 이 단어를 찾으면 페이지를 위아래로 스크롤하여 근처의 코드를 조사하십시오. "고정", "정적"또는 "고정"과 같이 제자리에 고정하는 데 사용할 수있는 반대 단어를 찾으십시오.

테마의 HTML 코드를 표시하는 브라우저 탭으로 돌아가서 설명 상자를 부동 상태로 유지하는 단어를 고정 상태를 유지할 수있는 단어로 바꿉니다. "미리보기 업데이트"버튼을 클릭 한 다음 미리보기 페이지를 아래로 스크롤 해보십시오. 작동하면 "저장"버튼을 클릭하십시오. 작동하지 않으면 올바른 마법의 단어를 계속 찾으십시오.

경우에 따라 테마 개발자가 테마에 고정 된 설명 상자를 포함 할 수 있도록 CSS 코드를 포함하지 않았을 수 있습니다.

경고

미리보기를주의 깊게 검토 할 때까지 Tumblr 테마의 HTML 코드에 변경 사항을 저장하지 마십시오. HTML 코드의 내용을 임의로 변경하면 블로그 레이아웃이 심각하게 엉망이 될 수 있습니다.