초보가 블로그를 처음 꾸미면서 겪은 시행착오 정리(블로그 배경 변경, 폰트 및 메뉴 변경, 가독성 개선 시도)

글이 제법 생기다 보니까 슬슬 욕심이 생기기 시작했습니다.
이왕 하는 거, 좀 더 제대로 만들어 보자는 생각으로 블로그를 직접 꾸며봤습니다.
이 글에서는 AI를 활용해 CSS로 블로그 배경, 폰트, 메뉴를 설정하는 방법을 알아보겠습니다.

---

1. 배경 바꾸기

가장 먼저 건드린 건 배경이었습니다.

일단 블로그가 만들어지면 테마가 설정되어 있긴 하지만,
당연하게도 ‘내 공간’ 같은 느낌이 들지 않습니다.

그래서 전 글에서는 블로그 마스코트인 ‘쏘순이’를 활용해서
반복 패턴 느낌의 배경을 만들어 보았습니다.

일단 이미지를 어떻게 배경으로 설정하는지 먼저 살펴보겠습니다.

지난번에 폰트, 버튼 변경할 때 CSS추가와 관련한 내용을 다루었습니다.
어떻게 명령어끼리 구분 짓고, 어떻게 CSS명령어를 입력하는지 등
자세히 알고 싶으신 분들은 아래 글을 참고해 주시면 좋을 것 같습니다.

CSS명령어를 추가해서 블로그 배경을 변경하는 방법은 아래의 순서로 설정하시면 됩니다.

관리자 화면에서 모양 -> 사용자 정의 -> 추가CSS 경로로 들어가면 위 이미지처럼 명령어 입력 화면이 나옵니다.

위 이미지에 설명이 나와있는 것처럼,

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-image: url(여기에 이미지 주소 입력);
    background-repeat: repeat;
    background-size: auto;

    opacity: 0.3;
    z-index: 0;
}

이렇게 입력하면 됩니다. (쓰시는 AI가 있다면 요청해서 받으셔도 무방합니다.)
참고로 저는 배경이 너무 선명한게 싫어서 투명도를 적용하기로 했고 opacity 부분은 투명화 관련 명령어입니다.

이미지 주소를 넣는 부분에는 ‘괄호 안에’ 이미지의 주소를 입력하면 되는데, 먼저 주소를 따와야 합니다.

일단 CSS를 입력하는 창을 띄워 놓은 상태에서 인터넷 브라우저의 새 창을 띄웁니다. (조금 번거롭지만 다른 방법보다 그나마 이게 제일 깔끔하고 쉽습니다..)

그리고 관리자 화면을 하나 더 띄운 뒤, 왼쪽 메뉴에서
미디어 -> ‘미디어 파일 추가’ 클릭 -> 배경으로 쓸 이미지 업로드 -> ‘아래에 클립보드에 URL 복사’ 클릭
-> 다시 CSS입력 창으로 돌아와서 딴 주소를 저 괄호 안 영역에 입력하면 됩니다.

ex) background-image: url(내 블로그 주소/블라블라~)
이런식이 됩니다.

(배경화면 적용 예시)
✨ 드디어 내 블로그에 배경이 생겼습니다 ✨

---

2. 글 가독성 개선 시도 실패경험(CSS로 글자크기 변경은 실패, 에디터를 이용한 기존 방법 유지)

배경을 바꾸고 나니까
이번엔 글이 눈에 들어오기 시작했습니다.

폰트는 저번에 바꿔봤고..
블로그의 글자들이 기본설정된 크기가 좀 작은 느낌이어서 폰트처럼 기본 글자크기를 CSS로 픽스할 순 없을까 알아보다가 이번에도 AI에게 CSS 명령어를 한번 받아보았습니다.
(폰트 변경 관련해서는 아래 글을 참고해주셔도 됩니다.)

처음에는 글 편집에서 S, M, L 같은 버튼을 눌러서 조절하는 것과 같은 기능인가 싶었는데 그게 아니라, 블로그 전체의 글자 크기를 설정하는 명령어 였습니다.

하지만 CSS 명령어를 이용해서 ‘기본 글자크기 설정’을 바꾸는 데에는 실패했습니다.

CSS추가 관련해서 여러가지 시행착오를 겪으면서 알게 된 사실인데,
워드프레스는 ‘테마가 설정되어 있으면 테마에 먹혀있는 설정이 CSS명령어보다 우선적으로 작동한다’는 것입니다.

일단 AI에게 CSS 명령어를 받았는데 크기 변경 관련한 명령어를 어떻게 수정하고 추가해도, 실제 블로그 기본 글자크기에는 영향을 주지 않았습니다..

초보 기준에서는 굳이 CSS로 글자 크기를 건드리기보다는, 기본 에디터 기능을 사용하는 게 더 간편한 것 같습니다.

---

3. 기초 페이지 생성 & 메뉴 정리

기초 페이지에 관해서는 가장 먼저 다루었어야 하는데, 기억력이 좋지 못해서 지금에서야 다루게 되었습니다.😭

일단 블로그를 처음 생성하면 기본페이지들은 있지만 내가 원하는 구조가 아니라 직접 다시 수정해야 합니다.

다행히도 페이지 생성과 수정 자체는 어렵지 않습니다. 관리자 화면에서 페이지를 들어간 다음 제목 블록에 페이지로 쓸 이름을 입력해주고 공개하면 해당 페이지가 생성되기 때문입니다.

일단 저같은 경우에는 애드센스 승인을 위한 ‘필수 페이지’ 위주로 먼저 세팅했습니다.
애드센스 승인 관련해서 무엇이 필요한지 고민해보고 조사해 보았는데 해당 내용은 아래글을 참고해 주시면 좋을 것 같습니다.

이렇게 페이지들을 생성하고 나니 홈 화면에서 상위 메뉴가 뒤죽박죽이었던걸로 기억합니다.
그래서, 메뉴 순서를 손 봐 주기로 했습니다.👊 💥

메뉴는 아래 이미지처럼 블로그 홈 화면에서 표시되어 각 페이지로 연결하게 도와줍니다.

우선 관리자화면 모양 -> 메뉴로 들어가보면 위와 같은 화면을 보시게 됩니다.(보고 계시는 이미지는 설정 후 결과물입니다.) 처음 설정하시는 경우에는 미리 만들어뒀던 페이지들을 수정하고 순서를 정해주어야 합니다.

이렇게 설정하고 나면 블로그 초기 화면이 어느 정도 짜임새 있게 자리 잡힐 것입니다.

---

마무리

이번 포스팅은 생각보다 쓰는 게 쉽지 않았습니다.
설정을 마친 지 며칠이 지나서, 일부는 직접 다시 확인하면서 썼지만
몇몇 부분은 기억에 의존해야 했기 때문입니다.

막상 해보면서 바로 기록하는 게 제일 좋다는 건 알아도,
실제로는 나중에 정리하게 되는 경우도 꽤 생기는 것 같습니다.

그래서 이번 포스팅은 완벽한 순서나 정리된 과정이라기보다는,
“아, 이런 식으로 진행했구나” 정도로 가볍게 참고해주시면 좋겠습니다.