미넴스킨의 기본모드 색상 설정을 보면 [그 외 요소 색]으로 지정된 색상이 테두리를 포함한 본문에서 사용하는 링크에 적용되는 색상으로 어두운 색상을 선택하면 본문 내용과 구분이 어렵다는 점 때문에 본문 링크 스타일을 변경했습니다.
본문 테두리는 검은색에 가까운 색상으로 설정하고 블로그 포스팅 본문에 사용되는 링크 스타일을 변경하고 방문자의 시선을 끌 수 있는 CSS버튼을 추가했습니다.
티스토리 측에서 붙이는 광고가 상단에 올 때 미넴스킨에서 설정한 광고와 연속되지 않도록 상단광고 2개를 블로그 포스팅 제목 위로 이동시키는 방법은 아래에 있는 포스팅을 참고해 주세요.
무료로 사용 가능한 미넴스킨이 필요하신 분은 미넴스킨 제작자 블로그에서 다운로드 및 스킨 사용방법을 자세하게 설명하고 있으니 참고해서 개인 취향에 맞도록 설정하시면 됩니다.
미넴스킨 본문 링크 스타일 변경 및 CSS 버튼 추가
티스토리 관리 페이지에서 좌측 하단에 있는 [꾸미기] - [스킨편집]을 눌러서 스킨 편집을 할 수 있는 페이지에서 보시면 기본 모드 색상을 선택할 수 있으며, [그 외 요소 색]이 미넴스킨의 테두리를 비롯한 링크 스타일 색상까지 지정되는 옵션입니다.
미넴스킨 본문 링크 스타일 변경 - 기존 링크 스타일 삭제
먼저 현재 사용하고 있는 미넴스킨에서 사용하고 있는 본문 링크 스타일의 색상 및 테두리의 색상을 지정하는 코드를 찾아서 링크 스타일에 적용되는 코드를 2개(기본모드 색상, 다크모드 색상)를 삭제할 것입니다.
- HTML 편집 모드에서 "etc-color"를 검색하면 <s_if_var_etc-color> 코드 아래에 있는 ".content-article a," 라는 부분을 찾아서 [컨트롤+X]로 삭제
- 방금 삭제한 ".content-article a," 을 검색해 보면 다크모드에서 사용되는 링크 스타일 " body.dark-mode .content-article a,"를 찾을 수 있으며, 이 코드 역시 삭제합니다.
미넴스킨 본문 링크 스타일 변경 - CSS 코드 추가
미넴스킨에 적용되어 있는 링크 스타일의 색상을 제거했으니 본문에서 사용할 새로운 링크 스타일 코드를 CSS 편집창에서 가장 하단에 추가하면 링크 스타일 변경이 완료됩니다.
CSS 버튼 추가
이미지로 된 버튼을 사용하는 것보다 CSS 버튼을 사용하는 것이 블로그 작성 시 시간도 단축되고 CSS 버튼의 애니메이션 효과가 있어서 방문자의 시선을 끌 수 있습니다.
CSS 버튼 서식 작성
본문 작성 시 버튼이 필요 할 때 빠르게 불러오기 위해서 서식을 작성해서 사용하시면 편리하게 사용 할 수 있습니다.
서식 작성시 HTML 모드에서 아래에 있는 코드 내용을 붙여 넣기하고 저장하면 됩니다.
<p data-ke-size="size16"> </p>
<p style="user-select: auto;" data-ke-size="size16"><a style="user-select: auto;" href="#"><button class="click-me" style="user-select: auto;">내용 작성</button></a></p>
<p data-ke-size="size16"> </p>
<p data-ke-size="size16"> </p>
맺음말
지금까지 무료로 사용 가능한 미넴스킨의 본문 스타일을 변경하고 방문자의 시선을 끌 수 있는 CSS 버튼을 추가하는 방법에 대해서 알아보았습니다.
미넴스킨 상단광고 2개를 블로그 포스팅 제목 위로 이동시키는 방법이 필요하신 분은 아래에 있는 링크를 이용하시면 해당 포스팅을 볼 수 있습니다.
출처 및 저작권 표시
자료 출처
저작권 표시
썸네일 디자인 : 미리캔버스에서 제작되었습니다.
본문 글꼴(폰트) : Google Noto Sans Korean - OFL(Open Font Licese)
'블로그' 카테고리의 다른 글
| 티스토리 블로그 미넴 스킨 썸네일 포스팅 본문에 자동 출력 설정 (0) | 2023.09.10 |
|---|---|
| 미넴스킨 카카오톡 네이버 카페 밴드 공유 버튼 추가 3단계 (0) | 2023.09.05 |
| 미넴스킨 상단광고 2개 블로그 포스팅 제목 위로 이동 (6) | 2023.08.27 |
| 티스토리 블로그 루트 도메인 접속 불가 해결방법 (2) | 2023.08.13 |
| 글꼴(폰트)의 상업적 이용 방법 - 추천 사이트 Best 5 (0) | 2023.06.03 |
댓글