FC2 블로그 커스터마이즈 기초편

FC2 블로그 커스터마이즈 기초편
04 /19 2012

FC2 블로그 커스터마이즈 기초편



FC2 블로그에서는 다양한 디자인 템플릿이 제공됩니다. 마음에 드시는 디자인을 선택하시어 템플릿을 쉽게 변경하실 수 있으며, FC2 블로그는 HTML과 CSS에 관한 지식이 있으시면 원하시는대로 자유롭게 응용하여 만드실 수 있습니다.


커스터마이즈 가능한 파일은 크게 나누어 HTML과 CSS의 2종류가 있습니다. HTML은 블로그의 내용이 기술되어 있는 구조를 기술, CSS는 모양을 정의하는 파일입니다. 예를 들어 표시 내용을 변경하려면 HTML을, 글꼴 크기나 배경색을 변경하려면 CSS를 변경하시면 됩니다.


공유 템플릿 및 커스터마이즈한 공식 템플릿은 지원 대상에서 제외됩니다.

공유 템플릿의 경우는 작성자에게 직접 문의하시기 바랍니다.

이 매뉴얼은 공식 템플릿의 「white_style」을 기초로 하고 있습니다.

관리 페이지에 로그인후>템플릿 설정>공식 템플릿 추가>템플릿명「white_style]"를 선택해 주십시오.

* 다른 템플릿에서는 기술이 다를 수 있습니다.





템플릿 편집 방법


1.관리 페이지의 메뉴 환경 설정에서「템플릿 설정」을 선택해주세요.


2.변경할 템플릿명「편집」을 선택해주세요.


3.각 편집 양식에서 편집한 후 업데이트 버튼을 클릭하면 업데이트 내용이 저장・적용됩니다.


[ 템플릿 편집 화면의 상세는 여기를 확인해주세요. ]




글꼴 크기 변경


글꼴 크기를 변경하고 싶으실 경우에도 스타일 시트로 쉽게 수정 가능합니다. 예를 들어 타이틀의 크기를 변경해봐요.


HTML 편집 타이틀 부분을 기술한 부분을 찾으세요. 아래 부분이 타이틀 부분을 기술한 태그입니다.




<%blog_name>




타이틀 부분이 h1 요소로 둘러싸여 있으므로 스타일 설정에 있어서도 h1 요소에 대하여 글꼴 사이즈를 설정하면 글꼴 크기 변경 가능합니다.




h1 {h1 { font-size: 180%; }


수치에는 실수치+단위・%값・태그 등을 지정합니다.


실수치+단위
수치에 단위를 붙여서 글꼴 크기를 지정합니다. 음수값은 지정할 수 없습니다.
단위에는 px・em・ex・in・cm・mm・pt・pc 등이 있습니다.


%값
글꼴 크기를 상위 요소의 글꼴 크기에 대한 비율로 지정합니다.


xx-small | x-small | small | medium | large | x-large | xx-large
글꼴 크기를 7단계로 나눈 태그로 지정합니다.


smaller | larger
상위 요소 글꼴 크기에 대하여 각각 한단계 작은 글꼴 사이즈, 큰 글꼴 사이즈를 지정합니다.


브라우저의 종류나 설정에 따라서는 글꼴 크기의 지정에 ptpx 등의 단위를 사용하면 이용자가 글꼴 크기를 변경할 수 없게 되는 경우가 있습니다. 그런 지정을 하면 이용자가 필요에 따라 「글꼴 크기 변경하기」기능을 활용하지 못하게 하는 것이 되므로 글꼴 크기를 지정하실 때에는 가능한 한 em등의 상대 단위를 사용하며, 필요에 따라 글꼴 사이즈를 변경 가능하게 하는 것이 바람직합니다.





글꼴 색 변경


글꼴 색을 변경하고자 할 때는 대상 요소에 color 속성을 설정하여 실현 가능합니다. 예를 들어 사이트 전체의 글꼴색 변경과 본문만 변경하기를 해봐요.


사이트 전체를 변경할 경우에는 최상위 요소 html(또는 body)에 대하여 스타일을 적용해주세요.


HTML 요소와 상・하위 관계



<html>
<head>
<meta>
<title></title>
</head>
<body>
<h1></h1>
<p></p>
<address></address>
</body>
</html>


body {

color : #000; /* 글꼴 색을 검정색으로 설정 */

}


이렇게 사이트 전체가 변경되었으나 본문은 검정색, 글(게시물) 타이틀은 빨간색으로 표시하고 싶을 때와 같이 따로 따로 설정하고 싶을 때에는 선택기를 사용합니다.


기본 선택기


요소명
지정한 요소명의 요소에 대하여 스타일을 적용시킵니다.



h1 { ... }

*(별표)
전체 요소에 스타일을 적용시킵니다.




*.MyClass { ... }

*#MyID { ... }


요소명#이름
그 요소 중 지정한 아이디 속성의 식별자를 가지는 것에 대해 스타일을 적용시킵니다.




p#MyID { ... }


요소명.이름
그 요소 중에서 지정한 class 속성의 식별자를 가지는 것에 대해 스타일을 적용시킵니다.




p.MyID { ... }


예를 들어 글 본문의 글꼴 색을 변경해 봐요.
해당하는 곳만을 보시면 아래와 같습니다.



<div class="section" id="a<%topentry_no>">
<h2 class="entry-header"><a href="<%topentry_link>" title="「<%topentry_title>」の永続的URI"><%topentry_title></a></h2>
<div class="entry-body">
<%topentry_body>
<!--more_link-->
<p class="entry-more"><a href="<%topentry_link>" title="「<%topentry_title>」の続きを読む">続きを読む »</a></p>
<!--/more_link-->
<!--more-->
<%topentry_more>
<!--/more-->
</div>
<ul class="entry-footer">
<li class="date">| <%topentry_year>-<%topentry_month>-<%topentry_day> | </li>
<li class="category"><a href="<%topentry_category_link>" title="카테고리「<%topentry_category>」의 게시물 리스트"><%topentry_category></a> | </li>
<li class="com">
<!--allow_comment-->
<a href="<%topentry_link>#comment-top" title="「<%topentry_title>」의 댓글">댓글 : <%topentry_comment_num></a>
<!--/allow_comment-->
<!--deny_comment-->-<!--/deny_comment--> | 
</li>
<li class="trk">
<!--allow_tb-->
<a href="<%topentry_link>#trackback-top" title="「<%topentry_title>」의 트랙백">트랙백 : <%topentry_tb_num></a>
<!--/allow_tb-->
<!--deny_tb-->-<!--/deny_tb--> |
</li>
</ul>
</div>

글 본문이 전개되는 FC2 블로그의 고유 태그는 <%topentry_body>입니다. 이 태그를 둘러싸고 있는 상위 요소는

라는 것을 알 수 있습니다. 다시 말해서 기사 본문에 대하여 스타일을 적용할 경우는 아래와 같습니다.




div.entry-body {

color : #000; /* 글 본문 앞 배경을 검정색으로 설정 */

}


마찬가지로 글 타이틀 부분이 전개되는 고유 태그는 <%topentry_title>입니다. 이 요소를 둘러 싸고 있는 상위 요소는 <h2 class="entry-header">입니다. 서식은 아래와 같습니다.




h2.entry-header {

color : #f00; /* 글 타이틀 글꼴색을 빨간색으로 설정 */

}


이렇게 선택기를 사용하면 적용할 조건을 좁혀나갈 수 있습니다. 원하시던대로 변경되셨나요?





배경색 변경


배경색 및 배경 이미지 변경도 스타일 시트라면 간단하게 변경 가능합니다. 해당 요소에 background 속성을 적용하십시오. 전체 변경이나 부분 변경은 앞에서 언급한 선택기 설명을 보십시오.


배경색 설정에는 background-color 속성을 사용합니다. 값에는 CSS 서식에 따른 아무 색이나 지정합니다.




body {

background-color : #fff; /* 배경색을 흰색으로 설정 */

}


커스터마이즈 게시판에서도 질문이 많았던 사이트 타이틀 부분의 벼경색 변경도 이같이 설정 가능합니다.




h1 {

background-color : #fff; /* 사이트 타이틀 배경색을 흰색으로 설정 */

}


배경 화상 설정에는 background-image 속성을 사용합니다. 이미지 나열 방법이나 표시 위치 등은 background-repeat 속성・background-position으로 설정할 수가 있습니다.




body {

background-image : url("이미지 경로"); /* 배경 이미지 설정하기 */

background-repeat : repeat; /* 배경 이미지를 바둑판 모양으로 나열하기 */

background-position : left top; /* 시작 위치를 화면 왼쪽위로 설정하기 */

background-attachment : fixed; /* 배경 이미지 위치를 고정시킴 */

}


이미지 나열 방법


repeat
배경 이미지는 바둑판식으로 나열 가능합니다.


repeat-x
배경 이미지는 가로 방향만 반복 나열 가능합니다.


repeat-y
배경 이미지는 세로 방향만 반복 나열 가능합니다.


no-repeat
배경 이미지는 반복되지 않고 하나만 표시됩니다.


이미지 표시 위치


실수치+단위
가로 방향과 세로 방향의 시작 위치를 순서대로 띄워쓰기하여 수치로 지정합니다.
단위에는 px・em・ex・in・cm・mm・pt・pc 등이 있습니다.


%값
가로 방향과 세로 방향의 시작 위치를 순서대로 띄워쓰기하여 비율로 지정합니다.


left | center | right
top | center | bottom
가로 방향과 세로 방향의 시작 위치를 순서로 띄워쓰기하여 태그를 지정합니다. 지정 순서는 상관없습니다.


이미지의 고정 배치


fixed
배경 이미지의 위치를 고정시킵니다.


scroll
배경 이미지를 다른 내용과 함께 스크롤합니다.





링크 색 변경


링크색 설정은 유사 클래스를 사용하여 설정 가능합니다.:hover 유사 클래스를 설정할 때에는 반드시 선언 순서 (link→visited→hover→active)에 주의하십시오. 순서를 잘못 선언하면 바른 표시 결과가 나오지 않습니다.


요소명:link
링크할 요소 중 미열람(캐쉬되어 있지 않는)요소에 스타일을 적용합니다.


요소명:visited
링크할 요소 중 열람 완료(캐쉬되어 있는)요소에 스타일을 적용합니다.


요소명:hover
이용자가 커서를 그 요소 위에 올려 놓고 있으나 아직 활성화시키지 않은 때에 스타일을 적용합니다.


요소명:active
그 요소가 이용자가 활성화 시킨 때에 스타일을 적용합니다.




/* 페이지 전체의 링크를 설정하는 경우 */



a:link {

color : #f60; /* 미열람 링크색을 오렌지색으로 설정 */

}

a:visited {

color : #00f; /* 열람 완료 링크색을 파란색으로 설정 */

}

a:hover {

color : #f00; /* 마우스 오버시의 링크색을 빨간색으로 설정 */

}

a:active {

color : #f00; /* 활성화시의 링크색을 빨간색으로 설정 */

}



/* 특정 클래스가 지정된 링크를 설정할 경우 */



a.MyClass:link {

color : #f60; /* 미열람 링크색을 오렌지색으로 설정 */

}

a.MyClass:visited {

color : #00f; /* 열람 완료 링크색을 파란색으로 설정 */

}

a.MyClass:hover {

color : #f00; /* 마우스 오버시의 링크색을 빨간색으로 설정 */

}

a.MyClass:active {

color : #f00; /* 활성화시의 링크색을 빨간색으로 설정 */

}



/* 특정 클래스가 지정된 요소에 포함된 링크를 설정하는 경우 */



.MyClass a:link {

color : #f60; /* 미열람 링크색을 오렌지색으로 설정 */

}

.MyClass a:visited {

color : #00f; /* 열람 완료 링크색을 파란색으로 설정 */

}

.MyClass a:hover {

color : #f00; /* 마우스 오버시의 링크색을 빨간색으로 설정 */

}

.MyClass a:active {

color : #f00; /* 활성화시의 링크색을 빨간색으로 설정 */

}





이미지에 테두리하기 - 기본


등록한 글안에 사용할 화상에 테두리를 만들어 봐요. 본문중의 이미지에 대해 스타일을 적용하기만 하면 테두리선을 만들 수가 있습니다.


본문을 전개할 고유 태그를 둘러싸고 있는 상위요소는

입니다. 이미지에 테두리선을 그리려면 아래와 같이 설정합니다. 이대로는 본문중에 있는 이미지 모두에 테두리가 그려지므로 필요하면 클래스를 추가, 선택기를 설정해주세요.




div.entry-body img {

border : 2px solid #000; /* 테두리선을 검은색으로 두께 2px 직선을 설정 */

}


스타일을 적용하면 이렇게 됩니다.


양식





이미지에 테두리하기 - 응용


응용편으로 이미지에 폴라로이드 사진 같은 장식을 해보자


이미지를 사용하여 글을 올리면 자동으로 이미지 태그가 심어집니다.



<a href="화상 링크하는 곳" target="_blank"><img src="화상 링크" alt="화상이 표시되지 않을 경우는 대체 텍스트" border="0"></a><br clear="all">

이대로는 그냥 이미지가 표시되지 않으므로 아래의 스타일을 추가해주십시오.




p span img {

padding : 5px; /* 사진의 여백을 5px로 설정 */

background-color : #fff; /* 사진 여백 부분을 흰색으로 설정 */

border : 1px solid #000; /* 사진 테두리 부분을 검정색으로 설정 */

}


글 올릴 때 자동 삽입되는 태그를 바꿔써 넣어주세요.





<p><span><img src="화상이미지 링크" width="화상의 폭" height="화상의 높이" alt="화상이 표시되지 않을 경우 대체 텍스트"></span></p>



스타일을 적용하면 다음과 같습니다.


양식




사이트 센터링


커스터마이즈의 요청이 많았던 사이트 전체의 센터링입니다. 템플릿으로 처음부터 센터링된 것도 있지만 대표적인 방법으로 설명하겠습니다.


센터링 설명도


잘 사용되는 방법으로 콘텐츠 전체를 블록 레벨 요소로 둘러싸고 머신을 자동 설정하여 브라우저 이미지 사이즈에서 수치를 산출하여 결과적으로 좌우의 머신이 같아져 센터링되는 방법입니다.



div#container {
width : 740px; /* 콘텐츠 폭을 740px로 설정 */
margin-left : auto; /* 왼쪽 머신을 자동 산출 */
margin-right : auto; /* 오른쪽 머신을 자동 산출 */
}


<body>
<div id="container">
글이나 메뉴 등의 콘텐츠 부분 기술하기
</div>
</body>

이전 버전 브라우저나 윈도우판 인터넷 익스플로러의 호환 모드에서는 머신치에 AUTO를 지정해도 센터링되지 않습니다. 인터넷 익스플로러 오류를 이용합니다.


테이블이나 div 요소와 같은 블록 레벨 요소를 센터링하려면 text-align는 이용하지 않습니다. text-align속성은 인라인 요소의 정렬을 지정하기 위한 것이기 때문입니다. 그러나 윈도우판의 인터넷 익스플로러는 오류로 인해 text-align 으로 블록 레벨 요소도 센터링해버립니다.




body {

text-align : center; /* 버그를 이용하여 블록 레벨 요소 센터링하기 */
}
div#container {
width : 740px; /* 콘텐츠 폭을 740px로 설정 */
margin-left : auto; /* 왼쪽 머신 자동 산출 */
margin-right : auto; /* 오른쪽 머신 자동 산출 */
text-align : left; /* body 요소로 지정한 센터링을 되돌리기 */
}

앞서 말한 설정을 이렇게 변경하면 이전 브라우저나 인터넷 익스플로러도 센터링 설정 가능합니다.





2 칼럼 레이아웃 작성


공식 템플릿으로 자주 이용되는 2 칼럼 레이아웃 작성 방법을 설명하겠습니다. 여러 방법이 있지만, 비교적 쉬운 콘텐츠 흐름을 이용한 칼럼 레이아웃을 소개하겠습니다.


2カラムレイアウト説明図


스타일 시트 부분은 아래와 같습니다.




body {
text-align : center; /* 버그를 이용하여 블럭 레벨 요소 센터링하기 */
}
div#container {
width : 740px; /* 콘텐츠 폭을 740px로 설정 */
margin-left : auto; /* 왼쪽 머신 자동 산출 */
margin-right : auto; /* 오른쪽 머신 자동 산출 */
text-align : left; /* body 요소로 지정한 센터링을 되돌리기 */
}
div#primary-column {
float : left; /* 기본 컬럼(게시물 등)을 왼쪽으로 가게 하기 */
width : 500px; /* 폭을 500px로 설정 */
}
div#secondary-column {
float : right; /* 보조 컬럼(메뉴 등)을 오른쪽으로 가게 하기 */
width : 200px; /* 폭을 200px로 설정 */
}
div#siteinfo-legal {
clear : both; /* 모든 둘러싸기 해제 */
}

HTML 부분은 아래와 같습니다.



<body>
<div id="container">
<div id="branding">헤더 부분 내용</div>
<div id="primary-column">게시물 등의 내용</div>
<div id="secondary-column">메뉴 등의 내용</div>
<div id="siteinfo-legal">꼬리말 부분의 내용</div>
</div>
</body>

인터넷 익스플로러 적용 범위에 주의하십시오!


윈도우판 인터넷 익스플로러 4.0~6.0 호환 모드에서는 Width 속성과 height 속성이 적용되는 범위가 표준 사양과 다릅니다. 원래는 입력란의 텍스트 영역의 폭 및 높이를 설정하는 속성이지만, 이 인터넷 익스플로러에서는 보더 및 패팅값을 포함한 영역의 폭이나 높이로 해석됩니다. 특히 꽉짜인 디자인으로 보더 및 패딩을 설정하면 레이아웃이 흐트러질 수 있으므로 주의해주십시오.


ボックスモデル解説図


해결책으로 오차가 허용되는 레이아웃으로 설계하는 것이나 브라우저 버그를 이용한 박스 모델 해킹이라 불리는 테크닉을 이용함으로써 오차를 수정할 수 있습니다. 여기서는 자세한 것은 서술하지 않겠지만, 여러가지 방법이 있으므로 관심있으신 분들은 Google 등의 검색 엔진으로 박스 모델 해킹을 검색하여 이용자님이 이용하시고 싶은 방법을 골라주세요.


그 외, 큰 container 부분의 폭을 지정하는 것을 잊어버리면 기본 칼럼과 보조 칼럼이 정확하게 감싸지 못합니다. 잊지말고 폭 지정을 해주십시오.


꼬리말 부분인 siteinfo-legal에서 둘러싸기를 해제하십시오.





3 칼럼 레이아웃 작성


커스터마이즈를 많이 하여 정보량이 늘게 되면 3 칼럼 레이아웃이 편리합니다. 앞서 말한 2 칼럼 레이아웃의 응용이 실현 가능합니다.


3 칼럼 레이아웃 설명도


스타일 부분은 아래와 같습니다.



body {
text-align : center; /* 버그를 이용하여 블럭 레벨 요소를 센터링하기 */
}
div#container {
width : 740px; /* 콘텐츠 폭을 740px으로 설정 */
margin-left : auto; /* 왼쪽 머신 자동 산출 */
margin-right : auto; /* 오른쪽 머신 자동 산출 */
text-align : left; /* body 요소로 지정한 센터링으로 가게하기 */
}
div#wrapper {
float : left; /* 래퍼 (기본 칼럼 + 보조 칼럼)를 왼쪽으로 가게 하기
width : 540px; /* 幅を540px(340px+200px)に設定 */
}
div#primary-column {
float : right; /* 기본 컬럼 (기사 등)를 오른쪽으로 가게 하기 */
width : 340px; /* 폭을 340px로 설정 */
}
div#secondary-column {
float : left; /* 보조 컬럼 (메뉴 등)를 왼쪽으로 가게 하기 보조 컬럼 (메뉴 등)를 왼쪽으로 가게 하기 */
width : 200px; /* 폭을 200px로 설정 */
}
div#extra-column {
float : right; /* 엑스트라 칼럼 (게시판 등)를 오른쪽으로 가게 하기 */
width : 200px; /* 폭을 200px으로 설정 */
}
div#siteinfo-legal {
clear : both; /* 모든 위치 설정 해제 */}

HTML 부분은 아래와 같습니다.



<body>
<div id="container"헤더 부분 내용>
<div id="branding"></div>
<div id="wrapper">
<div id="primary-column">게시물 등의 내용</div>
<div id="secondary-column">메뉴 등의 내용</div>
</div>
<div id="extra-column">게시판 등의 내용</div>
<div id="siteinfo-legal">꼬리말 부분의 내용</div>
</div>
</body>

HTML에는 wrapper→primary-column→secondary-column→extra-column의 순으로 기술하고, 콘서트 레이아웃 배치를 HTML 측에서 지정하는 것이 아닌 스타일 시트측에서 지정하면 음성 브라우저에 가장 읽었으면 하는 CSS 미대응 브라우저에서 처음으로 표시할 수 있습니다.


3 칼럼 레이아웃도 2 칼럼 레이아웃과 같이, 보더나 패딩을 주는 경우에는 박스 모델 해킹을 실시할 필요가 있으므로 주의하십시오.





카운터 설치


FC2 카운터를 설치할 경우는 아래의 도움말을 확인해주십시오.

FC2 카운터를 설치해봐요





분석 설치


FC2 분석을 설치할 경우에는 이하의 도움말을 확인해주십시오.

분석을 설치해보자! (FC2 블로그인 경우)





월별・카테고리별 아카이브 드롭 다운 리스트화


월별・카테고리별 아카이브 등이 많아지면 아무래도 사이트가 세로로 길어집니다. 간결하게 정리하고 싶으신 분은 드롭 다운 리스트화해보세요. 드롭 다운 리스트화 하려면 자바스크립터 추가와 HTML 부분을 수정해야 합니다. 자바스크립터는 에서 의 사이에 삽입해주세요.



<script type="text/javascript">
<!--
function jumpmenu(targ,selObj,restore) {
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>

월별 아카이브를 전개하는 부분은 이하의 부분입니다.



<h2 class="monthly-archives">MONTHLY</h2>
<!--archive-->
<ul>
<li><a href="<%archive_link>" title="「<%archive_year>年<%archive_month>월」 게시물 리스트"><%archive_year>-<%archive_month> : <%archive_count></a></li>
</ul>
<!--/archive-->

위의 부분을 다음과 같이 써넣어주세요.



<h2 class="monthly-archives">MONTHLY</h2>
<form id="monthly_archives" name="monthly_archives" action="">
<select name="menu" onchange="jumpmenu('parent',this,0)">
<option value="<%url>" selected="selected">■월별</option>
<!--archive-->
<option value="<%archive_link>">■<%archive_year>-<%archive_month> : <%archive_count></option>
<!--/archive-->
</select>
</form>

카테고리별 아카이브를 전개하는 부분은 아래 부분입니다.



<h2 class="categories-archives">CATEGORIES</h2>
<!--category-->
<ul>
<li><a href="<%category_link>" title="カテゴリ「<%category_name>」 게시물 목록"><%category_name> : <%category_count></a></li>
</ul>
<!--/category-->

윗 부분을 이같이 바꿔써주세요.



<h2 class="categories-archives">CATEGORIES</h2>
<form id="categories_archives" name="categories_archives" action="">
<select name="menu" onchange="jumpmenu('parent',this,0)">
<option value="<%url>" selected="selected">■카테고리별</option>
<!--category-->
<option value="<%category_link>">■<%category_name> : <%category_count></option>
<!--/category-->
</select>
</form>

올바르게 스크립터를 삽입하였거나 해당 부분의 수정이 잘되어 있으면 드롭 리스트화되어 있을 것입니다. 가장 최근에 업로드된 부분도 이같이 수정하면 드롭 리스트화 되므로 수정해보십시오.


blogmanualko

Welcome to FC2