본문 바로가기
일상/블로그에서 생긴 일

[블로그][티스토리][스킨] #2 스킨에서 북클럽(Book Club) 스킨으로 변경했습니다

by 빛밤하늘 2021. 9. 12.
반응형

처음 티스토리 블로그를 시작할 때 스킨을 선택하게 되는데

저는 여러 스킨들 중에서 '#2'라는 스킨이 제일 이뻐 보였습니다.

게다가 처음에는 아무 스킨을 선택하고 나중에 바꾸면 된다는 글도 봤어서 

아무 생각 없이 고르고 4월부터 지금까지 글을 써오고 있었습니다.

 

처음에 선택했던 #2 스킨
처음에 선택했던 #2 스킨

 

블로그를 해보면서 다른 블로그들도 접해보니, 디자인 고수분들의 블로그들 중에서는

아예 이게 티스토리 블로그인지도 모를 정도로 잘 꾸며 놓은 게 있는가 하면,

티스토리 블로그 스킨에 대해서 검색해보니까 북클럽 스킨, 친효 스킨, 고래 스킨 등을 대부분 추천하지,

제가 선택한 #2 스킨을 칭찬하는 글은 많이 찾지 못했습니다.

또 스킨을 바꾸고 싶었던 이유 중 하나로 제 블로그에서만 그랬는지는 모르겠지만, #2 스킨에서는

사이드바에 설정해놓은 카카오 애드핏이 한 번씩 갑자기 사라져서 다시 설정하느라 매우 번거로웠습니다.

구글 애드센스 광고는 다른 블로그에서 읽었던 내용대로 설정해봐도

#2 스킨의 사이드바에서는 왜인지 적용이 안됐고요.

무엇보다도 북클럽 스킨이 설정된 블로그들을 보니까

깔끔하니 이뻐 보여서 북클럽으로 바꾸고 싶어졌습니다.

 

그래서 그냥 단순히 스킨만 변경만 하면 되는 줄 알았는데...

스킨 변경하는 방법을 찾아서 읽어보니까

스킨 변경이 단순한 일은 아니고 좀 번거롭더라고요...😱😱

 

먼저 스킨을 변경하기 전에 구글 서치콘솔, 구글 애널리틱스, 구글 애드센스, 네이버 서치어드바이저 등등

스킨 편집을 통해 HTML 코드에 넣었던 각종 여러 코드들을 미리 복사해놓고

스킨 변경을 하고 나면 스킨 편집으로 복사해뒀던 코드들을 다시 직접 넣어야 됐습니다.

저는 이럴 줄 모르고 이전에 HTML 코드에 삽입했던 코드들을 메모장에 따로 저장하지 않고 있었는데

하나하나 찾아서 나중에 또 이런 일이 생길까봐 이제는 따로 메모장에 저장해뒀습니다.

구글 서치콘솔 등 여러 사이트들에 제출했던 rss와 사이트맵도 스킨을 변경하고 다시 제출했습니다.

 

 

북클럽 스킨으로 변경하고 위의 과정들을 하고 나면 끝일 줄 알았지만

가독성을 위해 다른 블로그에서 추천하는 방법들 몇 가지와

개인적으로 더 이뻐 보이게 HTML 코드와 CSS 코드를 변경했습니다.

 

 

포스팅 제목의 글씨를 두껍게 하고, 배경 이미지를 검게 변경

 

포스팅 제목의 글씨를 두껍게 하고, 배경 이미지를 조금 더 검게 하니 

확실히 제목이 훨씬 더 잘 보였습니다.

포스팅 제목의 글씨를 두껍게, 배경 이미지를 검게 변경 전
포스팅 제목의 글씨를 두껍게, 배경 이미지를 검게 변경 전
포스팅 제목의 글씨를 두껍게, 배경 이미지를 검게 변경 후
포스팅 제목의 글씨를 두껍게, 배경 이미지를 검게 변경 후

 

 

포스팅 목록에서 제목의 말 줄임표 없애기

 

북클럽 스킨에서도 제목이 너무 길면 말 줄임표로 제목을 잘라버렸습니다.

이것도 수정하면 제목이 눈에 더 들어오고, 이게 더 이쁜 것 같기도 합니다.

포스팅 목록에서 말 줄임표로 잘린 포스팅 제목
포스팅 목록에서 말 줄임표로 잘린 포스팅 제목
포스팅 목록에서 말 줄임표를 없앤 결과
포스팅 목록에서 말 줄임표를 없앤 결과

 

 

블로그 이름과 포스팅 제목의 h1 태그 겹침 수정

 

한 페이지의 HTML 코드에서 제목을 의미하는 h1 태그는 무조건 한 번만 사용해야 합니다.

h1 태그를 두 번 이상 사용하면 SEO에 불리하다고 합니다.

HTML을 처음 배울 때 이런 내용은 전혀 없었는데 새로 배우게 됐습니다.

h1 태그인 블로그 제목
h1 태그인 블로그 제목
h1 태그인 포스팅 제목
h1 태그인 포스팅 제목
포스팅 목록에서 h1 태그인 포스팅 개수 부분
포스팅 목록에서 h1 태그인 포스팅 개수 부분

 

저는 블로그 제목의 h1 태그를 div 태그로 변경하고 blog-title 클래스를 넣어준 뒤에

CSS에서도 블로그 제목 h1 태그를 가리키고 있던 선택자들을 찾아서 변경해줬습니다.

그런데 포스팅 제목의 h1 태그와 포스팅 목록에서의 '전체 글' 부분의 h1 태그를

다른 태그로 변경하는 게 맞는지,

제가 수정한 방법인 블로그 제목의 h1 태그를 다른 태그로 변경하는게 맞는지, 정확히 모르겠습니다.

블로그 제목의 태그를 div 태그로 변경하고 blog-title 클래스로 설정
블로그 제목의 태그를 div 태그로 변경하고 blog-title 클래스로 설정

 

 

사이드바에 트위터 타임라인과 SNS 로고 버튼 추가하고 배경색 변경

 

사이드바에 '하고 싶은 거 하는 곳' 티스토리 블로그와 연계해서 사용할

블로그 사이드바에서 바로 볼 수 있는 트위터 타임라인과

인스타그램, 트위터 타임라인 페이지로 이동할 수 있는 SNS 로고 버튼을 추가했습니다.

그런데 스킨 편집에서 SNS 로고 버튼을 단순히 추가만 하면

밑의 사진과 같이 밋밋한 버튼으로 추가됩니다.

스킨 편집으로 추가한 SNS 로고 버튼
스킨 편집으로 추가한 SNS 로고 버튼

 

인스타그램, 트위터, 페이스북 등과 같은 SNS 로고에는 각각 고유의 색깔이 있기 때문에 

이 스킨에서 제공하는 SNS 로고 이미지 파일에 배경색을 각 SNS 고유의 색깔로 변경해서 만들었습니다.

인스타그램 배경색의 그라데이션은 직접 만든 건 아니고,

CSS 코드를 검색하고 찾아서 변경한 것입니다.

 

SNS 로고 버튼을 누르면 이 '하고 싶은 거 하는 곳' 블로그와 관련된

인스타그램, 트위터 타임라인으로 이동합니다.

다만, 인스타그램은 계정만 만들고 아무것도 올리지 않은 상태입니다.

코딩과 같은 공부 내용이 아닌, 일상이나 즐길 거리 등과 관련된 포스팅을 올릴 때 같이 사용할 예정입니다.

 

그리고 스킨 편집에서 단순히 SNS 링크를 넣기만 해서 이 SNS 로고들을 추가하고 난 뒤,

블로그에서 이 SNS 로고 버튼을 클릭하면 보고 있던

현재 블로그 페이지에서 바로 SNS 타임라인으로 넘어가 버립니다.

개인적으로 하이퍼링크를 클릭했을 때 보고 있던 웹 페이지에서 바로 이동하는 것을 정말 싫어하기 때문에

스킨 편집으로 모두 새 탭에서 SNS 타임라인이 열리게 만들었습니다.

사이드바에 추가한 SNS 버튼들과 트위터 타임라인
사이드바에 추가한 SNS 버튼들과 트위터 타임라인

 

지금은 뭔가 다 손봤다고 생각하지만, 나중에 변경할 것이 생기면 또 천천히 바꿔가야겠습니다.

그런데 이제는 스킨을 바꿀 일이 없었으면 좋겠네요... 😓😓

 

 

 

※ 궁금한 부분, 이상한 점 및 오타는 댓글에 부탁드립니다.

※ 공감 버튼과 구독 버튼도 잊지 말고 꾹 눌러주시면 감사하겠습니다~👍👍

반응형

댓글