워드프레스 테마 옵션

테마 옵션에서 색상표는 블로그 화면을 두가지 색상으로 변화시킬 수 있는 항목입니다. 기본으로 돼 있는 밝음은 배경이 밝고 글자가 어두운 색입니다. 어둠을 선택하면 배경은 어두운 색에 글자가 밝은 색으로 됩니다. 링크 색상은 링크가 있는 표시로 글자 색을 파란색으로 만듭니다. 웹브라우저는 전통적으로 링크 색상을 파란색으로 설정해 놓고 밑줄까지 만들어놓고 있습니다. 이곳에서 링크된 글자의 색을 변경할 수 있습니다. 밑줄은 웹페이지를 지저분하게 만드는 요인이므로 대부분의 경우 사용하지 않도록 디자인할 때 기본으로 없애고 있습니다.

기본 레이아웃은 세가지가 있으며 사이드바를 좌측에 배치하거나 또는 우측에 배치할 수 있고 아에 없앨 수 있습니다. 선택의 기준은 콘텐츠가 항상 앞서는 콘텐츠 좌측배열이 가장 좋으며 사이드바에 중요한 내용이 있다거나 글자를 오른쪽에서 왼쪽으로 사용하는 아랍권에서는 콘텐츠 우측배열을 사용합니다. 사이드바 없음을 선택하면 콘텐츠 폭이 줄어들고 사이드바가 사라집니다. 기본 테마의 자식테마 중 하나인 “Twenty Eleven Layouts”를 설치하면 더 많은 레이아웃으로 변경할 수 있습니다.

 

13-3 사용자 정의 헤더

기본테마의 헤더는 상단에 사이트 이름과 태그라인 그리고 검색창이 있습니다. 그 아래에 헤더이미지와 메뉴바가 있는 구조인데 기본테마에서 제공하는 사용자 정의 헤더를 이용하면 여러 가지 옵션을 적용할 수 있습니다. 헤더 이미지는 기본적으로 여러 개의 이미지가 설치돼 있고 페이지가 바뀔 때마다 다른 이미지가 나타나도록 하는 구조입니다. 또한 특성이미지 부분에서 알아보았듯이 특성이미지 기능을 사용하면 적용한 페이지의 헤더이미지도 같이 적용되어 블로그 글에서 대표이미지로 사용할 이미지가 동시에 헤더 이미지로도 사용되고 있습니다. 이것은 하나의 이미지를 업로드하면 정해진 사이즈로 자동으로 저장하기 때문에 가능합니다.

헤더 이미지를 변경하려면 헤더메뉴에서 이미지 선택하기 항목의 파일선택을 클릭하면 내 컴퓨터의 브라우저 창이 열립니다. 원하는 이미지를 선택하고 업로드 버튼을 클릭하면 자르기 화면으로 넘어갑니다. 아래에 있는 미디어 라이브러리에서 이미지 선택하기 버튼을 클릭하면 이미 업로드 된 이미지를 사용할 수 있습니다. 여기서 선택하면 이미 잘라진 이미지가 사용되므로 자르는 과정이 생략됩니다.

3-72 사용자 정의 헤더

기본 사이즈가 1000X288픽셀이므로 자르기툴이 이 크기로 정해져 나타납니다. 자르기툴의 내부를 클릭드래그하여 원하는 곳에 배치하고 조절점을 클릭드래그하면 자르는 위치를 조절할 수 있습니다. 높이가 기본인 288픽셀이지만 조절점을 위로 늘려서 높여도 됩니다. 조절이 완료되면 하단에서 “자르고 공개하기” 버튼을 클릭합니다.

3-73 헤더이미지 자르기

사용자 정의 헤더이미지를 업로드하면 하나의 이미지가 있을 때는 랜덤이라는 옵션이 없지만 두개 이상의 이미지가 업로드 되면 기본 이미지처럼 랜덤으로 나타나게 하거나 고정된 하나의 이미지로 나타나게 할 수 있습니다. 하나의 이미지만 나타나게 하려면 이미지 좌측의 라디오버튼을 클릭하면 됩니다. 랜덤은 페이지가 바뀔때마다 임의의 이미지가 나오도록하는 기능입니다.

3-74 램덤이미지

헤더이미지 삭제버튼을 클릭하고 저장하면 설정 화면에서 헤더이미지가 제거되고 블로그 화면에서도 헤더이미지만 나타나지 않습니다. 헤더이미지를 없애면 블로그를 헤더 부분의 높이를 줄여서 사용할 수 있습니다.

헤더텍스트 항목의 “이미지와 함께 헤더텍스트 보이기”에 체크 해제하면 사이트 이름과 태그라인이 제거되면서 검색창이 메뉴바로 배치되고 블로그의 상단은 헤더이미지가 상단으로 나타나게 됩니다.

글자 색상 항목의 색상선택을 클릭하면 색상환이 나타나서 해더 텍스트의 색상을 변경할 수 있고 원본 해더 글자 복원 버튼을 클릭하면 변경한 색상을 초기화할 수 있습니다.

3-75 헤더텍스트 변경

13-4 사용자 정의 배경

배경 메뉴를 선택하면 배경을 사용자 정의할 수 있습니다. 처음 화면은 표시옵션이 나타나지 않으나 배경으로 사용할 이미지를 업로드하고 나면 나타납니다. 대부분의 경우에 배경이미지는 큰 사진 파일을 사용하지 않습니다. 작은 이미지를 사용하여 상하좌우로 반복하도록 하며 큰 사진 파일을 사용하면 페이지가 로딩될 때 시간이 걸리기 때문입니다. 어떤 사이트는 3Mb나 되는 사진파일을 사용한 곳을 볼 수 있었는데 방문자로 하여금 다시는 오지 말라는 잘못된 디자인입니다. 상하좌우로 반복해도 서로 이어지는 이미지를 패턴이라고 하며 포토샵으로 직접 만들거나 패턴사이트에서 만들어 사용할 수 있습니다. 아래의 패턴은 무료 패턴사이트에서 만든 것으로 제 블로그글(http://martian36.tistory.com/828)을 참고하면 됩니다. 아래 미리보기 화면은 패턴이 이어지지 않은 것으로 나오지만 실제 블로그 화면을 보면 정상으로 나타납니다.

파일을 업로드한 후에 표시옵션의 각 라디오버튼을 클릭해보면 어떤 의미인지 알 수 있습니다. 반복 항목에서 반복 안 함에 클릭하고 위치항목에서 왼쪽을 선택하면 이미지가 왼쪽에 치우쳐서 배치됩니다. 위치항목은 배경이미지의 위치를 지정합니다. 반복 항목은 반복에 체크하면 상하좌우로 반복되고 수평반복은 좌우 방향으로만 반복되며 수직 반복은 상하방향으로 반복됩니다. 패턴을 사용하면 항상 “반복”에 체크해야합니다. 만일의 경우 큰 사진 파일을 사용하고자 하면 위치는 중앙, 반복은 “반복”에 체크하고 사용하면 됩니다. 큰 이미지를 사용할 경우에도 포토샵에서 웹페이지용으로 파일을 최적화하면 같은 크기의 파일이라도 최소의 용량으로 줄일 수 있습니다.

첨부는 화면을 스크롤할 때 배경이미지가 고정되느냐 아니면 같이 스크롤되느냐의 차이입니다. 배경이미지를 사용하지 않을 경우는 기본색상인 흰색이 사용되므로 원하는 경우 배경색상의 색상선택을 클릭하여 다른 색으로 설정할 수 있습니다.

3-76 사용자 정의 배경이미지

Advertisements

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중