더 나은 가독성을 위해 Firefox Reader보기를 사용자 지정하는 방법
Reader View는 Firefox 브라우저의 인기있는 기능입니다. 외모를 바꾸다. 웹 페이지의 그것을 더 읽기 쉽게 만든다. 으로 시각적 인 난장판 제거 이미지, 광고, 헤더 및 사이드 바 등). 모든 홈 페이지에 대해 리더보기를 사용할 수는 없습니다..
해당 기능을 특정 페이지에서 사용할 수있는 경우 아이콘을 클릭하면 작은 책 아이콘 검색 주소창 오른쪽에 표시.
독자가 이미지의 모양을 사용자 정의 할 수있는 몇 가지 기본 제공 옵션이 있습니다. 리더보기. Reader View의 모양을 더 개인화하기 위해 할 수있는 것을 보여주기 전에 이러한 옵션을 살펴 보겠습니다. 데모 목적으로, 내셔널 지오그래픽 문서.
사전 제작 된 옵션
Firefox Reader보기에는 어둡거나 밝은, 세피아와 같은 몇 가지 사전 제작 된 사용자 화 옵션이 있습니다. 배경, 조절할 수 있는 글꼴 크기, 와 세리프와 산 세리프 서체. 테마를 다음과 같이 사용자 정의 할 수 있습니다. CSS 규칙 오버라이드 이러한 기존 옵션 중.
나는 serif 글꼴이있는 검은 색 피부를 사용합니다. 따라서이 경우에는 속한 CSS 클래스를 재정의해야합니다. .어두운 과 .가는 장식 선.
다른 테마 변형 (스킨 + 글꼴)을 사용자 정의하려면 다음을 수행해야합니다. 적절한 CSS 선택자를 사용하십시오.. Firefox 개발자 도구를 사용하여 F12 키를 눌러이를 확인할 수 있습니다..
사용자 정의 CSS 파일 만들기
다음과 같은 파일을 만들어야합니다. userContent.css 내부 크롬 ~의 폴더 Firefox 프로필 폴더 귀하의 리더보기 사용자 정의하십시오. Firefox 프로필 폴더를 찾으려면 다음을 입력하십시오. about : 지원 URL 바에 입력하고 Enter 키를 누릅니다..
당신은 자신의 페이지를 볼 수 있습니다. Firefox 설치 관련 기술 데이터. 폴더 표시 버튼을 클릭하면 프로필 폴더가 열립니다..
호출 된 폴더 만들기 크롬 프로필 폴더 (아직 가지고 있지 않은 경우) 및 파일 userContent.css 내부 크롬 폴더. 파일 경로는 다음과 같습니다.
... \ Profiles \\ chrome \ userContent.css
사용자 정의 CSS 규칙 추가
일단 생성하고 열면 userContent.css 코드 편집기에서 CSS 규칙을 추가 할 차례입니다. Reader View의 디자인을 사용자 정의하려면 목표로 삼다 태그를 적절한 선택자로.
다른 기본 옵션에 대해 다음 선택기를 사용할 수 있습니다.
/ * 어두운 배경을 선택했을 때 * / : root [hasbrowserhandlers = "true"] body.dark / * 밝은 배경을 선택했을 때 * / : root [hasbrowserhandlers = "true"] body.light / * 세피아 배경이 선택됩니다 * / : 루트 [hasbrowserhandlers = "true"] body.sepia / * serif 글꼴이 선택 될 때 * / : root [hasbrowserhandlers = "true"] body.serif / * sans-serif 글꼴이 선택된 * / : 루트 [hasbrowserhandlers = "true"] body.sans-serif
특정 조합의 설정을 타겟팅하기 위해 클래스를 결합 할 수도 있습니다..
/ * 어두운 배경 및 세리프 글꼴을 선택한 경우 * / : root [hasbrowserhandlers = "true"] body.dark.serif / * 세피아 배경 및 산 세리프 글꼴을 선택한 경우 * / : root [hasbrowserhandlers = "true" ] body.sans-serif.sepia
사용하지 마세요 공통 선택기 : 루트 [hasbrowserhandlers = "true"] 본문 한 번에 모든 설정을 타겟팅 할 수 있습니다. 그것은 효과가 있지만, 다른 브라우저 페이지에도 영향을 미침, 와 같은 about : newtab, 그들의 뿌리 요소가 이류 서 핸들러 속성 (예 : 내부 Firefox 페이지의 이벤트 핸들러를 표시하는 데 사용됩니다. 약: 페이지).
여기에 내가 추가 한 코드가있다. userContent.css. 글꼴 패밀리, 글꼴 스타일, 색상을 변경하고 텍스트 컨테이너를 넓혔습니다. 자신의 취향에 따라 다른 스타일 규칙을 사용할 수 있습니다..
/ ** userContent.css ************************** / : 루트 [hasbrowserhandlers = "true"] body.dark.serif, : root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-family : "택배 신규"! 중요; : root [hasbrowserhandlers = "true"] body.dark.serif background-color : # 13131F! important; 색상 : # BAE3DB! 중요; : root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain 글꼴 스타일 : 기울임 꼴! 중요; : 루트 [hasbrowserhandlers = "true"] body.dark.serif h1, : 루트 [hasbrowserhandlers = "true"] body.dark.serif h2, : 루트 [hasbrowserhandlers = "true"] body.dark.serif h3, 루트 [hasbrowserhandlers = "true"] body.dark.serif h4, : root [hasbrowserhandlers = "true"] body.dark.serif h5 color : # 06FEB0! important; : root [hasbrowserhandlers = "true"] body.dark.serif a : link color : # 83E7FF! important; : root [hasbrowserhandlers = "true"] body.dark.serif #container max-width : 50em! important;
다음을 사용하는 것이 필요합니다. !중대한 ~ 안에있는 키워드 userContent.css 모든 CSS 규칙. 브라우저는 사용자 지정 속성 값을 추가합니다. 저자가 지정한 값보다 먼저 (주어진 웹 페이지의 개발자, 여기서는 리더보기). 따라서 사용자 지정 속성 값없이 !중대한 작성자가 지정한 스타일 시트가 재정의 될 것이므로 같은 속성을 대상으로하는 경우 키워드가 작동하지 않습니다..
최종 결과
아래에서 독자보기 테마의 변경 사항을 볼 수 있습니다. 자체 CSS 규칙을 사용하여 나만의 Firefox Reader보기의 디자인을 사용자 정의하십시오..
전에
후
파이어 폭스 툴의 테마 커스터마이징에 대해 더 자세히 알고 싶다면 파이어 폭스 개발자 툴 테마의 커스터마이징에 대한 이전 튜토리얼을 확인하자..
