• 사이드바에 이미지배너 배치하기

    Simple Image Widget으로 사이드바에 이미지 배너를 배치하고 링크를 걸 수 있습니다. 1. 배너 이미지 준비 make BCT 데모사이트의 테마 BCT0009의 서브페이지 사이드바에 이미지배너를 만들겠습니다. PC화면에서의 사이드바 가로폭은 285px입니다. 하지만 모바일에서 사이드바의 가로폭은 550px 정도가 됩니다. 원래 만드려던 285*80px 사이즈의 배너이미지를 다음과 같이 550*154px로 만들었습니다. 2. Simple Image Widget으로 사이드바에 배치하기 [관리자] > [외모] > [위젯]에 접속합니다. 왼쪽의 ‘사용할 수 있는 위젯’에서 [Image]라는 위젯을 ‘Sidebar’ 영역의 위젯 상자에 배치합니다. 배치된 ‘Image’ 위젯에서 [choose an image]를 클릭하여 ‘미디어 라이브러리’가 열립니다. 새로운 이미지를 업로드하거나 기존에 업로드 해 놓은 이미지를 세팅할 수 있습니다. 아래의 ‘Link’옵션란에 배너를 클락했을때 이동할 url을 적고, 새 창에서 띄우기 위해 ‘Open in new window?’ 에 체크했습니다. 홈페이지에 나가보면 사이드바에 이미지 배너가 배치되었습니다. 배너 위치를 이동하려면 관리자의 [위젯] 설정으로 돌아가 배치된 위젯을 끌어다 다른 위치에 배치하면 됩니다. zman블로그코디 디자인 팀장입니다.http://www.blogcodi.com

  • BC TOWN™ 테마에서 홈과 서브페이지에 다른 배경 이미지 적용하기

    make BCT 데모사이트(http://makebct.cafe24.com)의 홈과 서브페이지는 다음과 같습니다. 첫화면에 슬라이드가 배치되어 배경이미지가 보이지 않습니다. 서브페이지 배경은 그대로 두고, 첫 화면에만 배경이미지를 다르게 설정하겠습니다. 1. 이미지 업로드 [관리자] > [미디어]에 접속하여 홈 배경에 쓰일 이미지를 업로드합니다. 업로드한 이미지의 url은 ’http://makebct.cafe24.com/wp-content/uploads/2015/01/home_bgi.gif’입니다. 2. 커버에디터에 배경이미지를 불러오는 스타일 작성 [관리자] > [BCT Covers]에 접속하여 현재 세팅되어 있는 커버 편집화면에 접속합니다. 오른쪽 ’Containers’에서 1단 상자를 추가하고, ’Shortcode Widget’을 1단 상자에 끌어다 놓습니다. 다음 그림과 같이 홈에서만 출력할 배경이미지의 스타일을 작성해 줍니다.

    커버에디터에 작성한 스타일 구문은 홈에서만 불러옵니다. ’관리자’에서 설정한 배경이미지 대신 여기에 작성한 배경이미지를 출력하게 됩니다. 홈페이지에 나가보면 첫화면의 배경과 서브페이지의 배경이 다르게 출력됩니다. 데모사이트 보기 : http://makebct.cafe24.com zman블로그코디 디자인 팀장입니다.http://www.blogcodi.com

  • BC TOWN™ 커버에디터로 첫 화면에 이미지 베너 배치하기

    BC TOWN™의 커버에디터를 이용해 홈페이지 첫 화면에 이미지배너를 삽입하고 링크를 걸도록 하겠습니다. 1. 베너 이미지 준비 make BCT 데모사이트의 테마 BCT0009의 첫 화면에 가로로 세개의 이미지베너를 삽입하겠습니다. BCT0009 테마의 가로 3단으로 나누어진 상자의 가로 크기는 339px입니다. 하지만 반응형을 감안하면 모바일 화면에서 보여지는 가로크기는 550px정도가 됩니다. 339*100px 사이즈의 베너를 만들려고 했으나, 모바일에서도 잘 보이도록 하기위해 같은 비율의 큰 이미지 500*148px의 이미지로 만들었습니다. 2. 커버에디터에 이미지 삽입하기 [관리자] > [BCT Covers]에서 현재 만들어져 있는 커버세트의 편집 화면에 접속합니다. ‘Containers’에서 ‘3단’ 상자를 삽입합니다. 만들어진 ‘3단 상자’에 [이미지] 위젯을 드레그하여 끌어다 놓습니다. ‘이미지’ 위젯의 [이미지를 선택하세요]를 클릭하면 ‘미디어 라이브러리’가 열립니다. 새로운 이미지를 업로드하거나 기존에 업로드 해 놓은 이미지를 세팅할 수 있습니다. 이미지 베너의 링크를 거는 등의 옵션을 설정하고 저장합니다. (옵션은 그대로 두어도 됩니다.) 다른 두 개의 이미지도 같은 방법으로 세팅하고 저장합니다. 홈페이지에 나가보면 가로로 세 개의 베너 […]

  • 1000개의 무료 벡터 아이콘세트

    무려 1000개에 달하는 벡터 기반의 무료 아이콘 세트를 소개합니다. PNG, EPS, AI 파일로 제공됩니다. http://sixrevisions.com/freebies/icons/free-icons-1000/ zman블로그코디 디자인 팀장입니다.http://www.blogcodi.com

  • 아기자기한 60개의 무료아이콘

    PSD, AI, PNG로 제공되는 무료아이콘 세트입니다. https://www.behance.net/gallery/19096851/60-free-icons zman블로그코디 디자인 팀장입니다.http://www.blogcodi.com

  • 표(table) 만들기 2

    ’표(table) 만들기 1’에서 소개한 글에 이어 이번에는 좀 더 복작한 표를 만들어 보겠습니다. 표(table) 만들기 1 글 보기 : http://makebct.net/1635?cat=148 1. 표 삽입하기 ’표(table) 만들기 1’에서와 같은 방법으로 다음과 같은 표를 만들었습니다. 셀을 합치기 위해 해당 셀들을 선택 후, 에디터의 [표] > [셀] > [셀 병합]을 클릭하여 셀을 합쳐줍니다. 구분을 위해 에디터의 [표] > [셀] > [열 속성]을 이용하여 다음 그림과 같이 표를 만들었습니다. 2. 표를 정교하게 설정 위에서 만들어진 표에서 각 열의 가로폭을 지정하여 너비를 조정해 보겠습니다. 첫 번째 열 ’header 1’을 선택한 후, 에디터의 [표] > [셀] > [열 속성] 에서 폭을 15%로 지정합니다. 반응형에서 보여지는 걸 고려하여 가로폭은 %로 작성합니다. 위와 같은 방법으로 header 2를 제외한 header 1~5까지 각각의 너비를 %로 입력하였습니다. 이렇게하면 표 전체 너비 100%에서 나머지 Header 1, 3, 4, 5에 지정된 너비를 뺀 만큼 header 2에 해당하는 열 […]

  • 표(table) 만들기 1

    워드프레스에서 페이지나 글에 표를 삽입하려면 생각보다 어렵지요? 어떻게 설정해야 하는건지, 셀 크기부터 횡과 열 설정도 맘대로 안되고 여간 까다로운게 아닙니다. 이는 한글이나 워드 프로그램에서 표 작성이 습관화되어 더 어렵게 느껴지는 탓도 있을 겁니다. 이번 글에서는 간단한 표를 만들고 스타일을 적용해 보겠습니다. 에디터의 표 삽입 기능은 워드프레스 에디터 TinyMCE Advanced 플러그인에서 지원하는 표 기능입니다. 1. 표 삽입하기 ’글 작성화면’의 에디터에서 [표] 버튼을 클릭하여 일단 표를 삽입하겠습니다. 5X5 의 표를 삽입하였으나 아래 그림과 같이 표가 삽입되었습니다. 테두리 오른쪽 상자를 드레그하여 오른쪽으로 700px까지 늘립니다. 표 전체를 블록한 상태에서 에디터의 [표] > [표 속성]을 선택합니다. 반응형 테마에서 출력되므로 각 해상도에서 잘 보이도록 가로폭을 %로 설정하기위해 표의 가로를 100%, 세로를 auto로 입력합니다. 표의 첫 번째 줄에 Header 1 ~ 5까지 적어주고 이 부분을 block으로 감싼 후, 다시 에디터의 [표] > [열 속성]을 클릭합니다. 속성 설정에서 [고급]탭을 클릭하여 […]

  • 홈페이지 하단(footer) 영역 꾸미기

    홈페이지 하단 영역에 정보, 링크, 베너 아이콘을 배치하여 다양한 정보를 제공할 수 있도록 만들어 보겠습니다. [관리자] > [외모] > [BCT footer text]에 접속합니다. 하단 정보를 작성할 수 있는 텍스트 상자가 보입니다. 1. 사이트 정보 작성하기 작성할 내용을 다음과 같이 텍스트로 입력합니다. 홈페이지에서 확인해 보면, 아무런 태그를 지정하지 않아 그냥 주~욱 글자들이 이어져 출력됩니다. 2. 태그 활용하여 스타일 적용하기 작성해 놓은 텍스트에 <br/>, <a> 태그등을 활용하여 줄바꿈을 해주고, 텍스트에 링크를 걸어줍니다. 태그가 적용된 상태로 홈페이지에 출력됩니다. 태그를 더해주는 것만으로 BC TOWN™ 테마에 미리 지정되어 있는 스타일이 적용되어 보기 좋게 출력됩니다. 3. 이미지를 삽입하고 링크 걸기 텍스트 아래쪽으로 이미지를 배치하고 링크를 걸어 보도록 하겠습니다. 미리 준비한 아래의 그림과 같은 이미지를 워드프레스 [미디어]에 업로드 합니다. 업로드한 이미지를 클릭하여 상세보기 화면에 접속합니다. 오른쪽 파일 정보에서 ’URL’에 적혀있는 주소를 복사합니다. 이미지가 위치한 […]

위로이동