스킨 편집7

• 

  [티스토리 꾸미기] 스킨 편집 Step 7 - 폰트 변경 개요 폰트 변경을 통해 나만의 스타일로 변경. 작업 pre { font-family: customFont, monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } body { font-family: 'customFont', 'Noto Sans KR', Arial, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Nanum Gothic", Dotum, '돋움', Helvetica, sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .article-head.. Blog 2023. 12. 19.

• 

  [티스토리 꾸미기] 스킨 편집 Step 6 - 본문 자동 목차 개요 오디세이 본문 자동 목차 추가. 작업 1. HTML 수정 1) head - Script 상단에 추가 Step 2를 진행한 경우 삭제하고 아래 내용을 추가. 2) body - Div class = article-view 하단에 추가. 3) Body - Script 상단에 추가 ----------------------------------------------------------------------------------- ... 기존 코드 ... 2. CSS 수정 /* ********************************************************************* 자동 목차 삭제 ***************************************************.. Blog 2023. 12. 19.

• 

  [티스토리 꾸미기] 스킨 편집 Step 5 - 코드 블럭 스타일 변경 개요 디자이너가 아니라서 코드 블럭 스타일 변경하는 방법만 공유. 작업 /* 삭제 */ .article-view pre { padding: 20px; background: rgba(0, 0, 0, 0.05); font-size: 16px; color: rgba(34, 85, 51, 0.87); white-space: pre-wrap; } /* 추가 */ .article-view pre code { display: block; background-color: #202123; padding: 20px; overflow-x: auto; border-radius: 5px; } Blog 2023. 12. 19.

• 

  [티스토리 꾸미기] 스킨 편집 Step 4 - H1 ~ H3 스타일 변경 개요 H 부분 강조하기 위해 스타일을 변경 작업 /* H2 수정 */ .article-view h2 { font-size: 24px; line-height: 1.38; font-weight: 600; padding: 3px 5px 3px 10px; border-left: #98DDCA 12px solid; border-bottom: #98DDCA 1px solid; } /* H3 수정 */ .article-view h3 { font-size: 20px; line-height: 1.33; font-weight: 600; padding: 3px 5px 3px 10px; border-left: #dd9898 10px solid; border-bottom: #dd9898 1px solid; } /* H4 수정 .. Blog 2023. 12. 19.

• 

  [티스토리 꾸미기] 스킨 편집 Step 3 - 본문 사이즈 변경 개요 1. 내용 부분 사이즈를 조금 넓게 변경하기. 2. 썸네일 정사각형으로 변경 3. 커버 이미지도 정상 노출 처리. 작업 1. CSS 수정 /* 변경 max-width 1020 -> 1100 */ .main { width: 100%; max-width: 1100px; margin: 0 auto; } /* 변경 max-width 640 -> 800 */ .area-main { width: 100%; max-width: 800px; } /* 변경 left 60 -> 30 */ .area-aside .box-calendar .inner-calendar .cal_month a:first-child:before { content: '〈'; position: absolute; top: -3px; left: 30.. Blog 2023. 12. 19.

• 

  [티스토리 꾸미기] 스킨 편집 Step 2 - 플로팅 자동 목차 추가 개요 개발 과정에서는 작업 편의성을 위해 소스를 다운받아 진행하였으나, 관리자 페이지에서 '스킨 편집'을 통해 바로 수정이 가능하다. 작업 1. HTML 수정 1) head - Script 상단에 추가 2) body - Div 상단에 추가 ... 기존 소스 ... 3) Body - Script 상단에 추가 ... 기존 코드 ... 2. CSS 수정 /* ********************************************************************* 자동 목차 ****************************************************************** */ .toc-absolute { position: absolute; margin-top: 165px.. Blog 2023. 12. 19.

• 

  [티스토리 꾸미기] 스킨 편집 Step 1 - 스킨 소스 다운로드 개요 오디세이 스킨을 기반으로 추가적인 기능 추가와 수정을 진행할 예정. 다운로드 관리페이지 > 꾸미기 > 스킨 변경 Blog 2023. 12. 19.