<티스토리 스킨 편집 & 구글 노출용 포스팅>
지난번에는 티스토리 스킨 편집을 내멋대로 했었는데 시간이 조금 흐르고 공부를 하다보니 새로운 사실을 알게 되었다.
구글 노출용 포스팅은 네이버와는 달리 가운데 정렬을 좋아하지 않는다는 사실이었다.
그렇기에 처음에 수정했던 스킨 소스를 다시 만져야했다.
관리자에 들어가서 스킨편집을 누르고 오른쪽 html편집에 들어가자.
상단에 있는 CSS에서 수정한 부분을 아래 가져와봤다.
/*글씨체 변경 안되길래 아예 전체 적용*/
*{
font-family: 'Bareun_hipi', sans-serif;
}
/* Type Selector Reset */
body {
-webkit-text-size-adjust: 100%;
font-weight: 400;
font-family: 'Bareun_hipi', sans-serif;
font-size: 1em;
line-height: 1.25;
/*글씨체 바꿨더니 글자 간격이 너무 좁아서 이렇게 함*/
letter-spacing: 1px;
}
#header h1 img {
width: auto;
height: 55px;
border-radius: 5px;
/*로고 두껍게 만듦*/
border-bottom:5px solid #eed231;
border-right:4px solid #5e5d5d;
transition:all 0.1s ease;
}
/*로고 움직이게 만듦*/
#header h1 img:active{
transform:translate(1px,1px);
}
}
#gnb ul li {
float: left;
/*padding:26px 16px;*/
padding:39.5px 16px;
/*font-size: 0.875em;*/
font-size: 1.3em;
font-weight: 500;
}
#gnb ul li a:hover {
/*color: #7a583a;*/
color: #456771;
font-weight: 700;
}
/*#gnb ul li a:hover:after {
content: "";
display: block;
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 4px;
margin-top: 22px;
background-color: #7a583a;
}*/
.cover-thumbnail-list-1 ul {
float: left;
/*수정 width: 76%;*/
/*width: 100%;홈에서 아래 썸네일들이 오른쪽으로 치우침*/
padding: 30px;
}
.cover-thumbnail-list-1 ul li {
float: left;
width: 33.3333%;
/*수정*/padding: 16px;
text-align: center;
font-size: 0.875em;
line-height: 2.25;
color: #666;
box-sizing: border-box;
}
.cover-thumbnail-list-1 ul li .title {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/*수정, 너무 붙어있어서 아래쪽에 마진 10*/margin-bottom: 10px;
}
.cover-special-contents ul{
padding-left: 0;
}
.cover-special-contents ul li .thum img {
max-width: 100%;
height: auto;
/*수정*/
text-align:center;
}
.cover-special-contents ul li .title {
display: block;
margin: 0 0 32px;
font-weight: 300;
font-size: 1.875em;
line-height: 1.3333;
color: #7a583a;
/*수정*/padding-left: 20px;
padding-right: 20px;
}
.post-item .title,
.cover-thumbnail-list-2 ul li .title {
display: block;
overflow: hidden;
/*width: 90%; 썸네일 글들이 짤려서 백프로 수정*/
width:100%;
margin-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 700;
font-size: 1em;
color: #000;
-webkit-transition: color .2s;
transition: color .2s;
}
.post-item .excerpt,
.cover-thumbnail-list-2 ul li .excerpt {
display: block;
display:-webkit-box;
overflow: hidden;
/*width: 90%;오른쪽 여백 없애고 글 꽉 채움*/
width: 100%;
height: 4.125rem;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
margin-bottom: 16px;
text-overflow:ellipsis;
font-size: 0.875em;
line-height: 1.375rem;
color: #666;
-webkit-transition: color .2s;
transition: color .2s;
}
.hgroup {
max-width: 1200px;
margin: 0 auto 60px;
padding: 78px 0 40px;
/*border-bottom: 1px solid #7a583a;*/
}
.hgroup .category {
margin-bottom: 20px;
font-weight: 700;
font-size: 0.875em;
color: #557A74;
/*수정*/text-align: left;
}
.hgroup h1 {
font-size: 1.5em;
font-weight: 400;
line-height: 1.0666;
color: #7a583a;
/*수정*/text-align: left;
}
.hgroup .post-meta {
margin: 18px 0 -2px;
font-size: 0.75em;
color: #b2b2b2;
/*수정*/text-align: left;
}
/*본문 수정*/
/* Entry Content */
.entry-content h2 {
clear: both;
margin: 29px 0 22px;
font-size: 1.5em;
line-height: 1.5;
/*수정 color: #000;*/
text-align: left;
color: #456771;
/*이건 안됨 font-weight: 700;*/
}
#tt-body-page h2[data-ke-size]{
font-weight: 700;
}
figure.imageslideblock div.image-container {
align-items: left;
justify-content: left;
margin: 0;
}
figure.imageslideblock div.mark{
text-align:left;
}
figure figcaption{
text-align: left;
}
figure[data-ke-type='video'] figcaption{
text-align: left;
}
figure.imageslideblock figcaption{
text-align: left;
}
/*여기까지 전부 수정 사진, 본문 내용 left 정렬*/
/*폰트크기 바꿈 왼쪽 정렬로 바꿈 폰트 색상 바꿈*/
.entry-content p {
margin-bottom: 22px;
word-break: break-all;
font-size: 20px;
text-align: left;
line-height: 1.5714;
/*color: #666;*/
color: #456771;
}
/* Media Screen - Tablet */
@media screen and (max-width:1199px) {
.cover-special-contents ul{
padding-left: 0;
}
}
@media screen and (max-width:1023px) {
.cover-special-contents ul{
padding-left: 0;
}
.cover-thumbnail-list-1 ul li {
/*수정*/padding-left: 16px;
font-size: 0.75em;
}
}
/* Media Screen - Mobie */
@media screen and (max-width:767px) {
.cover-special-contents ul{
padding-left: 0;
}
.cover-special-contents ul li,
.cover-special-contents ul li:nth-child(even) {
width: auto;
/*수정 margin-bottom: 100px;
padding: 0;*/
margin-bottom:20px;
padding: 20px;
}
.post-item .title,
.cover-thumbnail-list-2 ul li .title {
/*padding-right: 10%; 오른쪽만 여백있어서 없앰*/
padding-right: 0;
font-size: 1em;
box-sizing: border-box;
}
.post-item .excerpt,
.cover-thumbnail-list-2 ul li .excerpt {
height: 2.5rem;
margin-bottom: 8px;
/*padding-right: 10%; 오른쪽 여백 없앰*/
padding-right: 0;
font-size: 0.75em;
line-height: 1.25rem;
}
.entry-content h2 {
font-size: 1.125em;
/*수정*/ font-weight: 700;
}
/*본문 맨 아래 다른 포스팅 목록이 오른쪽으로 치우쳐져 있음*/
.related-articles ul {
/*수정해도 잘 모르겠음 그냥 패딩을 없앰*/
margin-left: -10px;
padding-left: 0;
}
}
요즘 유튜브를 통해 티스토리 포스팅 관련 영상을 많이 보고 있는 중이다.
리뷰요정리남, 이사양잡스, 플러스킴샘TV, 리뷰뎃님 채널 등등 공부를 할 수 있는 곳이 꽤 많다.
이분들의 도움으로 글쓰는 법부터 키워드 선정, 애드센스 등록하는 법까지 무리없이 진행할 수 있었다.
너무 감사드린다.
강의를 들으면서 느낀 점이 있다면 일단 포스팅을 꾸준히 해야 된다는 것이었다.
특히 구글 노출용 포스팅을 노리고 있다면 뚜렷한 주제를 가지고 문단 형식으로 글을 쓰며 왼쪽 정렬이 필수라는 점을 기억해두자.
사진은 최대한 적게 사용하고 가능하다면 사용하지 않는게 좋다고 한다.
구글은 네이버나 다음과는 다르게 전세계 인구를 대상으로 하니 포스팅 용량에 민감하다.
파일이 많아지면 그만큼 용량이 늘어나고 페이지 로딩이 느려지기 때문에 방문자들이 페이지를 이탈할 확률이 높아진다.
구글은 방문자들의 체류시간이 긴 사이트를 좋은 사이트로 인지하기 때문에 사진을 많이 올리면 불리해질 수 있다.
이렇게까지 생각해보지는 않았었는데 꽤 충격이었다.
구글 노출용 포스팅을 만드는건 생각보다 까다롭고 어려운 일이다.
여러 유튜버님들의 강의가 서로 상반되는 내용들도 있었기에 각자 믿음이 가는쪽으로 진행하는게 좋을 것 같다.
티스토리 포스트 주소를 두고 의견이 분분했지만, 나는 숫자로 결정했다.
정확한 정답이 있는것은 아니니 여러가지 실험을 해보고 추후 변경해도 나쁠건 없을 듯 하다.
일단, 초보자의 입장에서는 이정도 세팅이면 충분하다.
너무 깊이 들어가면 머리가 아프니 천천히 글을 쓰면서 수정을 하는게 어떨까?
앞으로 오랫동안 꾸준히 포스팅을 할 계획이라면 서두르지 말고 즐거운 마음으로 해보자.
(인스타툰, 텀블러, 유리컵, 그립톡, 폰케이스, 슬리퍼 등)
hodululu | 인포크링크
hodululu님의 멀티링크를 구경해보세요 👀
link.inpock.co.kr
'코딩 공부 + IT 정보 > 코딩 실험' 카테고리의 다른 글
| 타자 게임 만들고 영어, 스페인어 공부해보자 (Vanilla JavaScript Speed Typing Game) (0) | 2021.07.29 |
|---|---|
| 코딩 자격증 없이 온라인 퀴즈앱 만들기 - 세번째 이야기 (mp3 플레이어) (4) | 2021.07.25 |
| 코딩 자격증 없이 온라인 퀴즈앱 만들기 - 두번째 이야기(short-answer question quiz app) (0) | 2021.07.23 |
| 티스토리 스킨 편집하기(글씨체, 가운데 정렬, scroll top button 등등) (0) | 2021.07.22 |
| 코딩 자격증 없이 온라인 퀴즈앱 만들기 - 첫번째 이야기(multiple choice quiz app) (0) | 2021.07.21 |
