구글 블로그 Amalia 템플릿의 ul, ol과 li 태그의 CSS 중복 문제 및 디자인 수정

이제 구글 블로그의 Amalia 템플릿을 뜯어고치는 내용의 포스팅을 슬슬 그만둘 때가 다가오는 것 같다.

웬만한 문제들은 다 해결이 된 것 같아 보인다.

구글 블로그의 템플릿을 지금 사용 중인 Amalia 템플릿에서 또 다른 템플릿으로 교체를 하는 때가 온다면 또 템플릿을 수정하는 내용의 글을 올릴지도 모르겠지만, 진짜 심심하지 않은 이상 그럴 일은 없을 것 같다.

해야 할 일이 많다.

어쨌든 오늘 해결할 문제는 이전부터 항상 언젠가 고치려고 생각하고 있던 문제였는데 항상 다른 포스팅에 우선 순위가 밀려 있었다.

바로 <ul>과 <ol>과 <li> 태그의 디자인을 수정하는 일이었는데, 수정을 위해서 개발자 도구를 살펴보다가 다른 문제점도 발견했다.

ul과 ol과 li 태그도 중복된 CSS 코드가 많다

위의 캡처 이미지처럼 ul 태그의 CSS 스타일이 중복이 되어있는 것이었다.

구글 블로그 Amalia 템플릿의 blockquote 태그에 대한 CSS 중복 문제 수정

구글 블로그 Amalia 템플릿에서 blockquote 태그의 CSS 중복 문제를 발견해서 해결하는 과정을 담았습니다. HTML 편집을 통해 불필요한 코드를 삭제하고, 깔끔한 CSS로 리팩토링하여 블로그 성능을 개선하세요.

바로 얼마 전에 blockquote 태그의 CSS 코드가 중복이 된 걸 해결했던 것처럼 중복된 코드를 제거해 보겠다.

중복된 코드들을 제거하면서 디자인 변경

구글 블로그 관리 페이지에서 '테마' > 'HTML 편집'으로 이동한다.

그리고 [ctrl + F] 키를 누르고 .post-body ul을 검색한다.

일단 내 기준으로 (내 블로그의 글들을 보고 모든 템플릿 편집을 다 따라했다면) 3287번째 줄부터 있는 ul과 li 태그 관련 CSS 코드들을 전부 삭제한다.

dl,ul을 검색한다.

마음 같아서는 이 전체를 다 삭제하고 싶지만,

dl 태그가 어딘가에 쓰이고 있을지 모르니, 이미지에 표시한 ,ul만 삭제하자.

다시 .post-body ul을 검색해서 표시한 부분의 두 줄을 삭제한다.

깜빡하고 이미지에 표시하지는 못했지만, margin:10px 0도 삭제하자.

이번에는 .post-body ul li를 찾아보자.

이건 똑같은 것이 2개가 있다.

먼저 3540번째 줄에 있는 것을 삭제하자.

그리고 1458번째 줄에 있는 .post-body ul li는 그 위에 있는 .post-body li와 아래에 있는 .post-body ol li도 함께 수정하자.

 .post-body li{
    margin:5px 0;
    padding:0;
    line-height:1.7; /* 수정 */
}
 .post-body ul li{
    list-style:circle; /* 수정 */
}
 .post-body ol li{
    list-style:decimal; /* 수정 */
}

이렇게 수정했다.

이제 슬슬 마지막이다.

아까 위에서 삭제했던 코드의 바로 위에도 삭제할 코드가 있었다.

.widget .post-body ol을 찾아서 이 부분을 삭제하자.

뭔가 쓸모없어 보이는 코드가 더 있었지만, 양이 많지도 않고, 어쩌면 필요한 코드일 수도 있으니 여기까지 하겠다.

수정한 결과

중복된 많은 코드들을 삭제했고, 디자인도 이렇게 변경되었다.

뭐가 달라졌길래 이전부터 항상 고치려고 생각하고 있었는가.. 하면,

스크롤을 위로 올려서 처음에 첨부한 이미지와 비교해 보자.

ALERT의 경우에는 설명이 길어서 두 줄이 되었는데, 수정 전에는 들여쓰기가 적용되지 않아서 가독성이 좋지 않았다.

이 부분을 전부터 꼭 고치고 싶었다. 😊

속이 후련하다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.