티스토리 에디터 창에서 하일라이트 강조 문구, 인라인 코드 쉽게 넣기

티스토리 글 작성시 Inline Code 또는 강조 문구 쉽게 넣기 이전에 티스토리를 시작하면서 글작성을 좀 더 편하고, 빨리 할 수 있도록 설정 해 놓은 것들이 있습니다. 그 중에 하나로 취소선 스타일을 인라인 코드, 구문 강조 스타일로 변경하여 편하게 사용했던 방법 을 공유합니다. 인라인 코드?? 구문 강조?? 티스토리 글 작성을 하면서 글자, 문구를 강조하는 방법은 여러가지가 있습니다. 기본적으로 티스토리 에디터에서 제공되는 폰트 종류, 글자 크기, 굵기, 기울이기, 컬러 등의 효과를 줄 수 있습니다. 이외에 다른 방식으로 구문을 강조하는 법의 필요성을 느껴서 아래와 같은 스타일을 편하게(귀찮치 않게) 작성하는 방법이 필요했습니다. 아래와 같은 스타일은 문단 안의 코드를 강조하거나, 코드가 아니더라..

Tistory 2022.02.07

블로그 1년 후기 : 애드센스 광고 수익을 최적화 하는 방법 및 주의 사항(Feat. 애드핏)

블로그 1년 복기 : Adsense 광고 최적화 및 주의 사항 (Feat. Adfit) 블로그를 시작한지 1년을 앞두고 있는 블린이 입니다. 제 블로그는 구글 검색 의존도가 높고, PC유입이 대부분을 차지합니다. (아직도 여러가지 실험 중이지만) 블로그를 하는 1년 동안 나름대로 광고를 최적화를 위해 이것 저것 해보면서 효과가 있다고 판단되는 내용을 소개 합니다. 약간 무식한 방법으로, 대부분 다 아는 사실이긴 합니다만, 조금이라도 도움이 될까해서 남깁니다. 이 블로그는? 평균 방문자수 이 블로그는 작성일 기준으로 지난 주 방문자가 7,375명으로, 이제야 일일 평균 1000대로 진입한 소소한 블로그입니다. 유입 경로 이 곳의 유입은 구글 검색이 대부분을 차지하고 있으며, PC사용자가 주를 이룹니다. 블..

Tistory 2021.06.01

블로그 1년 후기 : 유입, 방문자수를 늘리기 위한 포스팅 방법 - 글의 양, 시리즈 물, 제목, 태그 활용

블로그 1년 복기 : 유입을 늘리기 위한 포스팅 규칙 - 글의 양, 시리즈 물, 태그 활용, 내부 링크 블로그를 시작한지 1년을 앞두고 있는 블린이 입니다. 블로그를 시작하는 계기는 다양하지만, 많은 비율의 사람들은 블로그의 글로 수익을 전환하고 싶어합니다. 수익을 늘리는 방법은 크게 유입을 많이 만들거나, 적절한 광고배치를 잘 하는 것 두가지 입니다. 이 포스트는 블로그를 1년 정도 운영하면서 유입을 조금이라도 늘리기 위해 사용한 방법중에 효과가 있다고 판단되는 것들을 소개 합니다. 블로그 형태에 따라, 실용성은 다르고, 저의 경험적인 뇌피셜이니 참고로만 봐주세요. 이 블로그는? 월간 방문자 수 이 블로그의 방문자수는 아래 그림과 같습니다. 지난 5월동안 방문자는 28,196명 입니다. 정확히 말하면 ..

Tistory 2021.06.01

일치하는 콘텐츠 목록 특정 글 고정 또는 차단 설정 및 기간 설정

일치하는 콘텐츠 : 노출되는 게시글 기간, 차단글, 선호하는 콘텐츠 설정 애드센스 사이트 메뉴의 일치하는 콘텐츠 메뉴에서 광고 세부 설정하는 방법을 소개합니다. 이 메뉴가 언제부터 있었는지 모르겠지만, 오늘 들어가 보니 유용한 옵션인 것 같아 소개합니다. 이 메뉴를 사용하면 일치하는 콘텐츠 목록에 표시되는 게시글의 기간 설정, 차단글 설정, 고정 표시글 설정이 가능합니다. 애드센스 일치하는 콘텐츠 사이트 설정 애드센스의 일치하는 콘텐츠 광고는 아래와 그림들과 같이 광고와 사이트의 게시물 목록을 함께 표시해주는 광고입니다. 광고 수익 창출 할 수 있을 뿐만 아니라, 페이지 조회수 및 사이트 이용시간을 늘리는 효과도 함께 있습니다. 권한 이 포스트의 일치하는 콘텐츠 설정은 광고단위에 일치하는 콘텐츠 광고 사..

Tistory 2020.12.14

티스토리 highlight.js 설정 및 Syntax Highlight 플러그인 언어 추가

티스토리 highlight.js 사용법 및 편하게 사용하는 팁 이번 포스트는 티스토리 구문 강조를 위해 highlight.js 를 사용하는 방법 을 설명합니다. 추가로 기존 Syntax Highlight 플러그인 테마를 그대로 사용하기 위한 방법 도 함께 소개합니다. highlight.js 티스토리에서 코드 하이라이팅을 하기 위해 Syntax Highlight 플러그인을 사용할 수 있습니다. 기본 제공되는 플러그인으로 쉽게 코드 구문 강조를 할 수 있지만, 지원되는 언어의 종류가 적어 포스팅 하는 언어의 코드가 없는 경우가 있습니다. 이런 경우 highlight.js를 사용하면 Syntax Highlight 플러그인에 없는 언어와 다양한 테마를 적용 할 수 있습니다. highlight.js 설정 방법 추..

Tistory 2020.12.01

#7 CSS Sticky 속성으로 사이드바 내부 일부 영역 화면에 고정 하기

Sidebar CSS Sticky 포지션으로 상단 고정 현재 제작 중인 스킨은 상단의 Navigation 메뉴바와 왼쪽 사이드바 일부 영역은 CSS Sticky 속성을 사용하여 화면에 고정하도록 구상을 하였습니다. 이번 포스트는 Sticky 포지션을 이용하여 사이드바를 화면에 고정하는 방법 을 소개합니다. 레이아웃 구성 PC 화면에 적합하다고 생각하는 3단 레이아웃을 구상하였습니다. 아래 그림에서 배경색을 표시한 상단 메뉴바와, 왼쪽 사이바 부분의 일부 영역은 스크롤을 내리면 화면에 고정하도록 구상을 하였습니다. Sticky Position 사용 방법 및 주의 사항 사용방법 스크롤에 따라 화면에 고정되는 Sticky 속성은 아래 코드와 같이 Position 속성과 top, bottom, left, rig..

Tistory 2020.11.26

#6 CSS Position Sticky 으로 Navi 메뉴바 스크롤 내릴 때 상단 고정

Nav 메뉴바 CSS Sticky 속성으로 상단 고정 현재 제작중인 스킨은 상단의 Nav 메뉴바와 왼쪽 사이드바의 일부 영역은 Position:sticky; 속성을 사용하여 상단에 고정하도록 구상을 하였습니다. 이번 포스트에서는 상단 Nav 메뉴바를 Sticky 속성을 사용하여 상단에 고정하는 방법 을 소개합니다. 레이아웃 구성 PC에 적합한 스킨을 제작하기 위해 아래 그림과 같이 3단 레이아웃을 구상하였습니다. 아래 레이아웃에서 붉은 색으로 표시한 부분은 화면 상단에 고정할 영역입니다. 상단에 고정할 요소는 CSS의 Sticky 속성을 사용할 예정입니다. Position Sticky CSS Fixed? Sticky? CSS 포지션(Position)에서 화면을 고정하는 방법은 Fixed 속성과 Stick..

Tistory 2020.11.26

#5 CSS Flex 로 반응형 3단 레이아웃 구성하기

CSS Flexible Box로 반응형 3단 레이아웃 구성하기 지난 포스트에서는 CSS Grid의 Grid template areas 속성을 사용하여 반응형 3단 레이아웃을 구성하는 방법을 소개하였습니다. 이번 포스트에서는 CSS Flex(Flexible Box)로 반응형 3단 레이아웃을 구현하는 방법 에 대해 소개합니다. 반응형 레이아웃 구상 아래 반응형 3단 레이아웃 구성은 현재(2020년 11월) 스킨에 적용된 레이아웃입니다. 구현 초기에 CSS Grid의 grid-template-areas 속성으로 구현하려 했으나, IE호환이 되지 않아 다른 방법을 고민하다가 모바일 접속률은 낮고, 불필요한 내용이 들어가면 로딩 속도가 느려지니 본문만 표시하는 방식으로 바꾸었습니다. 아래 그림과 같이 HTML 요..

Tistory 2020.11.25

#4 CSS Grid의 Grid template areas 속성으로 반응형 3단 레이아웃 구성하기

grid template areas 속성으로 3단 레이아웃 구성 CSS Grid의 Grid template areas 속성은 비전공자인 제가 느끼기에 웹페이지 2차원 레이아웃을 구성하는 방법 중에 가장 직관적이고 쉬운 방법으로 느껴졌습니다. 이 포스트는 Grid-template-areas 속성을 사용하여 반응형 3단 레이아웃을 구성하는 방법 에 대해 소개합니다. 반응형 레이아웃 구상 티스토리 스킨을 제작을 해야겠다 생각하고 아래와 같은 페이지 레이아웃을 구성하였습니다. PC에서는 3단, Tablet 크기에서는 오른쪽 사이드바가 Article의 아래, 모바일에서는 왼쪽 사이드바를 보이지 않도록 구성하였었습니다. 타블릿이나 모바일에서 Right Side 바에 있는 일부를 하단으로 보여주기 위해 구상하였습니다..

Tistory 2020.11.25

#3 티스토리 스킨 제작 레이아웃 구상 Part.2 사이드바, 본문 활용 방안

레이아웃 구상2 : 사이드바, 본문영역지난 포스트에서는 제작할 스킨에 기대하는 효과와 구현 방법에 대해 설명하였습니다. 이번 포스트는 제작할 스킨의 사이드바와 본문 영역의 레이아웃 구성에 대해 작성하였습니다. 지난 글 요약직접 스킨을 제작하면서 기대하는 효과는 아래와 같고, 블로그의 상단부에서 그 나마 할 수 있는 레이아웃을 구상하고 설명하였습니다. 이탈율 감소체류시간 높이기세션당 페이지수 높이기적절한 광고 배치 가능한 환경 왼쪽 사이드바왼쪽 사이드바는 크게 두 가지 영역으로 나누었습니다. 위쪽의 영역은 일반적인 포지션을 가지고, 아래쪽 영역은 Sticky 한 옵션으로 스크롤을 내리면 상단에 고정되는 박스로 실제로 블로그 스킨은 아래와 같은 용도로 사용 할 수 있도록 구상을 하였습니다. (상단) Side..

Tistory 2020.11.23