본문으로 바로가기

안녕하세요. 오늘은 ㅠ_ㅠ.. 회사에서 회식 한잔을 하고 글을 적어서..

횡성수설 할지 모르지만.. 그래도 기존에 꾸미고 싶고 계획했던


블로그 메인에 대해서 포스팅을 작성하고 고찰을 투고 해볼까합니다.


티스토리 블로그 메인을 꾸미는 방법은 여러가지가 있지만

가장 대표적인 방법이 티에디션을 이용하는 방법입니다.


그외에도 공식 치환자를 사용해서 리스트 썸네일을 만들거나, 특정페이지, 카테고리로로 리다이렉션을 걸어버리거나

등의 방법이 있죠..


솔찍히 제가 디자인 능력만 있으면.. ㅠ_ㅠ 이미지로 메인 화면을 꾸며버리겠지만.. 그렇지 않아서..

(회사의 디자이너의 솜씨를 보면 정말 예술작품인 것 같아요.. 확실히 디자이너들이 금손..) 아무튼..


티에디션은 자체적인 메인 화면 꾸미기 위자드 라고 해야할까요? 손쉬운 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">[##_list_conform_##] ([##_list_count_##])</span></h2>
		</div>
		</s_list>

<!-- 고정 기사 START-->
		<div class="list_content">
				<a href="[##_article_rep_link_##]" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C150x150/?fname=http://cfile29.uf.tistory.com/image/2741A43856D34D1E19842C"></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">[##_title_##]</span></h2>
				</div>


썸네일도 해당 포스팅의 고유 썸네일 주소를 확인해서 집어넣어야합니다.

당연히 썸네일 퍼머링크 치환자(<s_article_rep_thumbnail>) 또한 빼고 넣어야 겠죠?


썸네일에 관한 더 자세한 정보는 아래 포스팅을 참고하세요.

http://cocosoft.kr/349 - [티스토리]이미지 썸네일 스킨치환자 소개(썸네일 사이즈 조절 가능)



자그러면 특정 포스팅이 강제로 상단에 고정되면서 나타나게 됩니다.!! 어때요? 쉽죠? ㅠ



P.S

블로그 포스팅 본문에도 나타나버리네요. ಠ_ಠ

2016.07.09 내용추가

하.. 스킨이 이래서 안좋긴한데.. 삽입 위치를 바꾸니 메인에서 또 깨져버리네요..


본문페이지일때는 display:none 시켜버리게 만들어 버려야겠네요. 이건 다음에 다시...

네이버 웹마스터 도구와 관련한...

이 방식으로 워터마크를 삽입시... 네이버 웹마스터 도구에서 봇이 포스팅을 수집을 못해갑니다...;;; 다른 방법을 찾아볼게용 ㅠ_ㅠ




다음편에서는.. 메인화면에서 1)특정 카테고리 게시글은 나타나지 않는 법에 대해서 설명을..

그리고 2)롤링 배너 및 스카이크레이퍼 롤링 이미지 블로그에 다는 법 등에 대해서 알아보겠습니다.


블로그에 적용을 하고 나니 메인화면 부분 코드가 겁나 꼬여있네요;; 나중에 다시 정리해야겠습니다....휴....

신고

댓글을 달아 주세요

  1. BlogIcon 드린 2016.07.07 01:18 신고

    저도 점점 이렇게 꾸며나가야 겠습니다.
    좋은 정보 감사합니다.

    • BlogIcon COCOSOFT COCO Media 2016.07.07 12:42 신고

      넵 ㅠ_ㅠ 아무래도 블로그는 html이 하나라... 꾸미는데 제약이 많은 것 같아요.. 티스토리측에서 새로운 치환자를 제공해주지 않는이상.. 지금 방식도 문제가 발생은 하네요.. 수정을 -_-하거나.. 티에디션을 반응형으로 만들어야겠어요!

  2. BlogIcon SONYLOVE 2016.07.07 08:48 신고

    저도 메인 페이지의 구성이 좀 맘에 안들어서 언제 도전해보고 싶어요. 어떤 방식으로 해야할지 아직 감을 못잡고 있어요;; 이 글이 왠지 나중에 저도 잘 써먹을 수 있을꺼 같아요. ㅎㅎ

    • BlogIcon COCOSOFT COCO Media 2016.07.07 12:44 신고

      티에디션을 사용하지 않으면 홈화면 꾸미기가 힘들어서 소니러브님 처럼 특정페이지로 리디렉션 하는 방식도 많이사용이 되기도 하죠 ㅠ_ㅠ!! 아무래도 html 하나에서 모든걸 해야하니.. 위 바식을 보완하거나. 새로운 방식을 한번 찾아봐야겠어요 'ㅡ' 티에디션을 반응형으로 만드는 방식처럼요!

티스토리 툴바