구글 블로그 스팟 Notable 테마 포스팅 글 첫줄 강조 없애기

구글블로그 테마를 Notable로 정하고 테스트로 글을 하나 올렸을때 가장 당황한 부분이 첫줄 강조였다. 필자도 html이랑 CSS에 약해서 이 부분 코드를 찾아 없애지 못했다면, 다른테마를 골랐을지도 모르겠다.

1. 당황스러웠던 첫줄

첫 줄에 사진부터 넣으면 첫 줄 강조가 나타나지 않지만, 첫 줄에 문장이 있으면 아래 빨간상자에 있는 것처럼 강조를 시켜준다

이렇게 작은 사진으로 보면 그냥 크게 와닿지 않는데 1:1 크기로 처음 보면 이런 느낌이다.

첫 번째 글자를 기본 글씨의 두 배 이상으로 키우고 첫 번째 글자와, 그 뒤로 첫줄은 칼라를 테마 색으로 바꿔버린다. 이러다 보니 시선이 제목보다 첫 글자에 먼저 뺏겨버린다. 게다가 썩 이쁜 디자인이 아니다.

2. 테마 코드 수정

2.1. PC화면 첫글자 크기 수정

블로그 관리자 페이지에서 아래와 같은 코드를 찾아서 지운다. 혹은 나중에 되살릴 것을 생각하면 주석처리를 하는 것도 좋다.

body.item-view .Blog .post-body::first-letter{

    float:$startSide;

    font-size:$(body.text.font.size * 2 * 2);

    font-weight:600;

    line-height:1;

    margin-$endSide:16px

}

Colored by Color Scripter

2.2. 포스팅 첫 줄 글자색 변경

아래의 코드를 찾아서 지워준다. 마찬가지로 되살릴 것을 생각한다면 주석처리 해주자

1
2
3
body.item-view .Blog .post-body::first-line{
    color:$(item.action.color)
}
Colored by Color Scripter
cs

2.3. 모바일 화면에서 첫글자 크기 수정

두줄을 삭제하고 PC 에서만 보고 끝난줄 알았는데 이 테마가 반응형 테마다 보니 모바일에서 봤을때 또 글자가 커져 있어서 당황했다. 아래 코드를 지우면 해결이 된다.

1
2
3
4
body.item-view .Blog .post-body::first-letter{
    font-size:$(body.text.font.size * 14 / 20 * 4);
    line-height:$(body.text.font.size * 14 / 20 * 4)
}
Colored by Color Scripter
cs

여기까지 지우면 평범한 블로그 스킨이 된다.

결과물은. 지금 보고있는 이 블로그의 첫 줄이 결과물이다.

3. 마치며

티스토리 스킨도 많이 수정해 봤지만, 왠지 구글 블로그의 코드가 더 어렵게 느껴 지는건 나뿐인가 싶다. 구글 블로그에 대한 국내 자료가 너무 없어서, 부족한 필자라도 소소한 자료하나를 남겨 본다.

Breaking