북클럽 스킨 수정 방법들(제목, 타이틀바, 사이드바, 하이퍼링크, 글자색, 글꼴, 글씨체, 애드센스 광고)

티스토리 스킨 변경 및 주요 변경 사항 모음

변경 전 스킨    =>    변경 후 스킨

#1                          Book Club (사용자 수정), 북클럽

스킨 변경으로 인한 주요 변경 사항

사이드바 추가로 인한 상단 고정 광고 제거.

솔직히 다른 블로그 뒤적거릴 때 포스팅 최상단에 광고부터 뜨면 조금 짜증남. + 사이드바 광고가 더 효율적으로 보여 스킨 변경

북클럽 기본 스킨 대비 세부 변경 사항 및 수정 방법

북클럽 스킨의 이런저런 사항들을 수정하는 방법들은 모두 CSS를 수정하는 것으로 해결할 수 있었다. 아래 방법들을 참고하는 사람이 있지 않을까 싶어 CSS 번호도 함께 기록해두었으니 도움이 되었으면 좋겠다.

북클럽 기본 스킨(좌)과 수정 버전(우) 비교

사이드바 우측에서 좌측으로 변경, 사이드바 가이드라인 제거, 제목이 차지하는 공간 축소, 하이퍼링크 텍스트 색상 변경, 제목 배경 투명도 조절

타이틀 바 폭 조절

1042	.post-cover {
1043		position: relative;
1044		z-index: 20;
1045		display: table;
1046		width: 100%;
1047		height: 200px;
1048		background-color: #cbcbcb;
1049		background-position: 50% 50%;
1050		background-size: cover;
1051		box-sizing: border-box;
1052	}

위 항목에서 height 픽셀값 조정. 최저값이 200px이기때문에 200px보다 작게 설정해도 200px로 설정됨.

타이틀 바 투명도 조절

1053	.post-cover:before {
1054		content: "";
1055		position: absolute;
1056		top: 0;
1057		left: 0;
1058		z-index: 0;
1059		width: 100%;
1060		height: 100%;
1061		background-color: rgba(0,0,0,0.8);
1062	}

background-color: rgba(0,0,0,0.8); 에서 0.8이 투명도다. 0에 가까울수록 검은 블러 처리가 연해지고, 1에 가까울수록 배경으로 사용되는 사진이 까맣게 되어 가려짐.

제목이 타이틀 바 영역을 벗어나는 문제 해결

1063	.post-cover .inner {
1064		display: table-cell;
1065		position: relative;
1066		z-index: 10;
1067		vertical-align: bottom;
1068		padding-bottom: 20px;
1069	}

타이틀 바 영역의 폭을 작게 조절하면 제목이 타이틀바 상단에 걸려 글자가 잘리게 되는데, padding-bottom 값을 조절해서 위치를 조절해줘야 한다. padding-bottom은 타이틀 바 하단부터 제목 글자 하단까자의 폭을 결정하는 값이다. 0픽셀로 설정하면 하단 라인과 너무 딱 붙기 때문에 20픽셀로 설정.

본문과 제목 사이의 간격 조절하기

440	#tt-body-page #container {
441		padding-top: 220px;
442	}

타이틀 영역을 줄이면 본문과 제목 사이의 폭이 과하게 넓어진다. 이 때 padding-top 값을 이용해 제목과 타이틀 영역의 폭을 조절해줘야 한다. padding-top 값 설정 시 주의할 점은 타이틀 영역의 상단부터의 본문 상단의 영역이기 때문에 0픽셀로 설정할 경우 본문 내용 중 상단 부분이 제목에 가려진다. 해당 값 수정 시 최솟값은 타이틀 영역의 폭의 넓이보다 크게 설정할 것. 타이틀 영역 + 20픽셀인 220픽셀로 설정했다.

사이드바 가이드라인 비활성화

319	/* 사이드바 비활성화 #container .content-wrap:before {
320		content: "";
321		position: absolute;
322		top: 0;
323		left: 50%;
324		z-index: 10;
325		width: 1px;
326		height: 100%;
327		margin-left: 255px;
328		background-color: #eee;
329	}*/

본문과 사이드바 사이의 경계선은 비활성화해뒀다. 이유는 사이드바 영역에 맞춰 설정해주기 귀찮아서. 사이드바 영역을 300픽셀로 고정하고 경계선 등장 구간도 300픽셀로 잡았는데 본문 영역을 침범하길래 이것저것 계산하기 귀찮아서 비활성화 시켰다.

/*코드*/로 비활성화해도 되고 그냥 삭제해도 문제 없다. 다만 언젠가 써볼까 하는 생각이 들까봐 지우지 않고 비활성화만 시켜둠.

사이드바 경계선 배경색으로 대체하기

351	#aside {
352		float: left;
353		width: 18.229166666666666666666666666667%;
354		padding: 75px 20px 32px;
355		box-sizing: border-box;
356		background-color: #ececec;
357	}

경계선을 없앤 대신 사이드바 영역에 배경색을 구현하는 것으로 사이드바와 본문 사이의 모호함을 해소했다. background-color 값에 원하는 색상 코드를 입력해서 적용시키면 된다. 사이드바는 기본적으로 우측에 설정되어있기 때문에 float 값이 LEFT가 아닌 RIGHT로 되어 있다. 좌측에 놓고 싶은 경우 해당 값을 LEFT로 수정하고 본문의 float 값을 LEFT에서 RIGHT로 수정해줘야 한다.

사이드바와 본문의 차지 비율 설정

337	#content {
338		float: right;
339		width: 81.770833333333333333333333333333%;
340		padding: 20px 20px 60px;
341		box-sizing: border-box;
342	}

351	#aside {
352		float: left;
353		width: 18.229166666666666666666666666667%;
354		padding: 75px 20px 32px;
355		box-sizing: border-box;
356		background-color: #ececec;
357	}

사이드바와 본문의 차지 비율을 수정했다. 열려있는 창의 좌우 너비를 기준으로 1920~1200픽셀은 사이드바의 너비가 최대 350픽셀이 되도록, 1200~1080픽셀은 사이드바의 너비가 최대 300픽셀이 되도록, 1080~768픽셀은 사이드바의 너비가 최대 250픽셀이 되도록 비율로 설정했다.

※ 사이드바의 크기를 화면 비율에 맞추는 것이 아닌 너비 폭에 따라 사이드바가 일정한 크기로 고정되도록 수정했다.

설정 방법은 아래 글 참고.

https://rasdin.tistory.com/602

사실 350픽셀, 300픽셀, 250픽셀로 각각 고정값으로 설정하고 싶었는데 사이드바 너비를 고정하면 그에 맞춰서 본문의 너비는 자동으로 맞춰지도록 설정하는 법을 몰라서 포기했다. 사이드바만 고정 값으로 설정하면 충분한 너비가 나오면 사이드바를 노출하고, 그렇지 않으면 사이드바가 증발해버려서 포기.

각 창 크기별로 본문의 너비와 사이드바의 너비를 고정시키는 방법도 있지만, 그렇게 하면 좌우 스크롤로 사이드바를 가린 채로 사이트를 확인할 수 있기 때문에 따라다니는 족쇄마냥 창 크기를 조절해도 보이도록 비율로 설정했다. 고정적인 너비를 포기한 대신 실시간으로 변하는 화면 크기에 맞춰지도록 했다.

원래 padding 값이 padding: 20px 20px 60px;이 아닌 padding: 20px 0 60px; 이런 식으로 되어있을 텐데, 가운데 값은 좌우 여백에 대한 값이다. 사이드바와 본문 동일하게 좌우 20픽셀씩 여백을 주기위해 수정했다.

기본 글꼴과 글자색, 글자크기 변경

28		-webkit-text-size-adjust: 100%;
29		font-weight: 400;
30		font-family: 'Nanum Gothic', 'Noto Sans KR', sans-serif;
31		font-size: 1.05em;
32		line-height: 1.25;
33		color: #000;
34	}

가독성이 좋은 글씨체를 기본으로 해야지, 별 이상한 글씨체를 기본으로 설정해놔서 나눔 고딕으로 수정했다. 색상도 무슨 흐리멍텅한 회색으로 설정해놔서 검정색으로 수정했다. 수정한 부분은 font-family: 'Nanum Gothic', color: #000;

글자 크기도 변경했다. 이전 설정과 같이 포인트 단위인 12pt로 변경할까 싶었지만, 일단은 기존 사이즈 규격인 em 단위로 설정했다. 수정한 내용은 font-size: 1.05em; 이다.

p 태그 글자 크기, 글자색 변경

1440	.entry-content p {
1441		margin-bottom: 32px;
1442		word-break: break-all;
1443		font-size: 1.05em;
1444		line-height: 2;
1445		color: #000;
1446	}

기본 글씨체만 수정해도 상관은 없으나, 티스토리 글쓰기에서 작성하는 텍스트는 <p>텍스트</p> html로 이루어져 p 태그 설정을 기본 글꼴과 동일하게 font-size: 1.05em; color: #000; 으로 설정.

하이퍼링크 색상 그지같은 민트색에서 파란색으로 변경

1437	.entry-content a {
1438		color: #0055ff !important;
1439	}

.entry-content a 하위에 있는 컬러 값을 color: #0055ff !important; 로 수정해줘야 한다. !important 문구를 추가하지 않으면 수정 이후 발행하는 포스팅의 하이퍼링크 색상은 변경되지만 수정 이전에 작성된 포스팅에 있는 하이퍼링크의 색상은 변경되지 않는다. 이상한 희끄무리한 민트색은 왜 쓰는지 모르겠다. 하얀 배경에는 제대로 구별도 안되는데.

그런데 하이퍼링크 색상 변경에 한 가지 문제가 있는데..

아래처럼 블로그 하단에 카테고리의 다른 글 리스트가 하이퍼링크 색상과 동일한 색으로 변경된다는 것이다. 따로 설정해주면 해결할 수 있겠지만 방법도 모르고 귀찮아서 패스.

덤으로 현재 보고 있는 글의 제목에 밑줄, underline이 설정되어있는데, 언더라인이 너무 바짝 붙어 보기도 좋지 않고 다른 글들과 색상으로 충분히 인식이 가능하다고 생각해 해당 설정을 해제했음.

그 외

모바일에서 접속하는 경우 사이드바가 제거되는 대신 기존과 똑같이 상단 고정 광고가 노출되도록 설정

보기 싫은 상단 광고를 없앤 대신 사이드바에 광고를 게재하기로 했지만, 모바일 기기와 같은 화면이 작은 기기로 접속할 경우 사이드바가 노출되지 않는다는 것이 걸렸다. 이게 될지 안될지 긴가민가했는데, 해보니까 됐다.

※ 모바일 웹에서만 노출되는 광고의 너비를 일정하게 고정하지 않는 방법으로 변경했다. 아래 글 참고.

https://rasdin.tistory.com/599

PC 웹에서는 상단 광고가 노출되지 않고, 모바일 웹에서만 상단 광고가 노출된다. 특정 너비 이하에서만 애드센스 코드가 활성화되도록 설정하면 된다. 단, 반응형 광고를 넣는다 하더라도 노출되는 광고의 크기는 고정된다. 티스토리 플러그인 중 반응형 광고 상단에 아래 코드를 삽입하면 된다.

<style>

@media (max-width:780px){

  .my-ad-mobile{display:inline-block;width:300px;height:250px}

}

</style>

<center><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- 애드센스 광고 -->

<ins class="adsbygoogle my-ad-mobile"

     data-ad-client="ca-pub-애드센스ID넘버"

     data-ad-slot="애드센스 슬롯번호"

<script>

     (adsbygoogle = window.adsbygoogle || []).push({});

</script></center>

사이드바에 노출되는 오늘 방문자, 어제 방문자 통계 삭제

이것도 될까 했는데 해보니까 되더라. 오늘 방문자와 어제 방문자만 삭제한 이유는 블로그 방문자가 너무 적어서 공개하기가 부끄러운 나머지 삭제. 전체방문자는 그냥 뭔가 있어보이니까 그대로 사용하기로 결정.

전체 방문자 수도 부끄러울 정도로 적어서 그냥 방문자 통계는 제거..

비밀 댓글을 작성 못하게 수정

티스토리의 고질적인 문제인데, 비로그인으로 비밀 댓글 작성시 블로그 주인 외에 해당 댓글 내용을 확인할 수 있는 방법이 존재하지 않음. 비밀 댓글로 조금 이상한 내용이 올라오는 경우도 종종 있기 때문에 비밀 댓글을 사용하지 못하게 설정. 어차피 댓글은 승인을 받아야 일반 노출이 가능.

댓글란에 노출되는 메세지 수정

가끔씩 공격적인 말투나, 반말로 댓글을 적는 사람들이 나타난다. 이런 댓글을 보게 된다면 상처를 받기 때문에 반말이 아닌 경어를 사용해달라는 문구가 노출되도록 메세지를 수정했다.

어정쩡하게 흐릿한 회색으로 설정된 글자색들 조금 더 진하게 수정

그 외 확인해야할 문제점들

관련글로 노출되는 글들의 미리보기가 노출이 되지 않음 => 이미지가 포함되지 않은 글들만 이런 것으로 추정 중

삽입한 표가 웹페이지 크기에 맞춰 조절되지 않음 => 티스토리 글쓰기에서 표 작성이 귀찮아서 한글에서 작성한 다음 복사 붙여넣기한 표들에 대해 나타나는 문제인 것으로 추정 중.