[카테고리:] IT& 인터넷 모바일 Story

애드센스 수익 좋은 티스토리 북클럽 스킨 제목 잘리는 현상 전체 표시 방법

티스토리 블로그를 운영하는 대부분의 유저들은 아마도 수익성 블로그를 키우는 이유가 가장 클 겁니다. 물론 좋은 글을 발행하고 내 관심분야, 취미 등을 일기 쓰듯이 정리하는 의미도 있지만 그 수고(??) 노력과 함께 비례적으로 수익도 발생하면 더 의미가 있다보니 가장 손쉽게 구글 애드센스를 부착할 수 있는 티스로리를 사용합니다.

티스토리 블로그 스킨 중에서

가장 인기가 많고, 가볍고 커스마이징하기 편리한 스킨 중 하나가 북클럽 스킨입니다. 다만 북클럽 스킨은 책 소개 개념으로 되어있다보니 썸네일 등이 책과 같은 크기의 직사각형 형태로 썸네일이 표시되기 때문에 조금은 커스마이징을 해주면 훨씬 더 고급스럽게 바꿔줄 수 있습니다.

오늘은 그 중에서도 북클럽 스킨 글이 리스팅 될 때

제목이 아래 사진과 같이 잘리는 현상(뒷 부분 …. 으로 표시)을 간단하게 수정하는 방법을 찾아보겠습니다.

✔ 북클럽 스킨 수정 방법

1. 티스토리 설정 > 꾸미기 > 스킨편집을 클릭

2. CSS 편집

티스토리 설정화면 > 꾸미기 > 스킨편집 > html > CSS 를 클릭해줍니다.

3. CSS 수정 위치 검색

CSS 직접 수정하기에서 컨트롤+F로 아래와 같이 “post-item .title”를 검색해줍니다

대략 1164행 근처에 있겠지만 직접 수정이나 추가한 경우가 있으면 행이 바뀌니 “post-item”등을 검색해서 확인해보면 됩니다.

4. CSS 수정 위치 검색

CSS 직접 수정하기 화면에서 위와 같이 “post-item .title” 를 검색한 후에 아래쪽에 “white-space: nowrap;” 부분을 “white-space: normal;”로 변경한 후에 저장해주면 됩니다.

즉, nowrap → normal 로 변경해주면 됩니다.이렇게 변경해주고 저장 버튼을 누르면 CSS가 변경되고 PC버젼과 모바일버전 모두 제목이 짤리지 않고 전체가 모두 표시가 됩니다.

✔ 수정 후 결과

위와 같이 수정하고 나면 PC 화면과 모바일 화면 모두 기존에 제목이 짤려서 전체 그대로 표시가 되지 않는 부분이 아래와 같이 전체가 다 표시되어 나옵니다.

간단하게 CSS 수정을 통해서 리스팅시 제목을 한 눈에 인지할 수 있어 시인성이 높아지고 자연스럽게 게시글에 대한 클릭율도 증가하게 됩니다.

모바일페이지에서도

아래와 같이 수정전인 북클럽 스킨 모바일 화면에서는 제목이 짤려서 나왔지만 간단한 CSS 수정을 통해서 우측과 같이 제목이 전혀 잘리지 않고 정상적으로 게재가 됩니다.

간단한 CSS 수정을 통해서

PC 화면과 모바일 화면 두가지 모두 제목이 잘려나가지 않고 정상적으로 모두 보여집니다.

게시글을 작성할 때 가장 요약한 한 줄이 바로 제목인데 이 제목이 잘려나가면 방문자가 유입되어서 클릭하고 머무르는 시간이 줄어들 수 있어 개인적으로는 제목 부분의 필드는 모두 표시되는걸 선호합니다.

2022.11.03 – [분류 전체보기] – 애드센스 수익 북클럽(Book Club) 스킨 모바일 썸네일 정사각형 수정 방법

2022.11.03 – [IT 모바일 소식/PC 팁&소스] – 티스토리 스킨 북클럽 썸네일 정사각형 만드는 방법

북클럽(Book Club) 티스토리 스킨 모바일 썸네일 정사각형 수정 방법

애스센스 수익을 위해서

티스토리 블로그를 이용하는 사람들이 점점 더 늘어나고 있다보니, 애드센스가 잘 로딩될 수 있는 가벼운 스킨을 활용하는 분들이 증가하고 있습니다.

예전에는 조금 무겁더라도 예쁘고 아기자기한 스킨들이 인기가 많았다면 지금은 빠른 로딩의 장점을 가진 스킨이 실제 훨씬 더 효율적인 결과를 보여줍니다.

아래와 같이 북클럽 스킨 썸네일 정사각형 만드는 방법에 이어서 모바일 화면에서 세로 직사각형을 PC버젼과 동일하게 정사각형으로 만드는 방법에 대해서 알아볼까합니다

티스토리스킨 중 북클럽 썸네일을 직사각형에서 정사각형으로 수정 방법은 아래 참고하세요

목차 List
1. 북클럽 스킨 모바일 썸네일 정사각형 수정 방법
• 1) 티스토리 스킨 편집
• 2) CSS 소스 수정

1. 북클럽 스킨 모바일 썸네일 정사각형 수정 방법

Book Club 스킨은 모바일과 PC를 따로 구분하지 않는 반응형 스킨입니다.

PC 버젼 북클럽 스킨 썸네일만 정사각형으로 수정해두면, 모바일로 접속하면 여전히 썸네일이 직사각형으로 보여주게 됩니다

따라서, 모바일에서도 동일하게 정사각형으로 보여지도록 수정해줘야 합니다.

1) 티스토리 스킨 편집

티스토리 관리자 모드에서 꾸미기 > 스킨편집 화면으로 들어갑니다.

2) CSS 소스 수정

CSS 수정 화면에서 “

list-type-thumbnail .post-item .thum img” 를 검색하거나 대략 2258행 근처에 있을건데 찾은 후에 heiget가 px 값으로 설정이 되어 있는데 아래와 같이 그 부분인 auto로 변경해주면 됩니다.

목차 List
1. 티스토리 스킨 북클럽 썸네일 정사각형 만드는 방법
2. 북클럽 스킨 가독성 있는 기본 설정 방법
3. 북클럽 스킨 썸네일 정사각형 수정

1. 티스토리 스킨 북클럽 썸네일 정사각형 만드는 방법

초창기에는 테터툴즈 설치형 블로그도 있었는데 그 시절 설치형 블로그도 사용하곤 했었는데 이후에 DAUM(지금은 카카오)에 인수되면서 설치형은 사라지고 티스토리로 변경이 되었던 걸로 기억합니다. 쌀짝 가물가물;;

네이버 블로그 대신 티스토리 블로그를 사용하는 유저들은 대략적으로 정해져 있습니다

기존 네이버 블로그가 지금은 수익이 예전보다는 많이 좋아졌지만, 기본적으로 자유로운 배너 부착, 구글 애드센스 부착의 어려움이 있다 보니 조금 더 유저의 자율성이 보장된 티스 로리를 주로 사용하게 됩니다.

티스토리는 기본적으로 구글 애드센스와 함께 kakaoAdFit, 텐핑 등 수익형 콘텐츠를 자유롭게 부착할 수 있는 장점을 가지고 있어 글을 작성하고 수익을 만들고 싶은 유저들이 가장 많이 사용하게 됩니다.

수익형 블로그를 운영할 때

예쁘게 디자인되고 꾸며진 게 많은 스킨에 비해서 로딩 속도가 빠른 스킨이 수익 측면에서는 다소 유리한 점이 많다 보니 빠른 로딩이 장점인 북클럽 스킨도 많은 티스토리 유저들에게 사랑받고 있을 겁니다.

오늘은 티스토리 스킨 중 하나인 북클럽 스킨을 처음 설치하고 난 후에 해야 할 기본 설정과 썸네일을 정사각형으로 만드는 2가지 방법에 대해서 알아볼까 합니다,.

2. 북클럽 스킨 가독성 있는 기본 설정 방법

✔ 기본 설정(스킨 편집)

1. 티스토리 설정

먼저 티스토리 설정 화면에서 아래와 같이“스킨 편집”을 클릭해줍니다.

2. 스킨 편집 > 최신 글 > 목록+내용으로 설정

북클럽 스킨은 티스토리에서 기본으로 제공하는 스킨으로 아래와 같이 최신글 화면에서 ‘목록+내용”을 설정해둡니다.

3. 리스트 타입 설정

이제 우측 설정 화면에서 아래로 스크롤해서 내려가면

리스트 타입 설정 화면이 있는데 북리뷰, 베스트셀러, 뉴북, 뉴스레터 4가지 중에서 ‘뉴북”으로 설정해줍니다.

3. 북클럽 스킨 썸네일 정사각형 수정

위에는 기본적으로 가독성이 좋은 설정 화면으로 처음 #티스토리스킨 중 하나인 #북클럽스킨 선택 후에 설정해주면 좋은 기본 설정이었습니다

이제 가장 중요한 썸네일 정사각형으로 수정하는 방법은 CSS 파일에서 수정해주면 됩니다.

1. Html 편집 클릭

먼저 티스토리 설정 > 스킨 편집 > “html 편집” 클릭해줍니다.

2. CSS 편집 화면 클릭

Tistory 설정 > 스킨 편집 > html 편집 > CSS 클릭!

3. 폭 높이 조절

먼저 CSS 편집 화면에서

아래와 같이 width 126px, height auto로 되어 있는걸 auto 대신에 동일한 126px로 바꿔줍니다

두 번째로 다시 html 수정 페이로 들어가서

아래와 같이 “C230x300” 을 “230X230” 또는 “200×200″으로 변경해주면 됩니다.