워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그


이전글에서 마무리한 2단형 스킨을 3단형으로 변경하였습니다. 이 3단 스킨을 토대로 여러가지 형태로 변경하여 사용할 수 있습니다. 2단형은 물론 1단형으로도 변경이 가능하며 컨테이너 영역의 배경이미지를 클래스 선택자로 변경하였으므로 컨테이너 영역의 배경이미지를 제거하고 사용하거나 해더영역과 푸터(footer)을 컨테이너영역에서 분리하여 별도의 배경이미지를 추가할 수도 있습니다. 메뉴도 원하는 곳에 배치할 수도 있어서 헤더와 컨테이너가 분리된 경우 그 사이에 배치할 수도 있습니다. 이 하나의 스킨으로 여러가지 형태로 변경할 수 있으나 스킨만 사용하시려는 분을 위해서 여러가지 형태로 변형하여 올리겠습니다.  footer 부분의 크레딧은 가능한한 지우지 말고 사용해주시길 부탁드립니다. 

Redesigned by Venusian from Tistory Skin Basic 1.0 and WordPress Theme Suffusion  

위 부분인데요. 티스토리 스킨의 Basic 1.0과 워드프레스의 테마인  Suffusion을 근거로 만든 것입니다. 티스토리 스킨 원본에 의하면 수정해서 사용하더라도 저작권을 표기하도록 되어있고 디자인부분은 워드프레스의  Suffusion 테마를 표본으로 삼았기 때문입니다. 

3단스킨 기본형의 사용법은 다음과 같습니다. 이곳 을 클릭하면 테스트 블로그로 이동합니다.

1. 스킨파일의 설치


헤더부분의 타이틀 글자가 안나오도록 하고 이미지가 잘리는 부분 수정했습니다.


카테고리 마우스오버시 범위가 넓게 선택되는 것을 수정했습니다.



압축파일을 다운받아 찾기쉬운 폴더에 압축을 해제합니다. 티스토리 관리자 메뉴에서 스킨을 선택하고 우측에서 스킨등록을 선택하면 화면이 바뀝니다. 3에 스킨 저장명을 입력합니다. TS-Suffsion으로 했습니다. 4의 추가버튼을 클릭하면 브라우저 창이 나옵니다. 압축해제한 폴더로 이동해서 5의 images폴더를 제외하고 index.xml파일부터 style.css파일을 Shift키를 누르고 선택해서 브라우저 창의 하단에서 열기버튼을 클릭하면 파일이 업로드 됩니다. 다시 위창에서 추가버튼을 클릭하여 이번에는 5의 images 폴더를 클릭하여 들어간 다음 Ctrl+A키를 누르면 전체파일이 선택됩니다. 열기버튼을 클릭하면 모든 이미지파일이 업로드 됩니다. 하단에서 저장버튼을 클릭한 다음, 6의 보관함을 클릭하면 업로드한 스킨이 등록되어있습니다.  


적용버튼을 클릭하면 블로그에 스킨이 적용됩니다. 스킨위자드를 사용할 수 있도록 수정되었으므로 위 화면에서 스킨위자드를 클릭하여 게시글의 폭을 수정할 수 있습니다.

2. 스킨위자드의 사용



스킨위자드에 들어오면 사이드바가 위처럼 보입니다. 사이드바는 html상에 나열된 순서대로 나오는데 이는 관리센터의 사이드바 메뉴에서 위치를 변경할 수 있습니다. html에서 구글광고가 기본적으로 추가되어있지만 사이드바 메뉴에서 제거할 수 있습니다. 이 기본스킨은 3의 구글 리더보드 광고를 최적화하기 위해 만든 것이므로 게시글영역의 사이즈를 변경한다면 3의 광고영역은 html 편집창에서 제거하는 것이 좋습니다. 그대신에 사이드바에 336*280 사이즈의 광고를 추가할 수 있습니다. 4의 구글광고는 다음뷰 애드박스를 설치할 경우 최적화되어있습니다. 애드박스를 사용하지 않을 경우 광고를 사이드바에 추가하는 것이 좋습니다. 이처럼 위 스킨은 구글 광고에 최적화하기 위해 만들어졌습니다.

스킨위자드 창의 배경탭에서 이미지를 설정하게 되면 최상단의 6의 이미지는 제거가되어 메뉴바의 배경이 안보이므로 되도록 배경이미지는 사용하지 않는 것이 좋습니다. CSS 배경이미지 속성은 여러개 추가할 수 있지만 인터넷 익스플로러에서 지원하지 않기때문에 이대로 사용하거나 메뉴를 헤더부분 아래에 배치한 다른 버전의 스킨을 사용하는 것이 좋습니다. 배경이미지를 다른 것으로 추가는 안되지만 배경색은 바꿀 수 있습니다. 7에 #444의 색으로 되어있는 것을 다른 색상코드를 입력하거나 위의 색상스와치에서 선택하면 됩니다. 타이틀탭을 클릭합니다.


타이틀탭은 스킨의 헤더부분을 설정하는 부분인데요. 디자인 이미지를 사용하면 스킨의 폭이 넓기 때문에 2처럼 끊어지는 부분이 있습니다. 직접올리기에서 이미지폭이 넓은 것을 사용하거나 패턴 혹은 배경색을 사용할 수는 있습니다.


게시글탭을 클릭하여 글영역 넓이를 조정하면 컨텐트 영역이 변동되면서 컨테이너영역과 헤더 글제목영역도 같이 변동됩니다. 하지만 사이드바는 고정입니다. 이 사이드바도 CSS에서 수정할 수 있습니다. 게시글 영역을 수정하면 2의 구글광고는 제거하는 것이 좋습니다. 3의 구글광고는 다음뷰 애드박스를 사용한다면 그대로 사용가능합니다.


사이드바 메뉴를 선택하면 사이드바가 8개나 됩니다. 3단 레이아웃의 특징은 모듈의 공간을 효율적으로 관리할 수 있다는데 있습니다. 넓은 사이즈의 배너 광고를 사용할 수도 있고 스카이스크레이퍼 형태의 배너광고도 사용할 수 있습니다. 8개의 사이드바이지만 간단하게 사용하려면 두개만 사용해도 됩니다. 설치를 하고나면 기본적으로 사이드바3에 모든 모듈이 배치되어있습니다. html 코드의 순서죠. 위 사이드바는 쌍으로 되어있습니다.1과2가 한쌍이고 3과 4, 5와 6, 7과 8이 한쌍입니다. 이것은 넓은 배너를 사용하기 위한 것인데 사이드바 하나의 폭은 180픽셀입니다. 두개를 더하면 360픽셀이죠. 사이드바 1과 5는 CSS에서 width가 360픽셀로 설정되어있습니다. 이들의 쌍인 2와 6은 180픽셀로 설정되어있지만 이 위치에 아무것도 넣지 않는다면 나타나지 않습니다. 만일 이 위치에도 배너를 넣고자 한다면 1과 5의 width를 180픽셀로 줄여야합니다. 사이드바 3,4,7,8은 폭이 180픽셀로 되어있습니다. 그러니 180픽셀의 배너는 이 위치에 넣어야합니다. 

<이미지를 클릭하면 크게 보입니다.>

실제로 배치를 해봅니다. 스폰서 광고 모듈을 클릭드래그하여 사이드바 1에 배치합니다. 글자만 있지만 360픽셀의 폭이 설정되어있어서 둥근모서리의 배경이미지도 늘어나서 나옵니다. 사이드바 2에는 아무것도 없어야하죠. 사이드바 5에 있는 구글광고는 태그입력기를 사용하여 구글광고 스크립트를 삽입한 것입니다. 사이드바 6에는 아무것도 없죠. 4처럼 나오게 됩니다. 각 쌍의 사이드바 다음에는 clear:both라는 속성을 사용했기 때문에 사이드바 5에 아무것도 없더라도 사이드바 7의 모듈이 올라오기는 하지만 사이드바 3의 최근 댓글 모듈과 맞닿는 일은 없습니다. 4의 윗부분처럼 빈 공간이 나타나죠. 이러한 빈 공간을 없애기 위해서는 최근에 달린 댓글이나 최근에 올라온 글 등 글의 갯수를 설정할 수 있는 모듈의 숫자를 조정하면 됩니다(화면 설정메뉴에서 화면출력선택).

사이드바 1과 5에는 넓은 배너를 추가로 설치할 수 있는데 태그입력기 모듈을 추가로 배치하고 편집버튼을 클릭하여 다음뷰의 마이뷰 코드를 삽입하면 되고 코드중의 width를 360으로 설정합니다.

3. HTML 편집창에서 구글 애드센스 광고를 달거나 제거하기



HTML 편집 메뉴를 선택하고 Ctrl+F키를 누르면 2처럼 검색창이 나옵니다. "구글"을 입력하면 3개가 검색됩니다. 첫번째는 728*90 사이즈의 광고입니다. 이 광고 사이즈를 사용하려면 자신의 구글 애드센스 사이트에서 광고 스크립트를 복사해서 4부분을 클릭드래그하여 붙여넣으면 됩니다. 게시글영역을 700픽셀이 아닌 다른 사이즈를 사용할 경우 이 광고 영역을 제거해야합니다. 5부분을 클릭드래그하여 Delete버튼을 누르고 저장하면 됩니다. 300*250사이즈의 광고를 넣으려면 두번째로 이동해서 글자를 지우고 광고를 삽입합니다. 사용하지 않으려면 글자를 제거합니다. 사이드바에 336*280 사이즈의 광고를 넣으려면 검색창에서 아래화살표를 클릭하면 세번째로 이동하여 사이드바 광고 영역이 나옵니다. 글자를 제거후 광고를 삽입합니다. 이부분의 광고를 사용하지 않으려면 사이드바 설정창에서 모듈을 제거하면 됩니다. 사이드바에 336*280광고를 두개 사용하려면 사이드바 설정창에서 태그입력기 모듈을 사이드바 5로 배치하고 편집버튼을 클릭하여 구글 애드센스 스크립트를 삽입하면 됩니다.

사용시 문제가 있으면 꼭 댓글을 달아주세요. 레이아웃을 수정한 다른 버전은 추가로 올립니다. 


댓글 (26)

댓글 목록

OCer access_time

요즘 스킨 뽐뿌를 잠재우고 있는데 베누시안님께서 또 뽐뿌를 주시네요..ㅠ.ㅠ

멋진 스킨 잘 보고 갑니다.

베누시안 access_time

마음에 드시면 설치하세요. 다음에 올리는 다른 버전이 더 좋을듯합니다.

이츠하크 access_time

역쉬 베누시안님이십니다. 학마을사람들 스킨으로 아주 잘 어울립니다. 도와주셔서 감사드리고요.
베누시안님께 고맙다는 인사드리라고 이장님께서 말씀하셨습니다. 종종 도와주실 수 있느냐고 하시기에 비싼 분이라고 했습니다. ^^

베누시안 access_time

안녕하세요. 이츠하크님은 학마을사람들하고 인연이 있으시나보네요. 이장님께 저는 싸니까 언제든 요청하시라고 전해주세요~ㅋ

OCer access_time

다음 것 지켜봤다가 적용을 해야겠네요.. 좋은 하루 보내세요^_^

도플파란 access_time

뿜뿌가 옵니다...ㅠㅠ 저도 배워야 하나.. 하고.. ㅋㅋㅋㅋ

베누시안 access_time

안녕하세요. CSS는 하다보면 어느 한순간 감이 잡혀서 마음대로 할수가 있게됩니다. 언제 시간내서 한번 해보세요.

청백 access_time

좋은 스킨 감사합니다. 스킨이 멋지네요.

베누시안 access_time

안녕하세요. 반갑습니다. 좋게 봐주셔서 감사합니다. 이글 이후에 다른 버전도 있으니 점검해보세요. 설치하고 문제점이 있으면 꼭 답글 주세요.

스타뮤직 access_time

안녕하세요. 질문좀 드릴께요.
위 스킨을 적용했습니다.
다름이 아니라 카테고리 선택에서 마우스 커서가 살짝 밀려 있던데 만들어 둔 카테고리 선택할때 마우스와 카테고리랑 일치 않는 문제점이 발견되었습니다. 혹시 해결 하는 방법 아시나요?

만들어 주신 스킨 적용시 카테고리 마우스 이동하시면 선택된 카테고리가 아닌 살짝 위아래로 밀려 있는것을 확인 하실수 있을 거에요.

베누시안 access_time

안녕하세요. 반갑습니다. 오류를 지적해주셔서 감사합니다. CSS를 간단히 수정하면 되는데요. CSS 편집창에서 #category li a 로 검색해서 padding에 -left만 추가해주시면 됩니다. 아래처럼 추가하고 저장하세요.

#category li a {
padding-left: 18px;
background: none;
}

수정해서 다시 올리겠습니다. 다시한번 감사드립니다.

access_time

비밀댓글입니다

베누시안 access_time

안녕하세요. 반갑습니다. 지금 타이틀에 배경이미지가 크게 있는데요. 그 위에 타이틀 투명 png파일을 나타나게 한다는 것인가요?

글이 수정되었군요. 내용을 보니 큰사이즈의 배경이미지로 들어간 것은 CSS의 배경속성에 포함되어서 링크가 안됩니다. background 속성으로 사용하지 말고 img 태그를 사용해서 붙여넣어야합니다.

베누시안 access_time

다른 방법은 다음과 같이 해보세요.

<div class="blogTitle">

<a href="[.##_blog_link_##.]">
<h1>[.##_title_##.]</h1></a>
</div>

위와같이 코드를 수정하면 됩니다. <h1>태그의 위치를 잘 보고 하셔야합니다. 치환자에 있는 점은 없는 것으로 보세요. 나타나지 않아서 점을 추가했습니다.

알플러그 access_time

<div class="blogTitle">

<a href="[.##_blog_link_##.]">
<h1>[.##_title_##.]</h1></a>
</div>

방법으로는 이미지 하나만 써야 되는거죠?

이미지 배경과 투명타이틀 합쳐서 하나의 이미지로는 잘 적용이 되고 있습니다.

배경 이미지 두고 따로 그 위에 투명 한 타이틀 제목만 올리고 싶은데 이것은 방법이 없을 까요?


베누시안 access_time

이미지가 두개가 들어가 있지는 안은데요. 배경속성으로 배경이미지는 하나만 넣을 수 있습니다. base 02.jpg만 보이네요. 투명이미지를 배경이미지위에 나오게 하려면 위에서 첫번째 방법으로 해야합니다. img 태그를 사용해야죠.

알플러그 access_time

혹시 원격 가능 할까요?
제가 언어에 무지 해서
배경 틀위에 투명 이미지 올리려고 했더니 하나만 됩니다. ^^;
네이트 be4004@nate.com

베누시안 access_time

원격은 안되고 첨부할 이미지와 현재 스킨상태를 저장해서 스킨 파일 전체를 보내주세요. martian36@naver,com

알플러그 access_time

베누시안님 방금 메일 보냈습니다.

base 01.jpg 1081x 180
base title 01.png 1081 x 180

base 01.jpg 배경위에 base title 01.png 파일이 위치해야 합니다. base title 01.png 파일이 클릭이 되어 블로그 메인으로 가게 되어야 합니다.

귀찮게 해드려 죄송합니다. ㅠㅠ

베누시안 access_time

파일이름에 공백이 있는 것은 안좋습니다. 대시를 항상 넣으세요. 그런다음 다음과 같이 입력하세요.

<div class="blogTitle"><a href="[.##_blog_link_##.]">
<h1>[.##_title_##.]</h1><img src="./images/base-title-01.png" style="margin-top:-126px;"></a>
</div>

그리고 CSS에서 #searchBox를 찾아서 마지막 중괄호 끝나는 부분 앞에 position:relative;z-index:100;라고 넣으세요.

알플러그 access_time

베너시안님 감사합니다.
깔끔히 해결되었습니다. <h1>다음에 이미지 링크를 하면 되는군요. 이렇게 해답을 보면 머릿속에 아 그렇구나 이러는데 막상 하다보면 안되네요. ㅠㅠ

정말 감사합니다.

베너시안님 링크 등록 하고 가요. ^^

베누시안 access_time

수고하셨습니다.

GLKOON access_time

티스토리 초보 블로거 입니다. 블로그 만든지 얼마 안되었는데...
처음에는 티스토리에서 기본으로 선택되는 스킨을 html이랑 CSS도 전혀 모른체 변형해서 몇일 쓰다가;;
여기를 찾게 되어서 베누시안님 스킨 잘 쓰고 있습니다.
상단 메뉴박스를 제거 했는데... 제대로 했는지 모르겠습니다만... 어쨋든 나름대로 깔끔해 보여서 만족합니다. 앞으로 자주 들러서 여기 강좌들 많이 배워 가겠습니다.

베누시안 access_time

안녕하세요. 설정을 깨끗하게 잘 하셨네요.

access_time

비밀댓글입니다

비가옵니다. access_time

감사합니다 원하던스킨
지금 적용해볼게여 정말감사