고래 스킨을 지난 글에 추천을 했었는데 아이콘이 액박으로 떠서 수정했어요.
좋은건 나눠야지! 나도 예전 CSS, HTML 했던거 기억 되살려 했던거라 참고만 부탁드립니다 🤓
그리고 시작 전에 아이콘 액박 대신 다른 아이콘을 넣고싶으면
1) window+. 을 키보드로 눌러서 이모티콘을 4개의 숫자 대신 넣어주거나
2) CSS entities 사이트에서 entity 를 찾아서 넣어주면 된다.
티스토리 고래 스킨 수정하기
아이콘 액박편
1. 헤더에 있는 아이콘
(편집 전)
- 블로그관리 > 스킨편집 > html 편집 > html
- header-ico 라고 html 에 검색하여 앞에 <!-- 뒤에 --> 를 기재하여 코드를 주석 처리 해준다.
<!--<div id="header-ico"><button class="btn_topMenu" id="btn_topbtn"><i id="topbtn" class="fas fa-bars"></i></button></div>-->
(편집 후)
2. 페이지 우측의 사이드 바 아이콘
(편집전)
- 블로그관리 > 스킨편집 > html 편집 > html
- HTML 에서 아래 사항들 주석 처리 해줄 것
① fa-search : 검색어 앞 아이콘
<!--<i class="icon fa fa-search"></i>-->
<input class="input-text" type="text" name="" value="" id="search-input" class="ie-nanum" onkeypress="if (event.keyCode == 13) { }" placeholder="🔍︎ 검색어 입력 후 엔터를 누르세요.">ps. 검색어 앞 아이콘 없애고 아래처럼 넣으면 돋보기 모양 추가 가능 (CSS 에서 수정해줘도 되는데 나는 이 방법으로 함)
위 코드로 수정하면 아이콘 액박 뜨는 것 없어지고 아래처럼 텍스트 앞에 돋보기도 추가 됨.
placeholder="🔍︎ 검색어 입력 후 엔터를 누르세요."② fa-sm : 그 외 아이콘
ps. 뒤에 <span></span> 안에 들어있는 부분 잘 살펴보고 거기에 이모지 넣어줘도 무방 (CSS 에서 수정해줘도 되는데 나는 이 방법으로 함)
<!--<i class="fas fa-tags fa-sm"></i>-->
(편집 후)
ps. 나는 액박제거 + 이모지추가, CSS에서 검색창 radius 도 3px > 10px로 조정함
3. 글 하단의 무수한 액박 수정하기 (글 더보기 / 댓글수 / 신고 / 답글 / 삭제 등)
(편집 전)
① 글 더보기
② 댓글 수
CSS에서 다음과 같이 바꿔서 앞의 이모지 바꿔주기
.fa-comment-alt:before {
content: "\👁️🗨️"
}
③ 신고 앞
④ 답글 / 삭제 등 - 그런데 이건 작동이 잘 안되어서 그냥 제거할 것.
CSS 에서 fa-pen , fa-edit 찾아서 아래와 같이 주석처리.
나는 다른 이모지들로 바꿨다가 작동 안되는거 알고 주석처리 해서 조금 코드가 다르다.
CSS에서 찾아서 앞에 // 슬래시 두개 쳐주면 됨.
//.fa-reply:before {
// content: "\2714"
}
//.fa-edit:before {
// content: "\🚫"
}
(편집 후)
이렇게 깔끔하게 HTML 와 CSS 를 활용하여 고래스킨을 조금 수정해 보았습니다.
부디 여러분들의 블로그 글 구성에 도움이 되기를 바라며 더 좋은 업데이트 있으면 계속 업로드 하겠습니다
감사합니다.
티스토리 스킨 추천, 고래스킨
안녕하세요 이전 티스토리에 Google Adsense 광고 넣는 방법을 작성한 뒤 제가 마지막에 스킨을 변경해야 할 필요성이 느껴진다 라고 했었지요. 그래서 바로 바꿨습니다. 바로 고래스킨이라고,,, 되
jigjangmon.tistory.com
