나는 현재 wordpress.com에서 Skivers 라는 테마를 사용중이다. 이 테마는 프리미엄 이상의 요금제에서 선택 가능하다.

이 테마를 선택한 이유는 음원제작과 관련하여 내 활동을 간략하게 소개해 줄 랜딩페이지를 블로그와 함께 운영하면 좋지 않을까 라고 생각했기 때문이다.

나는 가까운 미래에 zoahaza.art가 대박날거라 예상하고 있으며, 이러한 내 예상대로라면 랜딩페이지는 아주 중요한 역할을 할 것이다.

랜딩페이지를 걸어준 후 사이트의 메인을 최신글이 보이게 설정해서, 메인화면에서는 랜딩페이지가 아닌 일반 블로그로 보이게끔 조치하였다.

여기에 나는 커스텀 CSS를 삽입해서, zoahaza.art에 활용하고 있다.

아래는 zoahaza.art에 적용된 커스텀 CSS의 소스코드이다.

*

.site-header {
background: #333;
color: #fff;
}

.site-header .a {
color: #fff;
}

.site-header .a:hover {
color: #ffffd4;
}

.site-header .wp-block-navigation__submenu-container li {
background: #eee;
color: #000;
}

.site-header .wp-block-navigation__submenu-container li .a {
background: #eee;
color: #000;
}

.site-header .wp-block-navigation__submenu-container li .a:hover {
color: #000;
}

@media only screen and (min-width: 1200px) {

.wp-site-blocks .site-header {
display: flex;
position: fixed;
left: 30px;
right: 30px;
z-index: 1000;
}

.wp-site-blocks header.wp-block-template-part {
height: 180px;
}

}

*

이 코드로 노릴 수 있는 효과는 크게 다음과 같다.

1. 블로그 상단 메뉴바 부분 짙은 회색 배경과 흰 글자로 처리
2. 2차 드롭다운 메뉴 연한 회색 배경과 검은 글자로 처리
3. PC(데스크탑)에서 블로그 상단 메뉴바를 스크롤로 내려도 고정위치에 있게 하기

이 중 3번은 태블릿이나 모바일에서는 절대 적용되면 안 된다. 워드프레스의 특성상 모바일에서 position:fixed를 설정하면 글의 가독성이 심각하게 떨어져서 오히려 심각한 역효과가 난다.

그래서 미디어쿼리를 걸어준 것이며, 역시나 프린트를 할 때 position:fixed를 적용시켜도 심각한 역효과가 나기 때문에(글의 가독성을 해친다: 글 중간이 짤림.)

only screen과 min-width를 함께 걸어준 것을 볼 수 있다.

*

– 블로그 썸네일은 flaticon에서 제공받았습니다. –

2022년 10월 18일 작성.

블로그에 댓글이 달리지 않는 현상이 발견되어, 테마를 또다시 바꿨다.

댓글과 관련된 기능들을 모두 제한하지 않았는데도 댓글이 달리지 않아 이상하다고 생각했기 때문에, 테마가 자체적으로 댓글을 지원하지 않아서 이 문제가 발생하는 것이라 의심되었다. 역시 예상했던 대로 Skivers 테마 자체가 댓글을 지원하지 않아서 문제가 생겼다.

지금은 댓글과 관련된 문제는 해결된 상태다.

따라서 위에 기록한 것은 과거형이 되어 버렸다. 참고 바란다.

2022년 10월 31일 작성.