블로그 서식 기능을 활용하면 관련 링크 모음을 만들어 두거나, 구글 애드센스 본문 광고를 미리 만들어 두고 넣어서 사용할 수도 있습니다. 저는 블로그 팁 관련 주제를 작성하고 본문 마지막에 관련 링크를 서식으로 모아서 항상 넣곤 했었는데 이게 모바일로 보면 상당히 보기 지저분하더라구요. 그래서 방법을 생각해보다가 스크립트를 하나 만들게 되었습니다. 아래 내용 보시고 필요하신 분은 잘 사용하시길 바랍니다 ^^
모바일과 PC화면의 차이
모바일 화면과 PC화면은 본문 너비가 다르기 때문에 글을 PC로 작성할 땐 괜찮다가 모바일로 보게 되면 이상할 때가 간혹 있습니다. 제가 사용하는 서식이 간혹 그런데 아래 비교 화면 한번 보시죠
본문으로 보면 깔끔한데 모바일로 보면 한줄이 두줄이 되면서 복잡하고 보기 싫게 생겼죠?? 읽기도 힘들어서 잘 눈에 들어오지도 않습니다. 이 부분을 쫌 깔끔하게 해주는 코드를 공유해 드리겠습니다.
서식 작성
서식 만들기에 가서 새 서식을 만듭니다. HTML 보기를 한 후 아래와 같이 코드를 추가해 줍니다.
<div style="text-align: left;">
<span>
<style type="text/css">
.tistory_tips_pc {
display: inline-block;
}
.tistory_tips_mobile {
display: none;
}
@media (max-width:799px) {
.tistory_tips_pc {
display: none;
}
.tistory_tips_mobile {
display: inline;
}
}
@media (min-width:1020px) {
.tistory_tips_pc {
display: inline;
}
.tistory_tips_mobile {
display: none;
}
}
</style>
<div class="tistory_tips_pc">
<!--PC 본문에 보이는 부분-->
<p><a href="https://natehate.tistory.com/4" target="_blank" rel="noopener">2020/07/28 - [정보/블로그] - 제가 사용하는 스킨은요 (feat. 서브 메뉴 여백 주기)</a></p>
<p><a href="https://natehate.tistory.com/5" target="_blank" rel="noopener">2020/08/01 - [정보/블로그] - 티스토리 스킨 편집 쉽게하는 팁 (F12의 마법)</a></p>
<p><a href="https://natehate.tistory.com/7" target="_blank" rel="noopener">2020/08/01 - [정보/블로그] - 티스토리 글 구글 검색 누락 등록 방법 (구글 노출)</a></p>
<p><a href="https://natehate.tistory.com/9" target="_blank" rel="noopener">2020/08/02 - [정보/블로그] - 티스토리 사진/이미지 가로로 배열하기 (2개 이상 나란히 놓기)</a></p>
<p><a href="https://natehate.tistory.com/11" target="_blank" rel="noopener">2020/08/03 - [정보/블로그] - 블로그 최적화 도움 사이트 모음 (last updated 20.08.04)</a></p>
<p><a href="https://natehate.tistory.com/14" target="_blank" rel="noopener">2020/08/04 - [정보/블로그] - 카카오 애드핏 (Kakao AdFit) 가입 신청 및 적용하기</a></p>
<p><a href="https://natehate.tistory.com/15" target="_blank" rel="noopener">2020/08/05 - [정보/블로그] - 카카오 애드핏 (Kakao AdFit) 심사 하루만에 결과가 나오네요</a></p>
<p><a href="https://natehate.tistory.com/17" target="_blank" rel="noopener">2020/08/07 - [정보/블로그] - 블로그 후원 서비스 '도네리카노' 적용하기 (티스토리에 기부/후원 버튼 만들기)</a></p>
<p><a href="https://natehate.tistory.com/22" target="_blank" rel="noopener">2020/08/11 - [정보/블로그] - 티스토리용 블로그 소통/품앗이 창구 - 티스토리 포럼 활용하기!</a></p>
<p><a href="https://natehate.tistory.com/25" target="_blank" rel="noopener">2020/08/12 - [정보/블로그] - 티스토리 '서식' 기능 활용해서 글 작성 효율 200% 높이기</a></p>
<p><a href="https://natehate.tistory.com/27" target="_blank" rel="noopener">2020/08/14 - [정보/블로그] - 티스토리 블로그 본문 [테이블 가운데 정렬] & [링크 새창열기] 적용 방법</a></p>
<p><a href="https://natehate.tistory.com/30" target="_blank" rel="noopener">2020/08/18 - [정보/블로그] - 23일만에 구글 애드센스 한번에 통과했습니다!! (8/11 신청)</a></p>
<p><a href="https://natehate.tistory.com/32" target="_blank" rel="noopener">2020/08/20 - [정보/블로그] - 구글 애드센스(AdSense) & 카카오 애드핏(AdFit) 한달만에 승인 후기 & 꿀팁 정리</a></p>
<p><a href="https://natehate.tistory.com/36" target="_blank" rel="noopener">2020/08/23 - [정보/블로그] - 티스토리 블로그 빙(Bing)에 검색 등록 / 노출 시키는 방법</a></p>
<p><a href="https://natehate.tistory.com/43" target="_blank" rel="noopener">2020/08/28 - [정보/블로그] - 티스토리 블로그 쿠팡파트너스/카카오애드핏 사각형 광고 2개 넣기(PC: 2개, 모바일: 1개)</a></p>
<p><a href="https://natehate.tistory.com/44" target="_blank" rel="noopener">2020/08/29 - [정보/블로그] - 티스토리 블로그 구글 애드센스 모바일 자동광고 <앵커, 모바일 전면 광고> 넣기</a></p>
</div>
<div class="tistory_tips_mobile">
<!--모바일 본문에 보이는 부분-->
<p><a href="https://natehate.tistory.com/4" target="_blank" rel="noopener">1. 제가 사용하는 스킨(feat. 서브 메뉴 여백)</a></p>
<p><a href="https://natehate.tistory.com/5" target="_blank" rel="noopener">2. 티스토리 스킨 편집 쉽게하는 팁 (F12의 마법)</a></p>
<p><a href="https://natehate.tistory.com/7" target="_blank" rel="noopener">3. 티스토리 글 구글 검색 누락 등록 (구글 노출)</a></p>
<p><a href="https://natehate.tistory.com/9" target="_blank" rel="noopener">4. 티스토리 사진/이미지 가로로 배열하기</a></p>
<p><a href="https://natehate.tistory.com/11" target="_blank" rel="noopener">5. 블로그 최적화 도움 사이트 모음 </a></p>
<p><a href="https://natehate.tistory.com/14" target="_blank" rel="noopener">6. 카카오 애드핏 가입 신청 및 적용하기</a></p>
<p><a href="https://natehate.tistory.com/15" target="_blank" rel="noopener">7. 카카오 애드핏 심사 하루만에 결과가 나오네요</a></p>
<p><a href="https://natehate.tistory.com/17" target="_blank" rel="noopener">8. 블로그 후원 서비스 '도네리카노' 적용하기 </a></p>
<p><a href="https://natehate.tistory.com/22" target="_blank" rel="noopener">9. 티스토리용 블로그 소통 창구 티스토리 포럼</a></p>
<p><a href="https://natehate.tistory.com/25" target="_blank" rel="noopener">10. 티스토리 '서식' 기능 활용 작성 효율 UP</a></p>
<p><a href="https://natehate.tistory.com/27" target="_blank" rel="noopener">11. 티스토리 [테이블 가운데 정렬/링크 새창열기]</a></p>
<p><a href="https://natehate.tistory.com/30" target="_blank" rel="noopener">12. 23일만에 구글 애드센스 통과(8/11 신청)</a></p>
<p><a href="https://natehate.tistory.com/32" target="_blank" rel="noopener">13. 구글 애드센스/카카오 애드핏 한달만에 승인</a></p>
<p><a href="https://natehate.tistory.com/36" target="_blank" rel="noopener">14. 티스토리 블로그 빙(Bing)에 검색 등록/노출</a></p>
<p><a href="https://natehate.tistory.com/43" target="_blank" rel="noopener">15. 쿠팡파트너스/카카오애드핏 광고 2개 넣기</a></p>
<p><a href="https://natehate.tistory.com/44" target="_blank" rel="noopener">16. 구글 애드센스 모바일 자동광고 앵커/전면</a></p>
</div>
</span>
</div>
코드 아래 부분을 보면 뭔가 링크가 많이 들어간 부분 있죠? 이 부분은 티스토리에 이전 글 넣기 플러그인을 통해 넣은 거고요, 윗부분이 PC 화면에서 보여질 부분이고 아래 부분이 모바일 화면에서 보여질 부분입니다. 링크는 같으나 오른쪽에 화면에 보여주는 글이 줄어들어 있는 걸 확인할 수가 있습니다. 위 내용으로 서식을 만든 후 글 작성 히 서식을 불러와 저장을 하면 아래와 같이 모바일 화면이 정리가 됩니다. 물론 PC화면은 기존과 같은 화면이 뜨구요.
위 스크립트를 다운로드하신 후 PC/모바일 부분을 나눠서 작성하셔서 서식으로 만들어 쓰셔도 되고, 본문 작성 시 HTML 보기로 하신 후 붙여 넣기 하셔도 됩니다.
응용하면?
사실 저 코드는 블로그 본문에 사각형 광고 2개 넣는 코드를 조금 수정한 것에 불과합니다. 이것저것 고치다가 지금의 코드가 나온거구요, 위 코드에서 <style> ~~ </style> 부분은 스킨편집 가셔서 CSS 편집 들어가신 후 복사/붙여 넣기 하셔도 됩니다. 이렇게 하면 PC/모바일 화면에서는 잘 뜨는데 티스토리 어플에서는 이상하게 반영이 잘 안되는 거 같습니다. 티스토리 블로그를 통한 유입이 거의 없지 않을까 하는 생각에 일단 이 부분은 넘어가도록 하겠습니다.
중급 블로그
티스토리를 하면서 느낀 게 확실히 먼가 만들어 가는 블로그란 느낌이 들어서 좋습니다. 네이버 블로그 할 땐 사실해줄게 그리 많질 않아서 멈춰진 느낌이 많이 들었거든요. 그럼 전 또 다른 팁? 아닌 팁을 가지고 다음에 오겠습니다.
[ 티스토리 관리 꿀 TIP 모음 ]
2020/07/28 - [정보/블로그] - 제가 사용하는 스킨은요 (feat. 서브 메뉴 여백 주기)
2020/08/01 - [정보/블로그] - 티스토리 스킨 편집 쉽게하는 팁 (F12의 마법)
2020/08/01 - [정보/블로그] - 티스토리 글 구글 검색 누락 등록 방법 (구글 노출)
2020/08/02 - [정보/블로그] - 티스토리 사진/이미지 가로로 배열하기 (2개 이상 나란히 놓기)
2020/08/03 - [정보/블로그] - 블로그 최적화 도움 사이트 모음 (last updated 20.08.04)
2020/08/04 - [정보/블로그] - 카카오 애드핏 (Kakao AdFit) 가입 신청 및 적용하기
2020/08/05 - [정보/블로그] - 카카오 애드핏 (Kakao AdFit) 심사 하루만에 결과가 나오네요
2020/08/07 - [정보/블로그] - 블로그 후원 서비스 '도네리카노' 적용하기 (티스토리에 기부/후원 버튼 만들기)
2020/08/11 - [정보/블로그] - 티스토리용 블로그 소통/품앗이 창구 - 티스토리 포럼 활용하기!
2020/08/12 - [정보/블로그] - 티스토리 '서식' 기능 활용해서 글 작성 효율 200% 높이기
2020/08/14 - [정보/블로그] - 티스토리 블로그 본문 [테이블 가운데 정렬] & [링크 새창열기] 적용 방법
2020/08/18 - [정보/블로그] - 23일만에 구글 애드센스 한번에 통과했습니다!! (8/11 신청)
2020/08/20 - [정보/블로그] - 구글 애드센스(AdSense) & 카카오 애드핏(AdFit) 한달만에 승인 후기 & 꿀팁 정리
2020/08/23 - [정보/블로그] - 티스토리 블로그 빙(Bing)에 검색 등록 / 노출 시키는 방법
2020/08/28 - [정보/블로그] - 티스토리 블로그 쿠팡파트너스/카카오애드핏 사각형 광고 2개 넣기(PC: 2개, 모바일: 1개)
2020/08/29 - [정보/블로그] - 티스토리 블로그 구글 애드센스 모바일 자동광고 <앵커, 모바일 전면 광고> 넣기
'정보 > 블로그' 카테고리의 다른 글
| 블로그 8월 결산 - 첫 애드센스/애드핏 수익 후기 (20) | 2020.09.02 |
|---|---|
| 티스토리 블로그 카카오 애드핏 [모바일 광고 우측 잘림] 현상 해결방법 (10) | 2020.08.30 |
| 티스토리 블로그 구글 애드센스 모바일 자동광고 <앵커, 모바일 전면 광고> 넣기(본문 상/하단 팝업 광고, 화면 전환 광고) (0) | 2020.08.29 |
| 티스토리 블로그 쿠팡파트너스/카카오애드핏 사각형 광고 2개 본문/상단/하단 넣기(PC: 2개, 모바일: 1개) (6) | 2020.08.28 |
| 티스토리 블로그 빙(Bing)에 검색 등록 / 노출 시키는 방법 (0) | 2020.08.23 |
