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

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

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

사이트 이미지
웹사이트

회원관리 사이트

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

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

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

사이트 이미지
쇼핑몰

해외 쇼핑몰

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

사이트 이미지
쇼핑몰

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

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

포트폴리오 보기

커스텀 디자인

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

Brizy Pro

페이지 빌더

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

Elementor Pro

페이지 빌더

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

Advanced Custom Field Pro

사용자 정의 필드

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

Pods

사용자 정의 콘텐츠 타입

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

블로그

"티스토리 블로그 스킨 만들기"라는 타이틀로 만들고 있는 스킨은 이웃블로거이신 이츠하크님의 요청으로 시작해서 거의 마무리 단계에 있습니다. 지금까지 만든 것으로도 충분히 스킨으로 사용할 수 있으며 메뉴 부분과 각종 아이콘을 삽입만 하면 완료됩니다. 그동안 따라하시는 분들이 어려워하시는 것은 본 스킨 만들기 과정이 제 포스팅의 CSS기초부분을 기반으로 해서 진행된 것이라 스킨만들기부분만 하셔서 그렇습니다. 스킨이 완료되면 공개하려고 하였지만 과정의 중간부분도 중요하다고 생각되어 스킨 만들기 부분만 하시면서 따라하기 어려워하시는 분들을 위해서 지금까지 진행된 부분을 공개하니 참고하세요. 각 단계마다 저장을 해서 공개했어야하는데 미처 생각을 못했군요. 제가 다시 작업하면서 각 과정의 마무리 부분에 그 과정에서 끝난 부분의 스킨 파일을 나중에 올려드리기로 하고 우선 현재까지 진행된 것을 올립니다. 또한 그냥 스킨만 사용하시려는 분도 다운받아 설치하시면 되므로 설치과정을 설명드립니다. footer 부분의 크레딧은 가능한한 지우지 말고 사용해주시길 부탁드립니다. 

Redesigned by 베누시안 from Tistory Skin Basic 1.0 and WordPress Theme Suffusion  

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



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


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


스킨위자드 버튼을 클릭해서 들어온 화면입니다. 이 스킨은 구글광고의 728*90 사이즈 리더보드를 달 수 있도록 수정했는데 폭을 줄이게 되면 이 리더보드 광고를 제거해야합니다. 또한 2의 구글광고는 html 편집창에서 사이드바 영역에 직접 입력된 것이므로 제거하려면 html 페이지에서 해야합니다. 3의 슬라이더는 게시글영역의 넓이를 설정할 수 있는데 좌우로 이동하면 게시글 영역이 변동되면서 모든 스킨의 사이즈가 변동됩니다. 처음 설치하면 4의 검색박스가 나타나는데 이것은 헤더에 있는 것이므로 제거해줍니다.

사이드바 메뉴에서 구글애드센스와 검색모듈 제거하기 



관리자페이지에서 사이드바 메뉴를 선택해서 Sponsor Ads의 마이너트 버튼을 클릭하면 좌측의 기본모듈로 이동하면서 제거됩니다. 검색모듈도 마찬가지로 제거합니다. 구글애드센스를 그대로 사용하려면 다음에 나오는 구글 애드센스 광고 입력하는 부분을 보시면 됩니다. 저장버튼을 클릭해야 적용됩니다.

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



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


자신의 구글 애드센스 사이트에서 광고 스크립트를 복사해와서 1부분을 제거하고 붙여넣으면 됩니다. 사이드바에서 이 광고를 사용하지 않는 경우는 이부분을 삭제할 필요는 없고 관리센터의 사이드바에서 Sponsor Ads 모듈을 제거하면 됩니다.

사용시 문제가 있으면 꼭 댓글을 달아주세요. 나머지 메뉴와 아이콘 설치관련 포스팅은 계속 되며 추가되는대로 다시 공개합니다.

댓글 (11)

댓글 목록

윈컴이 access_time

계속 보기만 했는데, 적용해야 하나 모르겠네요 ^^;;

베누시안 access_time

안녕하세요. 스킨이 마음에 드시면 적용하시는 거죠. 스킨만들기는 CSS를 공부하는 과정에 있는 것이니 직접 코딩을 해보셔도 되고요.

학마을사람들 access_time

저작자 표현 바꾸어 놓았습니다. 제가 뭐 한게 있어야죠. 베누시안님께서 모두 해 주셔서요. 우리 마을 사람들이 완성되면 다들 고마워 할 겁니다. 너무 감사합니다.^^

베누시안 access_time

그렇게 수정해 주셔서 감사합니다. 오늘 내일 사이에 스킨 만들기가 완성되니 다시 업로드하겠습니다.

썬샤인 access_time

최고군요~^^ 완성본이 기다려지네요~

베누시안 access_time

내일이면 완성될 것같습니다.

노펫 access_time

안녕하세요.
환상적인 블로그 디자인 잘 봤습니다.
스킨에 관심이 많은 문외한 블로거인데.
이렇게 다양한 시도가 가능한 자료들이 많아서
벌써부터 가슴이 콩딱콩딱합니다.
다양하게 해보고 싶은 자료들이 많아서 앞으로도 매일올 것 같습니다.
제가 하고 싶었던 자료들 많이 읽고 가겠습니다.
사이드바 메뉴, 헤더메뉴, 서브메뉴 기능들은 제가 평소에 너무 해보고 싶었는데.
어제 블로그만 30분 정도 모든 메뉴를 거의 다 보고 "야호" 를 외쳤습니다.
오늘부터 조금씩 제 블로그도 바꿔보려구요.
그렇데 조금 두려운 것이 있다면, 시도하다가 혹시 어그러지거나 하지는 않을지.
지식이 전무한 상태에서 시도하기에 더 두려움이 큽니다.
사실 전문가분에게 조언구하는 것자체가 실례가 되는 것을 알기에
잘 묻지도 못하는 성격이라서요. -.,-
너무 좋은 정보 감사인사드리고 감니다.
열심히 시도해볼께요.
제 블로그에 날개가 달리기를 바라면서....^^
노펫.

베누시안 access_time

안녕하세요. 반갑습니다. 블로그 스킨을 수정할때는 항상 스킨을 저장을 하고 시도하시는 것이 좋습니다. 그러면 수정하다가 망가지더라도 바로 다시 원상복구할 수 있습니다. 이 스킨 만들기 포스팅은 CSS기초부분을 기본으로 했기 때문에 그 부분을 먼저 보시는 것이 좋을텐데요. 차근차근 따라하시면 그냥 블로그 스킨 만들기만 보셔도 됩니다. 하지만 CSS기초를 알아두시면 어떤 스킨이라도 만들 수 있게 됩니다.

Mickey. access_time

우연히 검색중에 알게되었는데 정말 좋은 블로그 발견했습니다
덕분에 작업해주신 멋진 스킨 적용했습니다 정말 거짓말 하나 안보태고
너무 맘에 듭니다 제가 늘 원하던 스타일입니다 이렇게 깔끔하면서 심플한 워드프레스 스타일
스킨을 찾고있었는데 어느하나 흠 잡을 수 없을 정도로 완벽한 스킨이며 현존 최고의 스킨이라고
말씀드리고 싶습니다^^ 그리고 사이드바 스타일은 정말
최고입니다 너무 좋아요^^
상단메뉴 롤오버 스타일과 서치바 변경하고 개인적으로 제 스타일에 맞게 수정좀 했습니다
한번 평가해 주세요 ㅋㅋ 그리고 다시한번 감사합니다 좋은 스킨 사용할 수 있도록 해주셔서
앞으로 자주 자주 들러서 추천 꽝 해드리고 ~ 포토샵도 열심히 배우겠습니다

베누시안 access_time

안녕하세요. 반갑습니다. 좋게 평가해주셔서 감사합니다. 블로그에 방문해보니 튜닝을 잘 하셨네요. CSS를 잘 하시나보네요. 제가 요즘은 시간이 없어서 스킨을 못만들고 있는데 한달정도 후에는 포스팅을 자주할 겁니다. 댓글 감사드려요.

OK hospital access_time

관리자의 승인을 기다리고 있는 댓글입니다