친절한효자손 취미생활

지금까지 쭉 살펴본 Fastboot 강좌 중 추천글 모듈의 색상을 변경하는 방법에 대한 글은 작성하지 않았음을 발견했다. 방명록에 요청하신 분들도 몇 분 계셔서 아예 이렇게 강좌로 대처하려고 한다. 방법은 어렵지 않으니, 그냥 보시고 따라하시면 된다.


Fastboot 추천글 모듈에 있는 배지(Badge) 색상을 변경하는 방법에 대해 알아보자.


먼저, 이 배지는 마케팅 용도다. 추천글 모듈 자체도 마케팅 용도인데, 여기에 한번 더 주목을 받기 위해서 배지로서 마케팅을 하는 것! 따라서 클릭율이 아무래도 그 어떤 사이드바 보다도 높을 수 밖에 없다. 제작자이신 Readiz님께서 올리신 강좌를 토대로 한번 업그레이드 시켜 변경해 봤는데, 잘 적용 되었다.


배지 색상은 자유롭게 변경이 가능한데, 너무 많이 변경하지 않는게 좋겠다고 생각했다. 이유는 조잡해지기 때문이다. 과하면 안 하니만 못하다라는 말이 있듯, 너무 다양한 뱃지는 오히려 악영향을 미칠 수 있으므로 적절히 갯수를 조절하여 적용시킬 수 있도록 하자.




관리자로 들어오셔서 꾸미기 > HTML/CSS 편집 으로 들어간다.




CSS 카테고리에 보시면 위와같은 태그를 찾으실 수 있다. 주석으로 추천글모듈 이라고 되어있는 부분이다. #recomended 부터가 바로 배지를 형성하는 태그이며, 주황색 박스표시가 된 부분이 바로 색상 16진수 부분이다. 여기의 태그코드를 원하는 색상의 16진수 코드로 입력해주시면 되는 것이다. 여기까지가 A그룹이라고 가정 하겠다.




그리고 바로 아래에 이런 태그를 하나 더 볼 수 있다. 여기까지가 하나의 배지를 형성하는 코드다. 이제 색상을 수정해야 하는 부분도 알았으니 어떻게 새로운 색상의 배지를 추가하는지 알아본다. 여기는 B그룹 이라고 가정한다.




보시면 #recomended span.name>span 부분에서 name 부분을 변경하며 A그룹을 두개 더 추가 했다는것을 알 수 있다. 여기에서는 name2 와 name3 를 새로 만들어 추가하였다. 그리고 각각의 그룹안에 있는 색상 태그의 16진수 코드를 원하는 색으로 변경해서 입력해놨다.


B그룹 태그는 쉽다. name2name3 로 각각 수정한 태그를 A그룹에 맞게 추가로 넣어놓은 모습이다. 이렇게 각각 A그룹-B그룹 짝을 맞추어 색상 태그만 수정해서 넣으면 된다.




이제 어떻게 사용을 하는지에 대해 알아보자. 현재 사이드바에 적용된 추천글 모듈 중 일부를 캡처한 이미지다. 빨간색으로 표시된 안쪽 태그 중 span class="name" 이라고 되어 있는 부분이 보일 것이다. 그 안에 들어가는 name을 아까 그룹지어서 변경했던 태그로 적용시키면 된다. 위에서 name2 그리고 name3 를 추가로 만들었지 않은가? 바로 해당 span class 태그를 적용시키면 되는 것이다. name은 Fastboot의 기본 색상인 빨간색이며, 추가로 만든 name2는 파란색, name3는 초록색이다. 이 색상은 16진수가 결정한다고 위에 설명드렸으니, 각자 배지 색상은 원하는 색으로 적용시키면 된다.




16진수 코드는 티스토리 글쓰기에서도 확인 가능하다. 이렇게 글 색상 버튼을 누르면 초록색 부분에 표시된 샵과 숫자가 바로 그것이다. 원하는 색으로 지정 후 해당 태그를 메모장에 붙여넣고 작업하시면 된다. 끝.


Fastboot 방문자 카운터 숫자 크기 변경 방법

티에디션 상단에 고정형 이미지 배너 광고를 반응형처럼 만들기

친절한효자손 블로그 연구를 모두 오픈하는 이유를 말씀 드리겠습니다


"친절한효자손 취미생활" 을 검색!


공유하기

facebook twitter kakaoTalk kakaostory naver band