최근의 블로그 커스터마이징 (2021년 4월)

최종 수정일:
댓글 1개 | 관련 글,

귀찮음으로 인하여 이 블로그에 글을 잘 쓰지 못했습니다. 그러나 제가 운영하는 다른 블로그의 스킨을 처음부터 만들어 봄으로써 최근에 Blogger 테마에 대해 조금 더 알게 되었습니다. 그러므로, 새로운 마음으로 블로그를 조금 더 커스터마이징해 보았습니다.

글 작성자 댓글 하이라이팅

이전부터, 저는 제가 쓴 댓글이 쉽게 보이도록 하고 싶었습니다. 그래서 구글에 Highlight Author's commment blogger 정도의 키워드로 검색해 보았고 잘 기억은 나지 않지만 제가 원하는 대로 되지 않았습니다. 최근에서야 이 기능을 구현하기 위해 다시 시도를 했습니다. Blogger에서 쓰이는 태그들을 공부하고 나니까 기본 원리는 간단했습니다.

Blogger에는 여러 가지 태그가 있습니다. 그 중 글 작성자의 댓글을 알아내기 위해 필요한 태그는 다음과 같습니다.

  • data.post.author.name → 글 작성자의 닉네임이 담긴 태그입니다.
  • data:comment.author → 댓글 작성자의 닉네임이 담긴 태그입니다.

즉, data.post.author.namedata:comment.author가 같다면, 이 글을 쓴 사람이 쓴 댓글이므로 글 작성자의 댓글이라고 할 수 있습니다. 저는 다음과 같이 코드를 작성했습니다.

<div expr:class='&quot;comment-block &quot; + (data:comment.author == data:post.author.name ? &quot;author&quot; : &quot;&quot;)'></div>

data.post.author.namedata:comment.author를 비교해서 댓글을 쓴 사람이 글을 쓴 사람과 같다면 div의 클래스에 author를 넣습니다. 그런 다음 CSS를 활용해 파란색 테두리를 달면 끝입니다. 동시에 제 닉네임 BINUBALL 옆에 Author 표시도 넣었습니다. 이것도 CSS로 간단히 구현 가능하니 설명은 생략하겠습니다.

색상 변경

블로그에 쓰이는 메인 색상을 #ee76f5에서 #296ae0로 바꾸었습니다. 분홍색에서 파란색으로 변경되었습니다. 메인 색상이 바뀌었으니 블로그의 바탕 색깔도 #f5f4f0에서 연한 파란색인 #f2f5fb로 변경했습니다.

이미지 테두리

위에서 배경 색깔을 변경함으로써 글 썸네일 이미지의 경계가 잘 보이지 않게 되었습니다. 1px로 폰트 색깔인 #333과 같게 테두리를 넣었습니다. 사실 테두리는 보기가 예쁘지 않은 감이 있어서, 나중에 삭제할 수도 있습니다.

그리드 레이아웃

블로그 메인 화면 레이아웃을 그리드 레이아웃으로 바꾸었습니다. 컴퓨터에서도 모바일처럼 1단 레이아웃을 구성하자니 스크롤을 너무 많이 내려야 하기에 그리드로 바꿔버렸습니다. 현재까지 블로그를 2단으로 만들 생각은 없습니다.

폰트의 변경

폰트를 고딕체에서 명조체로 바꾸었습니다. 정확한 폰트 이름으로 말씀드리자면, Spoqa Han Sans Neo에서 이롭게 바탕체로 바뀌었습니다. 현대 한글에서 쓰이는 11172자를 모두 지원하므로 줄임말 같은 앐, 솿 등을 쓸 때 폰트 깨짐을 걱정하지 않아도 되어서 좋습니다. 이롭게 바탕체는 깔끔한 것이 예쁩니다.

내 사진

BINUBALL 작성

fx-570EX, fx-570ES PLUS 등의 계산기 관련 글들을 주로 올립니다. 블로그스팟으로 블로그를 운영하고 있습니다.

댓글 1개

질문이 있다면 댓글을 달아 주세요. 최대한 빨리 답글을 달아 드리도록 노력하겠습니다.

data:comment.author == data:post.author.name 는, 동명의 딴사람의 경우에서도 하이라이트 되어 버릴지도 모르기 때문에, 이렇게 해 보면 어떨까요?

data:comment.authorUrl == data:post.authorProfileUrl

나의 블로그에서는 이 코드로 자신의 이름에 체크마크가 붙도록(듯이) 했습니다.