상세 컨텐츠

본문 제목

블로그 2단스킨 사이드바 삭제하고 본문으로만 만들어진 1단형 블로그 만들기

블로그 만들기/기본,수정,활용

by CHO KYUNG WON 2011. 4. 20. 22:52

본문




핸쩐님의 요청으로 사이드바를 삭제하여 본문 내용만 볼 수 있도록 하는 1단형 블로그로 만들기 위해 태그 소스 수정을 간단하게 설명하겠습니다.
핸쩐님의 블로그 HTML/CSS 소스가 어떤지 알 수 있다면 쉽게 댓글로 설명할 수도 있을 것 같은데 소스를 확인할 수 없어 핸쩐님이 사용하는 스킨이 2단형이라 티스토리에 제공하는 2단형 스킨 Pure Blue(사용자 수정/업로드) ver.1.00(사용자 수정/업로드)을 예를 들어 설명하겠습니다.
제가 운영하지 않는 블로그 중 티스토리 2단형 스킨 Pure Bule ver1.00을 적용한 스샷 이미지입니다.

좌측은 본문내용이고 우측은 사이드바인데 우측 사이드바를 삭제하고 본문 내용만을 사용한 1단형 블로그를 만들어 보겠습니다.

우선 관리자 페이지 - HTML/CSS 편집 - skin.html 창으로 이동하여 아래의 사이드바 태그 소스를 모두 삭제합니다. (중간의 물결 무늬는 중간 생각을 의미합니다.)
여기 태그 소스 부터 
<div id="sidebar">
<s_sidebar>
<!-- 기본 사이드바 -->
<s_sidebar_element>
<!-- 블로그 이미지 모듈 -->
<div id="blogImage"><img src="[##_image_##]" alt="블로그 이미지" /></div>
</s_sidebar_element>

<s_sidebar_element>
<!-- 블로그 설명 모듈 -->
<div id="blogDesc">[##_desc_##] <span class="userID">[##_blogger_##]</span></div>
</s_sidebar_element>

<s_sidebar_element>
<!-- 공지사항 모듈 -->
<s_rct_notice>
<div id="notice">
<ul>
<s_rct_notice_rep>
<li><a href="[##_notice_rep_link_##]">[##_notice_rep_title_##]</a> </li>
</s_rct_notice_rep>
</ul>
</div>
</s_rct_notice>
</s_sidebar_element>
<s_sidebar_element>
<!-- 검색 모듈 -->
<div id="searchBox">
<s_search>
<input type="text" name="[##_search_name_##]" value="[##_search_text_##]" onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }"/>
<input value="검색" type="button" onclick="[##_search_onclick_submit_##]" class="submit"/>
</s_search>
</div>
</s_sidebar_element>

<s_sidebar_element>
<!-- 관리자 모듈 -->
<div id="adminMenu">
<ul>
<li class="tab_admin">
<a href="[##_owner_url_##]"><img src="./images/btn_admin.gif" alt="관리자" /></a></li>
<li class="tab_write">
<a href="[##_owner_url_##]/entry/post"><img src="./images/btn_write.gif" alt="글쓰기" /></a></li>
</ul>
</div>
</s_sidebar_element>


<s_sidebar_element>
<!-- 카테고리 모듈 -->
<div id="category">
<h3>카테고리</h3>
[##_category_##]
</div>
</s_sidebar_element>

<s_sidebar_element>
<!-- 태그목록 모듈 -->
<div id="tagbox">
<h3>태그목록</h3>
<ul>
<s_random_tags>
<li><a href="[##_tag_link_##]" class="[##_tag_class_##]"> [##_tag_name_##]</a></li>
</s_random_tags>
</ul>
</div>
</s_sidebar_element>

<s_sidebar_element>
<!-- 최근 포스트 모듈 -->
<div id="recentPost">
<h3>최근에 올라온 글 </h3>
<ul>
<s_rctps_rep>
<li>
<a href="[##_rctps_rep_link_##]"> [##_rctps_rep_title_##].</a>
<span class="cnt">[##_rctps_rep_rp_cnt_##]</span>
</li>
</s_rctps_rep>
</ul>
</div>
</s_sidebar_element>

<s_sidebar_element>
<!-- 최근 댓글 모듈 -->
<div id="recentComment">
<h3>최근에 달린 댓글</h3>
<ul id="recentComments">
<s_rctrp_rep>
<li>
<a href="[##_rctrp_rep_link_##]">[##_rctrp_rep_desc_##].</a>
<span class="info">
<span class="name">[##_rctrp_rep_name_##]</span>
<span class="date">[##_rctrp_rep_time_##]</span>
</span>
</li>
</s_rctrp_rep>
</ul>
</div>
</s_sidebar_element>

<s_sidebar_element>
<!-- 최근 트랙백 모듈 -->
<div id="recentTrackback">
<h3>최근에 받은 트랙백</h3>
<ul>
<s_rcttb_rep>
<li>
<a href="[##_rcttb_rep_link_##]">[##_rcttb_rep_desc_##].</a>
<span class="info">
<span class="name">[##_rcttb_rep_name_##]</span>
<span class="date">[##_rcttb_rep_time_##]</span>
</span>
</li>
</s_rcttb_rep>
</ul>
</div>
</s_sidebar_element>

<s_sidebar_element>
<!-- 최근 보관함 모듈 -->
<div id="archive">
<h3>글 보관함</h3>
<ul>
<s_archive_rep>
<li>
<a href="[##_archive_rep_link_##]">[##_archive_rep_date_##] </a>
<span class="cnt">([##_archive_rep_count_##])</span>
</li>
</s_archive_rep>
</ul>
</div>
</s_sidebar_element>

<s_sidebar_element>
<!-- 달력 모듈 -->
<div id="calendar">
<h3>달력</h3>
[##_calendar_##]
</div>
</s_sidebar_element>

<s_sidebar_element>
<!-- 링크 모듈 -->
<div id="link">
<h3>링크</h3>
<ul>
<s_link_rep>
<li>
<a href="[##_link_url_##]" onclick="window.open(this.href); return false"> [##_link_site_##].</a>
</li>
</s_link_rep>
</ul>
</div>
</s_sidebar_element>

<s_sidebar_element>
<!-- 카운터 모듈 -->
<div id="counter">
<ul>
<li class="total">Total : [##_count_total_##] </li>
<li class="today">Today : [##_count_today_##]</li>
<li class="yesterday">Yesterday : [##_count_yesterday_##]</li>
</ul>
</div>
</s_sidebar_element>
</s_sidebar>

<s_sidebar>
<!-- 배너 삽입 위치 -->

<s_sidebar_element>
<!-- 배너 모듈 - 티스토리 -->
<div id="adTistory">
<center>
<div class="invite_tistory"><a href="http://www.tistory.com/invitation/" target="_blank">티스토리 초대신청</a></div>
<a href="http://www.tistory.com"><img src="./images/logo_tistory.gif" width="107" height="27" alt="TISTORY" /></a> <!-- <div class="tistoryJoin"><a href="http://www.tistory.com/join">티스토리 가입하기!</a></div> -->
</center>
</div>
</s_sidebar_element>

<s_sidebar_element>
<!-- RSS 링크 -->
<div id="btnRSS">
<center>
<a href="[##_rss_url_##]" onclick="window.open(this.href); return false">
<img src="./images/rss.gif" alt="rss"/> </a>
</center>
</div>
</s_sidebar_element>
</s_sidebar>
</div><!-- sidebar close -->
<hr />
여기까지 모두 선택하여 삭제를 합니다.

(Tip. 선택은 드래그를 하셔도 되고 드래그하기 힘들면 선택할 시작점에 클릭해서 끝나는 점에 Shift 키를 누르고 마우스를 클릭하면 많은 영역도 선택됩니다.)

skin.html 창에서 사이드바 태그를 모두 삭제를 하는데 삭제를 하지 않으면 오류가 발생될 수 있어 간단하게 삭제를 합니다.

사이드바 모듈를 삭제하였다고 하더라도 블로그 레이아웃은 그대로 존재하고 있기 때문에 style.css에서 소스를 수정해 주어야 합니다.

아래는 style.css 코드를 복사해 온 것인데 수정될 부분만 파란색 볼드 (파란색 굵은 글씨) 처리로 체크해 놓았습니다.

/* 블로그 레이아웃 */

#container {
width:/*@post-width:280*/ 890px /*@*/;
margin:0 auto;
background:url(images/tistory_bg.gif) repeat-y right #fff;
} (위의 블로그 본문, 사이드바 포함된 가로 사이즈 입니다. 아래#fff는 블로그 우측에 파란색 색상표이고 이 값은 #fffff로 바꾸어 주시면 하얀색으로 변경됩니다. 배경을 흰색으로 하신다면 background 값인 url(images/tistory_bg.gif) repeat-y right #fff;를 모두 삭제하셔도 상관은 없지만 만약 블로그 배경색을 바꾸려면 url(images/tistory_bg.gif) 소스코드를 그대로 두시고 repeat-y right 소스코드는 삭제하고 #fff 색상 코드를 원하는 색상코드로 바꾸어 주시면 됩니다.)

#headerBox {
width: 100%;
margin:0;padding:0;
         /*@title-background-image=background-image:url(images/head_bg.gif);*/ background-image: url("images/head_bg.gif"); /*@*/
/*@title-background-image-position=background-position:left top;*/ background-position: left top; /*@*/
/*@title-background-image-repeat=background-repeat:repeat;*/ background-repeat: repeat; /*@*/
/*@title-background-color=background-color:#407FC1;*/ background-color: #407FC1; /*@*/
         height:/*@title-height=100*/ 100px /*@*/;
}

#header {
width:/*@post-width:250*/ 860px /*@*/;
margin:0 auto;
    padding:0 0 0 30px;
}

/* ***** Header ***** */

#header h1 a { padding:0; margin:0; font-family:/*@title-font-family=dotum*/ dotum /*@*/; /*@title-color=color:;*/ color: #fff; /*@*/ font-weight:bold; font-size:/*@title-font-size=14px*/ 16px /*@*/; line-height:1.0;}
#header .logo {float:left;}
#header .blogMenu { float:right; margin:45px 0 0 0; list-style:none; width:/*@post-width:-197*/ 663px /*@*/;}
#header .blogMenu li {
float:left;
list-style:none;
background:url(images/menu_div.gif) no-repeat 0 3px;
padding:0 10px;
}

#header .blogMenu li.first {
background:none;
}

#header .blogMenu li a {
color:#fff;
font-family:dotum;
font-size:12px;
}

#header .blogMenu li a:hover {
text-decoration:none;
}

#content {
margin:0;
float:left;
width:/*@post-width*/ 610px /*@*/; (옆의 가로 사이즈는 맨 아래 글 쓴 순서의 가로 사이즈입니다.)
padding: 35px 0 0 30px;
}

#sidebar {
float:right;
width:200px;
padding:30px 10px 0 10px;
}


#footer {
background:#FFF;
clear:both;
padding:20px 0 0 0;
}


/* ***** content ***** */
#content .nonEntry h3   { border-bottom:1px solid #ccc; margin-bottom:10px; color:#222; }
#content .entry          { width:/*@post-width*/ 610px /*@*/; margin: 0; padding:0 0 15px 0; overflow:hidden; }(위 가로 픽셀은 본문 내용이 보이게 해주는 사이즈입니다.)

#searchList                { width:/*@post-width*/ 610px /*@*/; margin: 0; padding:0 0 15px 0; overflow:hidden; }
#searchList ol,
#searchRplist ol            { list-style:none;  padding:5px 0;  margin:0;}
#searchList li,
#searchRplist li            { border-bottom:1px solid #eee;  padding-bottom:2px;  margin-bottom:4px;}
#searchList .date,
#searchRplist .date         { font:0.95em Verdana, Helvetica, Arial, Gulim, sans-serif;  margin-right:10px; }
#searchList .cnt            { font:0.75em Verdana, Helvetica, Arial, Gulim, sans-serif;  color:#f60;}
#searchRplist .name         { font:0.95em Dotum, Arial, sans-serif;    color:#999;  padding-left:8px;}

#localog .spot              { background:url(images/iconIndentArrow_local.gif) 5px 0 no-repeat;  padding-left:20px;  margin-top:5px;}
#localog .info              { background:url(images/iconIndentArrow_localinfo.gif) 5px 3px no-repeat;  padding-left:15px;  margin-top:2px;}
#localog a:link             { color:#5a5194;}
#localog a:visited          { color:#5a5194;}
#localog a:hover            { color:#7870ab;  text-decoration:underline;}

#taglog ul                  { padding:5px; margin:0; text-align:justify;}
#taglog li                  { display:inline;}
#taglog a:hover             { background-color:#eee;  color:#000;}
#taglog li .cloud1          { background-color:#eee;  color:#a2348f;  font-weight:bold;  font-size:16px;}
#taglog li .cloud2          { background-color:#eee;  color:#5a5194;  font-weight:bold;  font-size:15px;}
#taglog li .cloud3          { background-color:#eee;  color:#7870ab;  font-weight:bold;  font-size:14px;}
#taglog li .cloud4          { background-color:#eee;  color:#666;     font-size:13px;}
#taglog li .cloud5          { font-size:12px;  color:#999; }

#guestbook p                { padding:2px 0; margin:0;}

#guestWrite                 { padding:10px;  background-color:#f5f5f5;  border:1px solid #ddd;}
#guestWrite input           { width:150px;}
#guestWrite textarea        { width:/*@post-width:-45*/ 565px /*@*/;overflow: hidden;  padding:5px;}
#guestWrite .homepage       { width:300px;}
#guestWrite .submit         { background:url(images/btn_visit.gif) no-repeat; width:71px; height:23px; overflow:hidden; display:block; text-indent:-1000em; border:0; cursor:pointer; margin:0 auto;}

#guestList                  { padding:10px 0 0 0;}
#guestList ol,
#guestList ul               { margin:0; padding:0;  list-style:none;}
#guestList li p             { border-top:1px dashed #ccc; margin-top:5px; padding-top:5px;}
#guestList ol li            { border:5px solid #eee;  padding:10px;  margin-bottom:10px;  overflow:hidden;}
#guestList li ul li         { margin-left:20px;  background:url("images/iconIndentArrow_local.gif") no-repeat 10px 10px;  background-color:#f5f5f5;  padding-left:25px;  border:none;  width:500px; overflow:hidden;}
#guestList li .name         { color:#666;  font-weight:bold;}
#guestList li .date         { font:0.8em Tahoma, Helvetica, Arial, Gulim, sans-serif;}

#guestList .control a.address       { background:url(images/btnAddress.gif) no-repeat;  padding-left:24px;  padding-bottom:2px;  text-decoration:none;}
#guestList .control a.address span  { display:none;}
#guestList .control a.modify        { background:url(images/btnModifyDelete.gif) no-repeat;  padding-left:24px;  padding-bottom:2px;  text-decoration:none;}
#guestList .control a.modify span   { display:none;}
#guestList .control a.write         { background:url(images/btnReply.gif) no-repeat;  padding-left:13px;  padding-bottom:2px;  text-decoration:none;}
#guestList .control a.write span    { display:none;}


/* entry */
.entryNotice h2,
.entryProtected h2,
.entry h2                { font-size:1.2em;  line-height:1.2em;}
.entry h2 a { font-size:/*@post-title-font-size=*/ 14px /*@*/; font-family: /*@post-title-font-family=*/ dotum /*@*/; color: /*@post-title-color=*/ #333333 /*@*/;  line-height:1.2em; padding:8px 0 6px 0;}

.titleWrap               { width:/*@post-width*/ 610px /*@*/; border-bottom:1px solid #ccc;  padding-bottom:5px;  margin-bottom:20px; overflow:hidden; }(위 가로 사이즈는 본문 제목의 가로 사이즈입니다.)
.titleWrap .category a   { font:12px Dotum, Arial, sans-serif;  color:#333;  margin-right:6px;}
.titleWrap .date         { font:0.9em Verdana, Helvetica, Arial, Gulim, sans-serif;  color:#888;}

.entryProtected p.text   { background:url(images/imgProtected.gif) no-repeat ; padding-left:50px;}
.entryProtected input    { width:200px;}
.entryProtected .submit  { width:50px; padding-top:2px; height:20px; background-color:#ccc;}


.article                 {  width:/*@post-width*/ 610px /*@*/; font-size:/*@post-body-font-size=*/ 12px /*@*/; font-family: /*@post-body-font-family=*/ dotum /*@*/; color:/*@post-body-color=*/ #666666 /*@*/; overflow:hidden;} (위의 가로 픽셀은 본문 내용과 카테고리 다른 글의 가로 사이즈 입니다.)

위에 파란색 픽셀 (px) 사이즈만 수정해 주셔도 본문 영역이 넓어지면서 본문에 css 소를 활용하지 않고도 HTML 태그만을 사용하여 자신만의 블로그를 표현 할 수도 있습니다.

그럼 즐거운 하루 되십시요.
writen by 7istory.tistory.com 

관련글 더보기