2. 사용하시다가 불편하신 점이 있다면 방명록으로 남겨주세요.
3. 왕래는 하지 않습니다.
세상을 살면 그런 것 같다. ‘이것의 장점은 뭐예요?’라고 물으면 이것에 대한 장점을 들려주는데, ‘단점이 뭐예요?’라고 물으면 ‘장점이 이거이다 보니, 이건 좀 안 돼요.’ 혹은 ‘이게 좀 어려워요.’라고 묻는 경우가 대부분이다.
티스토리 또한 장점이라고 한다면 ‘예쁜 스킨 적용할 수 있어요’와 같은 장점이 있지만, 단점을 따지자면 ‘예쁘긴 예쁜데 내가 원하는대로 조금씩 수정하기가 어려워요.’가 맞지 않나 싶다.
여기에서 내가 알려주고자 하는 건 이거다.
대부분 스킨 수정하는 방법을 알려주는 글을 읽어보면 ‘어떤 스킨’의 ‘어떤 부분 수정하기’라는 제목으로 올라오는 경우가 많다.
예를 들면 북스킨 제목 폰트 바꾸기 등등.
나는 스킨과 전혀 상관없이 내가 원하는 곳을 찾는 방법을 알려주고자 한다.
1. 기본적인 약속
딱 하나만 지키면 가능하다.
치환자에 ★이 보인다면 ★은 꼭 없애주기
앞으로 치환자를 작성할 때는 [##★_list_conform_★##]과 같은 형태로 작성할 것이다. 하지만 여러분이 이걸 그대로 따라 한다거나, 검색하게 될 경우 전혀 적용이 안 되거나, 전혀 안 나올 수 있다.
따라서 여러분은 검색할 때는 밑줄 친 부분만 검색하기로 하고. (저 #부터 시작해서 끝까지 검색하는 건 참 비효율적이라고 생각한다.)
직접 수정할 일이 있다면 저 별을 없앤 채로 해주는 것이 좋다.
Q. 애초에 치환자에 별을 빼고 적어주면 되지 않아요?
A. 별을 빼고 적었을 때는 이렇게 보입니다. 제가 2가지 사진을 보여드릴 건데요. 첫번째 사진은 제가 본문에 적은 글이고, 2번째 사진은 제가 본문에서 작성한 것 그대로 미리 보기(즉 발행했을 때 보이는 모습)입니다.
작성했을 때 모습
차이점이 보이시나요? 저는 분명히 치환자를 작성했음에도 제가 쓰는 카테고리명이 보이는 걸로 보이시죠? 제가 아무리 그대로 보이려고 해도 보일 수가 없어서
제가 [##★_article_rep_category_★##] 이런 식으로 치환자를 작성할 예정입니다.
★만 빼면 티스토리에서 알아서 나온다. 그 정도로 이해해주시면 됩니다.
2. 가장 많이 수정해보고 싶지만, 뭘 건들어야 할지 모르는 곳
여기에서 티알못 혹은 티린이들이 스킨명 + 본문 폰트 수정 등의 내용으로 찾아본다. 나쁘지 않은 방법이다.
하지만!
내가 다른 스킨을 사용했을 때 적어도 어디를 수정해야 할지 찾는 방법, 정석 중의 정석을 알려주려고 한다.
3. 가장 많이 찾는 부분
가장 많이 수정하려고 하는 부분은 내 생각엔 본문 타이틀과 본문이라고 생각한다.
Q. 당신이 말하는 타이틀과 본문은 어디인가요?
A. 이미지로 설명하는 게 더 빠르니까 이미지 투척!
여기에 1번에 해당하는 것이 본문의 타이틀, 2번에 해당하는 것이 본문이라고 할 수 있다.
왜 여기를 가장 많이 찾는가 하냐면 기본적으로 우리는 티스토리에 글을 썼을 때 정보든, 내가 쓴 일기글이든 원하는 폰트로 예쁘게 보이기를 원한다. 그런데 내가 HTML도 몰라, CSS도 몰라, 스크립트? 당연히 모르지. 이 상태라면 얼마나 절망적이겠는가.
하지만 당신은 이제 본문의 타이틀의 폰트를 수정할 수 있고 더 나아가 꾸밀 수도 있고, 본문을 꾸밀 수도 있을 것이다.
왜냐하면 기본적으로 어떤 스킨을 적용해도 이 부분을 건들어서 수정해야 한다는 걸 아니까!
폰트 외에 다른 부분을 꾸미는 건 기술적인 면과 디자인적인 감각적인 면이 들어가야 한다. 나는 디자인적인 면이 없으니, 꾸미는 건 어렵겠지만 어떻게 하면 조금 효과를 줄 수 있는지에 대해 설명해주고자 한다.
한 번쯤은 봐두어도 좋을 글
[정보] 티스토리 모바일웹 본문 꾸미기 | 밑줄 형광펜 효과주기
1. 「티스토리 모바일웹 본문 꾸미기」를 시작하게 된 계기 사실 내 블로그를 봐주시는 분이 아실지는 모르겠지만, 내 블로그는 티스토리에 검색만 해도 나오는 "밑줄 형광펜 효과"를 활용해서
feverpitch.tistory.com
[정보] 티스토리 모바일웹 본문 꾸미기 | 밑줄 형광펜 효과 주기(고급)
1. 티스토리 모바일웹 본문 꾸미기 | 밑줄 형광펜 효과 주기 [고급 편] 저번 글이 기초였다면 이번엔 고급 편이라는 이름으로 한 번 데리고 와보았다. 내 티스토리 블로그를 보면서 궁금하지 않았
feverpitch.tistory.com
★ 찾기 위한 준비
1. 관리(manage) > 꾸미기 > 스킨 편집 클릭
2. 스킨 편집 > html 편집 클릭
3. html에 커서를 한 번 둔 다음 ctrl 버튼과 F 버튼을 동시에 눌러줍니다.
위와 같이 보여야 검색이 훨씬 원활하게 됩니다. 잘 모르겠다면 <head> 뒤에 마우스를 한 번 누른 다음 ctrl 버튼과 f 버튼을 동시에 누르면 나오게 됩니다.
만약에 아래와 같이 적용 옆 부분에 검색창이 뜬다면, 검색이 되기는 하지만 원활하게 되지는 않습니다. 따라서 꼭 위와 같은 검색창이 뜰 수 있도록 해주세요.
3.1 본문 타이틀 찾기
[##★_article_rep_title_★##]을 검색해줍니다.
여기에서 우리가 알아야 할 것은 뭐다? 밑줄 친 부분만 검색해 준다! 검색은 밑줄 친 부분만 검색해 주세요. (##까지 다 치면 여러분 힘들어요.)
검색했을 때 하나만 나올 수도 있고 여러 개가 나올 수 있습니다. 당황하지 마세요.
하나만 나올 경우는 아마 예시와 같이 보일 겁니다.
<s_article_rep>
.
.
<div class="article-title">[##★_article_rep_title_★##]</div>
.
.
</s_article_rep>
위와 같이 나왔다? 그렇다면 우리가 해야 할 일은 뭐다? 저 div 안에 class로 적혀 있는 article-title이라는 애를 수정해 줄 겁니다.
Q. 어? 저는 div class 안에 이름이 "article-title"이 아닌데요?
A. 스킨을 만든 사람에 따라 class의 이름이 다를 수 있습니다. 저는 예시로 article-title이라는 이름을 부여한 것일 뿐이니, class명만 잘 기억하시면 됩니다. 만약에 이름이 title2이라고만 되어 있다면 그 class 이름만 기억하시면 됩니다.
Q. 저는 div가 아니고 span인데요?
A. 이 또한도 스킨을 만든 사람에 따라 다릅니다.
div든 span이든 상관없이 [##★_article_rep_title_★##]을 감싸주고 있는 클래스를 한 번 찾아보세요.
ex) <span class="titi">[##★_article_rep_title_★##]</span>
이런 식이라면 titi만 외워주시면 되는 겁니다. 간단하죠?
위에는 하나만 나온 경우인데, 여러 개가 나와 있을 가능성이 있습니다.
예시를 들어드릴게요.
<s_article_rep>
<s_index_article_rep>
.
.
<div class="title"> [##★_article_rep_title★##]</div>
.
.
</s_index_article_rep>
<s_permalink_article_rep>
.
.
<div class="article-title">[##★_article_rep_title★##]</div>
.
.
</s_permalink_article_rep>
</s_article_rep>
쓰시는 스타일이 이런 식일 겁니다.
우리는 어떤 걸 선택해야 할까요? 우리가 원하는 건 본문을 볼 때 보이는 타이틀이기 때문에
<s_permalink_article_rep> ~ </s_permalink_article_rep> 사이에 있는 [##★_article_rep_title_★##]의 클래스를 가지고 오면 됩니다.
즉, title이 아니라 article-title이라는 아이가 우리가 수정하고자 하는 본문의 타이틀이라는 소리입니다.
3.2 본문 찾기
를 검색해 줍니다.
Q. 얘도 하나가 아닌데요?
A. 그럴 겁니다.
하나가 나오는 경우는 거의 없습니다. 왜냐하면 저 article_rep_desc라는 게 페이지에도 쓰이기도 하는 아주 다재다능한 친구이기 때문이죠. 하지만 우리는 본문에 쓰이는 저 치환자를 찾아줄 겁니다.
어떻게요?
위에서 설명했던 것과 거의 일맥상통합니다.
위에서 타이틀을 찾을 때 하나만 나왔을 경우 예시를 한 번 들어보겠습니다.
<s_article_rep>
.
.
<div class="article-title">[##★_article_rep_title_★##]</div>
<div class="article">[##★_article_rep_desc_★##]</div>
.
.
</s_article_rep>
타이틀을 하나만 찾았던 분들은 대부분 <s_article_rep> ~ </s_article_rep> 그 사이에 있는 [##★_article_rep_desc_★##]를 찾아서 하시면 됩니다.
타이틀 같은 경우 span은 본 적이 있는데 본문은 span을 본 적은 거의 없었던 것 같습니다. 대부분이 div였던 것 같아요. 물론 아닌 경우에도 당황하지 말고 class 안에 있는 내용만 잘 찾아보시면 됩니다.
대부분 본문은 article, content, article-content, content-article 등등으로 많이 사용되긴 하지만, 역시 사용자에 따라 다르긴 다릅니다. 아무튼 검색을 정확하게 해 보는 게 중요하다는 것.
자, 그리고 타이틀 검색했을 때 여러 개가 나왔던 분들은 아마 이런 식일 거예요.
<s_article_rep>
<s_index_article_rep>
.
.
<div class="title"> [##★_article_rep_title★##]</div>
.
.
</s_index_article_rep>
<s_permalink_article_rep>
.
.
<div class="article-title">[##★_article_rep_title★##]</div>
<div class="article">[##★_article_rep_desc★##]</div>
.
.
</s_permalink_article_rep>
</s_article_rep>
거의 타이틀과 함께 있다고 생각하셔도 무방합니다. 아까 타이틀을 찾을 때처럼, <s_permalink_article_rep> ~ </s_permalink_article_rep> 사이에 있는 [##★_article_rep_desc_★##]의 클래스를 가지고 오면 됩니다.
쉽죠?
1. 본문 안에 있는 치환자는 대부분 <s_article_rep>~</s_article_rep> 사이에 있다.
2. 찾으려는 치환자1가 본문에 해당한다면 그 해당 class를 수정해라.
4. 본문 타이틀과 본문의 치환자를 찾았다! 그렇다면?
수정을 해줘야 하지 않겠는가?
원하는 폰트는 눈누 사이트에서 웹폰트로 가져오는 걸 추천한다. 허용 범위를 잘 체크할 것!
위에서 알아온 class를 찾아서 적용시켜 줄 것이다.
1. CSS를 눌러주기
2. Ctrl 버튼과 F버튼 눌러주기
3. 검색하기
여기에서 검색할 때는 [##★_article_rep_title_★##]과 같은 치환자를 검색하지 않는다. 앞서 찾은 class 명을 찾을 거다.
<s_article_rep>
.
.
<div class="article-title">[##★_article_rep_title_★##]</div>
<div class="article">[##★_article_rep_desc_★##]</div>
.
.
</s_article_rep>
우리가 찾은 class명은 article-title과 article이다. 물론 당신은 당신 스킨으로 찾은 class명을 찾으면 된다.
대부분 검색하면 나올 것이다.
.article-title {
font-size: 16px;
우앵에엥 어쩌구 저쩌구
}
이런 식으로 나올 건데, 여기에 우리가 font-family만 입력을 해줄 것이다.
.article-title {
font-family: 눈누체;
font-size: 16px;
우앵에엥 어쩌구 저쩌구
}
Q. 클래스명(예시: article-title) 앞에 .(점)이 있는데 없애야 하나요?
A. 아니요. 그대로 내버려 두시면 돼요.
Q. 클래스명(예시: article-title)이 있긴 있는데, 이런 식으로 보여요. 어떻게 해요?
.empty, .article-title {
font-size: 16px;
우앵에엥 어쩌구 저쩌구
}A. article-title만 수정해 줄 거라면 1안처럼. 그냥 저 보이는 empty가 뭔지 모르겠지만, 그 애도 폰트 수정을 할 거라면 2안처럼 수정하시면 됩니다.
1안
.empty, .article-title {
font-size: 16px;
우앵에엥 어쩌구 저쩌구
}
얘는 그대로 두시고
.article-title{
font-family: 눈누체;
}
만 추가
2안
.empty, .article-title {
font-family: 눈누체;
font-size: 16px;
우앵에엥 어쩌구 저쩌구
}
정말 만에 하나. 정말 만에 하나 css에 검색을 했는데 나오지 않는다!
그럴 경우에는 여러분이 직접 추가하면 된다.
class명 앞에 .(점)을 찍고 {} ← 열어주고 font-family를 입력해 주면 된다.
.article-title {
font-family: 눈누체;
font-size: 10px;
}
꼭 기억할 것
✓ class명 앞에 꼭 .(점)을 찍을 것
✓ { } 안에 수정할 내용(font-family 등)을 넣어줄 것.
✓ 수정할 내용을 적었으면 꼭 ; 로 닫아줄 것.
이상 끝! 다음에 궁금해할지 연구해서 오도록 하겠다!
방금 읽은 이 글이 도움이 되었다면 공감, 댓글을 남겨주세요. :)
- 예시) [##★_article_rep_desc_★##] [본문으로]
![[정보] 애드센스 관련 Q&A](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbEV0yr%2Fbtr4FmeVwUn%2FHWuLntx7mqcQReJyhDfGhk%2Fimg.png)
![[정보] 도도 포인트, 바꾼 휴대폰 번호로 포인트 이관하는 방법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fp2DyJ%2Fbtr4WHbr22r%2FKLFoiK77tAep6eAgfuR7DK%2Fimg.png)
![[정보] 2023년 봄 꽃, 언제 피는지 알아? 개화시기와 꽃축제 1+1 1탄](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fd66GR2%2Fbtr3SHcgjbr%2FdYsYx0yfR69FoKRHuBP8Y1%2Fimg.png)
![[정보] 수동으로 Google 태그 설치하는 방법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F8Pm9E%2Fbtr3Hn6hOZI%2FAlTKLhcHAN8pReJ9QQRCJ1%2Fimg.png)