안녕하세요. 오늘은 ㅠ_ㅠ.. 회사에서 회식 한잔을 하고 글을 적어서..
횡성수설 할지 모르지만.. 그래도 기존에 꾸미고 싶고 계획했던
블로그 메인에 대해서 포스팅을 작성하고 고찰을 투고 해볼까합니다.
티스토리 블로그 메인을 꾸미는 방법은 여러가지가 있지만
가장 대표적인 방법이 티에디션을 이용하는 방법입니다.
그외에도 공식 치환자를 사용해서 리스트 썸네일을 만들거나, 특정페이지, 카테고리로로 리다이렉션을 걸어버리거나
등의 방법이 있죠..
솔찍히 제가 디자인 능력만 있으면.. ㅠ_ㅠ 이미지로 메인 화면을 꾸며버리겠지만.. 그렇지 않아서..
(회사의 디자이너의 솜씨를 보면 정말 예술작품인 것 같아요.. 확실히 디자이너들이 금손..) 아무튼..
티에디션은 자체적인 메인 화면 꾸미기 위자드 라고 해야할까요? 손쉬운 UI 환경으로
누구나 쉽게 블로그 메인을 일반 포털이나 홈페이지 같이 썸네일과 함께 꾸밀 수 있게 합니다.
하지만 반응형웹에서는.. 적용이 되지 않는 단점이 있죠.. 그리고 타 플러그인을 달기에도 제약이 있고..
(물론 티에디션을 부트스트랩 기반의 html 코드 수정으로 반응형 웹으로 만들 수도 있기도 합니다.
하지만.. 귀찮아서... 이건 정말 나중에 설명하겠습니다. 티에디션도 반응형 웹 가능합니다.)
암튼.. 티에디션은 반응형 웹에서 적용하기는 제약이 많기 때문에
티스토리 공식 반응형 스킨에서도 최근에는 티에디션 대신 새로운 스킨 썸네일 치환자를 제공하면서.. 까지
메인 화면을 꾸미려고 하고 있습니다.
그래서 오늘은 간단하게 티스토리 블로그 스킨 메인 꾸미기 1편
원하는 포스팅을 메인에 고정하는 방법에 대해서 설명하겠습니다. (물론.. 공식블로그 스킨 기준)
메인 화면 글목록 부분의 셀렉터를 체크해줍니다.
음.. 스킨 구조가 매우 복잡하게 감싸져있네요. 처음 보시는 분들은 많이 헷갈릴 수도 있을 것 같습니다.
mArticle
셀렉터 위에 고정 포스팅을 넣을 겁니다.
넣을 내용은 간단합니다. 바로 <s_index_article_rep>
...</s_index_article_rep>
해당 퍼머링크 치환자 사이에 있는 값을
복사해서 집어 넣으면 됩니다.
3군데가 있으니 본문영역을 잘 찾아서.. ಠ_ಠ 확인하시길 바랍니다!! 잘모르겠으면 스크린샷의 위치를..
아래와 같이 한 번더 강제적으로 집어 넣으면 됩니다. 단 퍼머링크는 빼고 집어넣어야합니다. <!--고정 기사--> 부분만 넣으면 됩니다.
<div id="mArticle" class="article_skin">
<s_list>
<div class="list_title">
<h2 id="dkBody" class="tit_skin"><span class="screen_out">목록</span><span class="txt_title"> ()</span></h2>
</div>
</s_list>
<!-- 고정 기사 START-->
<div class="list_content">
<a href="/430" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C150x150/?fname=https://t1.daumcdn.net/cfile/tistory/2741A43856D34D1E19"></a>
<a href="http://cocosoft.kr/12" class="link_post">
<strong class="tit_post ">블로그 메인에 해당 기사 고정하기</strong>
<p class="txt_post">이블로그는 어쩌고 저쩌고......</p>
</a>
<div class="detail_info">
<a href="http://cocosoftkr/category" class="link_cate">ㅆTESTTEST링크</a>
<span class="txt_bar"></span>
<span class="txt_date">2016.07.06</span>
</div>
</div>
<!-- 고정 기사 END-->
<div class="index_title">
<h2 class="tit_skin"><span class="txt_title">코코소프트</span></h2>
</div>
썸네일도 해당 포스팅의 고유 썸네일 주소를 확인해서 집어넣어야합니다.
당연히 썸네일 퍼머링크 치환자(<s_article_rep_thumbnail>
) 또한 빼고 넣어야 겠죠?
썸네일에 관한 더 자세한 정보는 아래 포스팅을 참고하세요.
http://cocosoft.kr/349 - [티스토리]이미지 썸네일 스킨치환자 소개(썸네일 사이즈 조절 가능)
자그러면 특정 포스팅이 강제로 상단에 고정되면서 나타나게 됩니다.!! 어때요? 쉽죠? ㅠ
P.S
블로그 포스팅 본문에도 나타나버리네요. ಠ_ಠ
2016.07.09 내용추가
하.. 스킨이 이래서 안좋긴한데.. 삽입 위치를 바꾸니 메인에서 또 깨져버리네요..
본문페이지일때는 display:none 시켜버리게 만들어 버려야겠네요. 이건 다음에 다시...
네이버 웹마스터 도구와 관련한...
이 방식으로 워터마크를 삽입시... 네이버 웹마스터 도구에서 봇이 포스팅을 수집을 못해갑니다...;;; 다른 방법을 찾아볼게용 ㅠ_ㅠ
다음편에서는.. 메인화면에서 1)특정 카테고리 게시글은 나타나지 않는 법에 대해서 설명을..
그리고 2)롤링 배너 및 스카이크레이퍼 롤링 이미지 블로그에 다는 법 등에 대해서 알아보겠습니다.
블로그에 적용을 하고 나니 메인화면 부분 코드가 겁나 꼬여있네요;; 나중에 다시 정리해야겠습니다....휴....