본문 바로가기
알쓸 정보/잡동사니

워드프레스 - OnePress 테마 소제목(H2) 꾸미기

by 김츄라이 2023. 8. 25.

 

워드프레스도 티스토리 초기때와 마찬가지로 1일 1 포스팅을 목표로 열심히 하고 싶지만 너무나도 심플한 녀석의 페이지를 보고 있자니 이것저것 만져보고 싶은 마음에 집중이 아니 됩니다. 😩

그래서 이번엔 간단히, 정말 간단히 소제목만 꾸며봤습니다. 원프레스 테마 사용하시는 분중에 필요하신 분은 따라 해 보세요. 워드프레스 - OnePress 테마 소제목(H2) 꾸미기 😉

 

 

하지 말라고 하면 더 하고 싶은 법

선생님은 말하셨지 "딴짓하지 말고 글만 써라"

유튜브에 모든 워드프레스 선생님들은 이렇게 말씀하십니다. 다른거 하지 말고 글만 쓰라고. 꾸준히 포스팅하세요. 블로그글이 100개, 1000개 될 때까지 꾸준히 꾸준히 꾸준히...!

 

블로그가 꾸미고 싶다며 무릎꿇고 안선생님에게 비는 정대만짤
워드프레스... 꾸미게 해주세요 😢

 

네네... 저도 압니다. 꾸준한 포스팅 진짜 중요하고, 제일 중요합니다.

근데 한국인의 종특인건지 제 성격인 건지 장비병 비슷한 게 있어서 무슨 일을 시작하기 전에 맘에 들지 않게 세팅해놓지 않으면 자꾸 신경 쓰이는... 그런 게 있습죠. 그래도 정말 자제하는 중입니다. 

 

 

시간도 별로 안걸렸어요... css 잘 못 만지는 저이지만 정말 기초적이며 얇고 넓은 지식으로 눈치껏 다듬어 가는 내용 공유하겠습니다. Onepress는 진짜 내용이 없걸랑요...

 

 

OnePress 테마 소제목(H2) 꾸미기

먼저 CSS를 일부 수정해야 하기 때문에 해당 메뉴로 접근합니다. CSS 수정이라고 해서 복잡하거나 어렵지 않습니다. 잘못될 일도 없습니다. 왜냐, 별도 추가 CSS 페이지에 넣어줄 예정이거든요. 아마 원프레스(onepress) 테마 사용 권유해주신유튜버 스승님의 최근 영상을 보셨다면 아래 메뉴에 어렵지 않게 접근하실 수 있습니다.

 

워드프레스 사용자 정의하기 메뉴 추가 CSS 클릭
워드프레스 플러그인 > 사용자 정의하기 이동 후, 이동된 페이지에서 추가 CSS 클릭

 

위와 같이 접근하시면 추가 CSS 입력 페이지가 등장합니다. 

그곳에 등록할 겁니다.

 

1. 지금 보는 블로그처럼 꾸미기

아래 그림처럼 지금 제가 사용 중인 소제목 스타일로 바꿔보겠습니다.

소제목 스타일 예시
1번스타일, 지금 보고 계신 블로그 서타일

 

/* 소제목 꾸미기 */
h2.wp-block-heading {
  padding-bottom: 10px; 
  padding: 6px; 
  border-style: solid; 
  border-width: 0px 0px 1px 12px;
  border-color: #808080;
}

 

위 내용을 추가 CSS란에 적어주세요. 직접 작성하셔도 CSS경우 문구가 자동완성되는 것들이 많으니 보시고 천천히 따라서 직접 타이핑해보시는 것도 좋습니다. 길지 않아요. 어렵지 않아요. 제 블로그가 마우스 오른쪽 클릭이 되지 않아 이런 말 하는 게 아니고 정말 쉽습니다. 적어보시면 압니다.

이렇게 적어 넣어주시면 됩니다.

 

혹시나... 위 CSS가 귀찮거나 어려운 분들을 위해 텍스트 파일도 추가합니다. 메모장 .txt 파일입니다.

소제목 꾸미기_1.txt
0.00MB

 

⭐ 변경 전, 변경 후

CSS 적용 전 소제목. 기존과 같은 스타일
CSS 적용 전의 소제목
CSS 적용 후 소제목, 글 앞에 6px 패딩과 글 아래 보더가 적용되어 있다.
CSS 적용 후 소제목입니다.


 

2. 심플한 라인만 넣기

하나만 하면 심심할 것 같아, 제 취향으로 비슷하게 하나 더 소개합니다.

아래와 같은 이미지의 스타일로 변경됩니다. 글자 앞에 두꺼운 네모가 들어간 1번과 다르게 그냥 심플하게 밑줄만 넣었습니다.

 

이렇게 변경이 됩니다.

 

위 코드에서 조금 변형해 주면 됩니다.

 

/* 소제목 꾸미기 */
h2.wp-block-heading {
  padding-bottom: 10px; 
  padding: 0 0 6px 0; 
  border-style: solid; 
  border-width: 0px 0px 1px 0px;
  border-color: #808080;
}

 

1번 스타일에서 padding 과 border-width값이 조금 변경되었습니다. 

 

이 코드도 함께 첨부합니다.

소제목 꾸미기_2.txt
0.00MB

 

짧게 설명하자면 텍스트 주변을 상자로 네모로 감싸고 4면의 테두리 두께를 각각 조정해 준겁니다. border-width값이 소제목 텍스트를 둘러싼 네모 선의 두께 조정값입니다.

 

최대한 쉽게 작성했습니다. 어차피 CSS 잘알님들은 이걸 검색해서 들어올 일도 없으니까 🤔 정말 1도 모르는 분들을 위해 작성했습니다. 근데 조금만 들여다보시면 거기서 거기라 다른 방법으로도 충분히 응용 가능합니다.

 

아참! 그리고 잊지말고 '공개(저장)' 꼭 누르세요. 가장 중요합니다.

공개(저장) 버튼
저장 안누르면 도루묵...

 

 


저는 전문 블로거도 아니고, 강사도 아닙니다.

그냥 도전해 보면서 생각한 내용, 남기고 싶은 내용, 공유하고 싶은 내용을 초보의 입장에서 작성하고 있습니다. 행여 잘못되거나 더 나은 정보가 있다면 그렇게 생각하고 계신 님말이 맞습니다. 🫡


 

 

같이보면 좋은 글

 

워드프레스 - OnePress 테마 브레드크럼 설정

워드프레스에 새 둥지를 마련하고 있습니다. 이전부터 생각은 있었지만 실행하지 못하고 있는데 안 그래도 어려운 사정에 7월 수익보고 현타 와서 바로 실행으로 옮길 수 있는 계기가 되었습니

gotrygo.com


댓글


/* 네이버 에널리틱스 */