블로그 게시물을 돋보이게 하기 위해 텍스트 블록 서식을 만들었습니다. 이 텍스트 블록은 H태그와 단락을 꾸며 글에 집중할 수 있도록 만든 디자인입니다. H태그에 배경색을 추가하여 버튼처럼 보이도록 했고, 단락의 테두리가 글에 집중할 수 있게 합니다. 방문자에게 알리고 싶은 중요한 정보를 적을 때 사용하면 좋을 것 같습니다.

H태그 테두리 텍스트 블록 만드는 방법

이 글에서 H태그 테두리 텍스트 블록을 사용했습니다. 아래는 소스 코드와 사용 방법입니다.

/* OttzidBox - https://ottzid.com */
.OttzidBox{position:relative;margin:40px 0;padding:40px 15px 15px;border:2px solid rgba(51,51,51,1);border-radius:3px;}
.OttzidBox h2 {border:2px solid rgba(51,51,51,1);background-color:#D1D0ED;border-radius:3px;padding:8px 20px!important;position:absolute;margin:0!important;font-size:17px!important;color:#333;top:-20px;left:30px;text-transform:uppercase}
.OttzidBox.box-yellow h2{background:#EFE6AC}
.OttzidBox.box-gray h2{background:#b2b2b8}
.OttzidBox.box-red h2{background:#d98381}
.OttzidBox.box-green h2{background:#7FAF7B}
.OttzidBox.box-blue h2{background:#7CB4B0}

블로그스팟 편집기에서는 글을 쓸 때 편집기에서 스타일 태그를 넣어도 되지만, 자주 사용하는 코드라면 테마에 사용자 지정 CSS로 저장해서 사용하는 것이 편리합니다.

Blogger에서 사용 시

  • Blogger 대시보드에서 테마를 클릭합니다.
  • 맞춤 설정 버튼의 아이콘을 클릭하고 HTML 편집 페이지로 이동합니다.
  • CSS 코드를 복사하고 ]]></b:skin</li> 앞에 붙여넣고 저장합니다.
  • 게시물 편집기에서 제목의 왼쪽 하단에 있는 아이콘을 클릭합니다.
  • 'HTML 보기'를 선택합니다.
  • 아래 코드를 붙여넣고 글을 작성합니다.
<!-- 기본 색상 -->
<div class="OttzidBox">
<h2>Default</h2>
  <p>여기에 글을 작성합니다.</p>
</div>

<!-- 노란색 -->
<div class="OttzidBox box-yellow">
<h2>Yellow</h2>
  <p>여기에 글을 작성합니다.</p>
</div>

<!-- 회색 -->
<div class="OttzidBox box-gray">
<h2>Gray</h2>
  <p>여기에 글을 작성합니다.</p>
</div>

<!-- 푸른색 -->
<div class="OttzidBox box-blue">
<h2>Blue</h2>
  <p>여기에 글을 작성합니다.</p>
</div>

<!-- 빨간색 -->
<div class="OttzidBox box-red">
<h2>Red</h2>
  <p>여기에 글을 작성합니다.</p>
</div>

<!-- 녹색 -->
<div class="OttzidBox box-green">
<h2>Green</h2>
  <p>여기에 글을 작성합니다.</p>
</div>

티스토리는 서식 기능을 이용하여 사용하면 편리합니다.

 <style>/*<![CDATA[*//* OttzidBox - https://ottzid.com */
.OttzidBox{position:relative;margin:40px 0;padding:40px 15px 15px;border:2px solid rgba(51,51,51,1);border-radius:3px;}
.OttzidBox h2 {border:2px solid rgba(51,51,51,1);background-color:#D1D0ED;border-radius:3px;padding:8px 20px!important;position:absolute;margin:0!important;font-size:17px!important;color:#333;top:-20px;left:30px;text-transform:uppercase}
.OttzidBox.box-yellow h2{background:#EFE6AC}
.OttzidBox.box-gray h2{background:#b2b2b8}
.OttzidBox.box-red h2{background:#d98381}
.OttzidBox.box-green h2{background:#7FAF7B}
.OttzidBox.box-blue h2{background:#7CB4B0}/*]]>*/</style>

티스토리에서 사용 시

  • 블로그관리홈 - 서식 - 서식쓰기 - 에디터 기본모드에서 HTML 블록을 열고 위 <style>태그를 복사하여 붙여넣습니다.
  • 다음 HTML 모드로 전환하고 HTML 코드를 복사하여 붙여넣고 서식을 저장합니다.
  • 글쓰기 편집기에서 서식을 불러와 사용합니다.

또는 HTML 코드에 직접 스타일을 적용할 수 있습니다. 어쩌면 티스토리에서는 이게 더 편할지도 모르겠네요. 아래 예제와 같이 코드를 작성해보세요.

<div class="OttzidBox" style="position:relative;margin:40px 0;padding:40px 15px 15px;border:2px solid rgba(51,51,51,1);border-radius:3px;">
<h2 style="border:2px solid rgba(51,51,51,1);background-color:#D1D0ED;border-radius:3px;padding:8px 20px!important;position:absolute;margin:0!important;font-size:17px!important;color:#333;top:-20px;left:30px;text-transform:uppercase">제목</h2>
  <p>여기에 글을 작성합니다.</p>
</div>

그대로 사용해도 되지만 블로그 디자인에 맞는 색상을 추가하거나 위의 코드에서 색상코드를 변경하여 사용해보세요.