티스토리 꾸미기18

• 

  [구글 애널리틱스] 티스토리 애널리틱스 설정 구글 애널리틱스 계정 생성 구글 메일로 간단하게 가입 가능 측정 시작 측정 시작 버튼을 클릭하여 계정 생성을 진행한다. 계정 생성 계정 이름은 블로그 명이 아니여도 상관이 없으며, 단순히 무엇을 측정하는지 구분하는 명칭으로 보면 된다. 딱히, 중요하지 않아서 블로그 명으로 입력. 계정 데이터 공유 부분은 아래 4곳을 활성화 한 상태로 다음 버튼 클릭 시설 세부정보 속성 이름은 블로그 명과 동일하게 등록. 보고 시간대는 대한민국, 통화는 미국 달러로 입력한다. 비즈니스 규모는 작음으로 선택. 비즈니스 목표는 상황에 맞게 설정 변경. 약관을 체크하고 동의함 클릭 데이터 수집 웹을 클릭하여 데이터 스트림 설정을 진행. 웹 스트림 설정 부분에 블로그 웹 사이트 URL과 스트림 이름에 블로그의 URL과 블로그 명.. Blog 2024. 1. 6.

• 

  [Naver Search Advisor] 네이버 서치어드바이저 설정하기 Naver Search Advisor 사이트 접속 https://searchadvisor.naver.com/ 네이버 서치어드바이저 네이버 서치어드바이저와 함께 당신의 웹사이트를 성장시켜보세요 searchadvisor.naver.com N웹마스터 도구 클릭 사이트 주소 입력 태그 정보 확인 간단 체크 블로그 관리 -> 플러그인 -> 메타 태그 등록 name // naver-site-verification // content값 Blog 2023. 12. 20.

• 

  [Google AdSense] Google 애드 센스 승인 전 광고 노출 Case 1. 승인 상태 "주의 필요" 해당 승인 전 상태이며 승인이 완료되기 전까지 수익과 상관없는 광고가 노출됨. Blog 2023. 12. 20.

• 

  [Google AdSense] Google 애드 센스 가입 및 설정 Google Adsense애드 센스 사이트 접속 사이트 주소 : https://adsense.google.com/start/ Google 애드센스 - 웹사이트에서 수익 창출하기 Google 애드센스의 웹사이트 수익 창출 기능을 사용하여 수익을 올려보세요. Google 애드센스에서 광고 크기를 자동으로 최적화하여 광고의 노출 및 클릭 가능성이 높아집니다. adsense.google.com 티스토리 사이트 추가 애드 센스 상태값 확인 티스토리에 애드 센스 코드가 없을 경우 사이트 추가 후 "주의 필요" 또는 경고 메일 애드 센스 코드 복사 애드 센스 코드 티스토리 적용 티스토리 관리 → 꾸미기 → 스킨 편집 → html 편집 태그 아래에 복사한 코드를 붙여넣기 주의사항 블로그 개설 후 한달 정도 후에 광고 .. Blog 2023. 12. 20.

• 

  [Google Search Console] 설정하기 Googel Search Console 플러그인 연결 티스토리 -> 플러그인 -> 구글 서치콘솔 -> 계정 연결하기 -> 적용 Googel Search Console 도메인 추가 개요 위 드롭다운 메뉴 클릭 -> 속성 추가 -> 도메인 추가 사이트맵 제출 Blog 2023. 12. 20.

• 

  [티스토리 꾸미기] 스킨 편집 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.