• 하이퍼링크를 다양한 버튼 스타일로 만들기

    페이지를 꾸미다 보면 이미지로 버튼을 만들어 넣을때가 있습니다. 이미지버튼 대신 하이퍼링크의 스타일을 작성하여 버튼 형태의 하이퍼링크를 만들어 보겠습니다. 워드프레스에서 링크를 넣으면 밑줄이 쳐져있는 기본 링크 스타일이 적용되는데요, 몇 가지의 스타일을 미리 만들어 놓으면 쉽게 하이퍼링크를 버튼으로 사용할 수 있습니다. 1. 버튼 스타일 만들기 [관리자] > [외모] > [Custom CSS]에 접속합니다. 링크에 버튼 스타일을 적용하기 위해 다음과 간단히 디자인된 이미지를 CSS로 작성합니다. ’buttom01’이란 이름으로 작성하였습니다. 디자인 과정은 생략하겠습니다.

    마우스 오버시 보여질 스타일을 다음과 같이 작성하고 [저장]합니다.

    2. 버튼 적용하기 [글 작성화면]의 [텍스트] 편집모드에서 버튼스타일을 적용할 텍스트에 다음과 같이 ’class’를 적용해 줍니다. 홈페이지에서 보면 아래의 그림처럼 버튼스타일로 출력됩니다. 위와 같은 방법으로 ’button02’, ’button03’을 만들어 여러개의 하이퍼링크 스타일을 만들어놓고 사용할 수 있습니다. zman블로그코디 디자인 팀장입니다.http://www.blogcodi.com

  • easy columns 플러그인으로 본문 내용을 가로로 나누어 배치하기

    easy columns 플러그인을 이용해 본문 내용을 가로로 나누어 배치해 보겠습니다. [관리자] 또는 툴바의 [새로 추가]를 클릭하여 [새 글 쓰기] 또는 [새 페이지 추가하기]에 접속합니다. 1. easy columns에서 Column 코드 삽입하기 ’글 작성 화면’에서 easy columns 버튼을 클릭합니다. (워드프레스의 에디터 설정에 따라 easy columns 버튼이 다른 위치에 있을 수도 있습니다.) easy columns으로 삽입할 수 있는 Column 폼들이 보입니다. 페이지를 반반으로 나누기 위해 ’1/2, 1/2’ 로 나우어진 column을 삽입해 보겠습니다. 본문에 column 코드가 삽입되었습니다. ezcol_1half ~ /ezcol_1half라는 코드로 쌓여져있는 위치에 내용을 채우면 됩니다. 2. 내용 채우기 위에서 삽입된 코드들에 내용을 채우기 쉽게 하기위해 다음과 같이 줄을 나누었습니다. 코드로 쌓여진 위치에 ’Half Column’이라는 글자를 지우고 다음과 같이 내용을 채웠습니다. 위와 같은 방법으로 다른 비율의 column 폼도 삽입하여 다음과 같이 배치해 보았습니다. 홈페이지에 나가보면 column이 나누어진 본문 내용을 확인할 수 있습니다. 예제보기 : http://makebct.cafe24.com/?p=118 […]

  • META SLIDER로 홈페이지 첫 화면에 이미지 슬라이더 만들기

    META SLIDER 플러그인을 이용하여 첫 화면에 이미지 슬라이더를 배치해 보겠습니다. BC TOWN™ 테마에서는 이미지 슬라이더를 웹브라우저의 가로폭에 꽉 차게 하거나 홈페이지 가로폭에 맞도록 배치할 수 있습니다. 참조: 메인 커버에 슬라이드 추가하는 방법 http://makebct.net/467?cat=2 1. META SLIDER에 이미지 등록하기 [워드프레스 관리자] > [Meta Slider]에 접속합니다. 아직 아무것도 설정하지 않아 비어있는 상태로 보여집니다. ’Create your firsr slideshow’라는 문구의 왼쪽의 [+] 버튼을 클릭하여 새로운 슬라이드를 생성합니다. 가로사이즈가 1920px인 이미지를 미리 만들어 두었습니다. 슬라이드의 이름을 이미지의 가로사이즈 1920px를 뜻하는 ’1920’으로 지정했습니다. 미리 준비해 놓은 세 개의 이미지를 등록합니다. 슬라이드에 쓰일 이미지 사이즈는 일반적으로 많이 쓰이는 24~27인치 모니터의 해상도 1920*1080px을 기준으로 웹브라우저를 전체화면으로 띄울 경우 슬라이드 이미지가 가로에 꽉 차게 보여지고 상하 길이가 어울리도록 배치하기 위해 1920*650px 사이즈의 이미지로 만들었습니다. 절대적인 사이즈가 아니기 때문에 여러분이 원하는 다른 사이즈로 이미지를 제작하셔도 무방합니다. 슬라이더가 제대로 출력되도록 다음 그림과 같이 슬라이드 설정을 하고 [저장] […]

112/2다음
위로이동