타이틀 제목 있는 박스 만들기, 티스토리 서식, 워드프레스 재사용 가능 블록

01

of 05

박스 결과물 보기

아래 이미지는 실제로 티스토리나 워드프레스에서 사용했을때의 이미지로 상단부의 제목 (타이틀)을 마음대로 변경할 수 있다.

02

of 05

티스토리 서식 만들기

티스토리의 경우 서식 관리 메뉴가 있어서 아주 쉽게 사용할 수 있다. 아래의 코드로 서식을 하나씩 만들어서 사용하면 된다.

※ 폰트, 사이즈, 색상, 여백 등은 본인의 티스토리에 맞게 조금 수정해서 사용하면 된다.

① 브라운

<div style="position: relative; background-color: #fdf5e6; padding: 30px 20px 18px 14px; line-height: 1.6; margin-top: 15px; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -11px; left: 15px; background-color: #cd853f; padding: 1px 6px 1px 7px; color: #fff; border-radius: 2px; letter-spacing: 1px; font-size: 0.875em; font-family: 'NanumSquareRound';">타이틀 입력</div>
<p data-ke-size="size16">내용 입력</p>
</div>
Code language: CSS (css)

② 그린

<div style="position: relative; background-color: #f0fff0; padding: 30px 20px 18px 14px; line-height: 1.6; margin-top: 15px; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -11px; left: 15px; background-color: #32cd32; padding: 1px 6px 1px 7px; color: #fff; border-radius: 2px; letter-spacing: 1px; font-size: 0.875em; font-family: 'NanumSquareRound';">타이틀 입력</div>
<p data-ke-size="size16">내용 입력</p>
</div>
Code language: CSS (css)

③ 그레이

<div style="position: relative; background-color: #f9f9f9; padding: 30px 20px 18px 14px; line-height: 1.6; margin-top: 15px; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -11px; left: 15px; background-color: #a9a9a9; padding: 1px 6px 1px 7px; color: #fff; border-radius: 2px; letter-spacing: 1px; font-size: 0.875em; font-family: 'NanumSquareRound';">타이틀 입력</div>
<p data-ke-size="size16">내용 입력</p>
</div>
Code language: CSS (css)

④ 퍼플

<div style="position: relative; background-color: #faf5ff; padding: 30px 20px 18px 14px; line-height: 1.6; margin-top: 15px; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -11px; left: 15px; background-color: #b189d5; padding: 1px 6px 1px 7px; color: #fff; border-radius: 2px; letter-spacing: 1px; font-size: 0.875em; font-family: 'NanumSquareRound';">타이틀 입력</div>
<p data-ke-size="size16">내용 입력</p>
</div>
Code language: CSS (css)

⑤ 블루

<div style="position: relative; background-color: #f0faff; padding: 30px 20px 18px 14px; line-height: 1.6; margin-top: 15px; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -11px; left: 15px; background-color: #71beff; padding: 1px 6px 1px 7px; color: #fff; border-radius: 2px; letter-spacing: 1px; font-size: 0.875em; font-family: 'NanumSquareRound';">타이틀 입력</div>
<p data-ke-size="size16">내용 입력</p>
</div>
Code language: CSS (css)

⑥ 레드

<div style="position: relative; background-color: #fff5f7; padding: 30px 20px 18px 14px; line-height: 1.6; margin-top: 15px; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -11px; left: 15px; background-color: #f67280; padding: 1px 6px 1px 7px; color: #fff; border-radius: 2px; letter-spacing: 1px; font-size: 0.875em; font-family: 'NanumSquareRound';">타이틀 입력</div>
<p data-ke-size="size16">내용 입력</p>
</div>
Code language: CSS (css)

03

of 05

워드프레스 재사용 가능 블럭 만들기

https://본인 도메인/wp-admin/edit.php?post_type=wp_block 접속하면 재사용 가능 블록 페이지에 접속된다. 접속 후 아래 두 가지 방법 중 한 가지 방법을 선택한다.

1. JSON에서 가져오기

아래 첨부 파일을 다운로드 받은 후 압축을 풀고 하나씩 가져오기 하면 된다. 직접 만들어둔 파일로 가져오기만 하면 자동으로 재사용 가능 블록이 생성된다.

2. 새로 추가

아래 순서대로 직접 재사용 가능 블록을 작성하면 된다.

① 블록 삽입 – 클래식 선택

② 삽입된 클래식 – 도구 – 원본 코드 선택

③ 원본 코드에 아래의 ④ ~ ⑨ 코드를 하나 씩 삽입하여 총 6개의 재사용 가능 블록을 만든다.

※ 본인의 테마에 맞게 폰트, 여백, 색상을 수정하면 된다.

④ 레드

<div style="position: relative; background-color: #fff5f7; padding: 30px 20px 0px 14px; line-height: 1.5; margin: 40px 0; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -11px; left: 15px; background-color: #f67280; padding: 1px 6px 1px 7px; color: #fff; border-radius: 2px; font-size: 1rem; font-family: 'NanumSquareRound';">타이틀 입력</div>
<p>내용 입력</p>
</div>
Code language: CSS (css)

⑤ 블루

<div style="position: relative; background-color: #f0faff; padding: 30px 20px 0px 14px; line-height: 1.5; margin: 40px 0; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -11px; left: 15px; background-color: #71beff; padding: 1px 6px 1px 7px; color: #fff; border-radius: 2px; font-size: 1rem; font-family: 'NanumSquareRound';">타이틀 입력</div>
<p>내용 입력</p>
</div>
Code language: CSS (css)

⑥ 퍼플

<div style="position: relative; background-color: #faf5ff; padding: 30px 20px 0px 14px; line-height: 1.5; margin: 40px 0; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -11px; left: 15px; background-color: #b189d5; padding: 1px 6px 1px 7px; color: #fff; border-radius: 2px; font-size: 1rem; font-family: 'NanumSquareRound';">타이틀 입력</div>
<p>내용 입력</p>
</div>
Code language: CSS (css)

⑦ 그레이

<div style="position: relative; background-color: #f9f9f9; padding: 30px 20px 0px 14px; line-height: 1.5; margin: 40px 0; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -11px; left: 15px; background-color: #a9a9a9; padding: 1px 6px 1px 7px; color: #fff; border-radius: 2px; font-size: 1rem; font-family: 'NanumSquareRound';">타이틀 입력</div>
<p>내용 입력</p>
</div>
Code language: CSS (css)

⑧ 그린

<div style="position: relative; background-color: #f0fff0; padding: 30px 20px 0px 14px; line-height: 1.5; margin: 40px 0; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -11px; left: 15px; background-color: #32cd32; padding: 1px 6px 1px 7px; color: #fff; border-radius: 2px; font-size: 1rem; font-family: 'NanumSquareRound';">타이틀 입력</div>
<p>내용 입력</p>
</div>
Code language: CSS (css)

⑨ 브라운

<div style="position: relative; background-color: #fdf5e6; padding: 30px 20px 0px 14px; line-height: 1.5; margin: 40px 0; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -11px; left: 15px; background-color: #cd853f; padding: 1px 6px 1px 7px; color: #fff; border-radius: 2px; font-size: 1rem; font-family: 'NanumSquareRound';">타이틀 입력</div>
<p>내용 입력</p>
</div>
Code language: CSS (css)

04

of 05

워드프레스에서 사용하기

① 글 작성시 박스 삽입할 위치에서 왼쪽 상단 블록 삽입기 토글 – 재사용 가능 탭 선택 – 재사용 가능 블록 선택

② 선택한 재사용 가능 블록이 아래 이미지 처럼 삽입 되었다.

③ (중요) 재사용 가능 블록이 삽입 되었다면 옵션 – 부모 블록 선택 (재사용 가능 블록)을 선택한다.

④ (중요) 부모 블록 선택 – 일반 블록으로 전환 선택한다.

⑤ (중요) 재사용 가능 블록을 삽입했다면 꼭 일반 블록으로 전환 후 사용해야 한다. 이제 박스 타이틀과 내용을 입력하면 된다.

05

of 05

워드프레스 박스 만들기, 글 상자 만들기

워드프레스 박스 만들기, 글 상자 만들기 관련한 글은 아래를 참조