블꾸(16)
-
[Portfolio 스킨] 07. 공감 박스 위에 공감 유도 문구 넣기
다른 분들은 공감버튼을 크고 화려하게 꾸미던데 실력도 없고 그렇게 본격적으로 블로그를 운영할 것 같진 않아서ㅎ그래도 공감 버튼을 눈에 띄게 하는 방법 중에 멘트를 삽입하는 게 제일 편해보였다. 적용 모습 스킨 수정 과정1. 편집화면으로 들어간다.꾸미기 - 스킨 변경 - 변경 - 스킨 편집 - HTML 편집 2. 아래 두가지 방법 중 하나를 선택해서 위치에 알맞게 입력하면 된다.방법 1CSS 편집으로 들어간다. 적당한 위치에 아래 코드를 입력한다./* -- 공감 유도 문구 s *//* 말풍선 박스 */.postbtn_like::before { content: "이 글이 좋았다면 ♡를 눌러주세요^-^"; position: absolute; left: 0px; top: -2px; backgro..
2024.12.03 -
[Portfolio 스킨] 04. 공감 버튼 꾸미기 + 구독 버튼 만들기
보호되어 있는 글입니다.
2024.12.01 -
[Portfolio 스킨] 03. 네임카드 지우기 (+꾸미기)
티스토리는 포스팅 맨 밑에 네임카드가 나온다.꾸미는 방법도 있던데 나는 이게 쓸데없이 공간을 차지하는 것 같아서 지우고 싶다. 적용 모습 스킨 수정 과정1. 편집화면으로 들어간다.꾸미기 - 스킨 변경 - 변경 - 스킨 편집 - HTML 편집 - CSS 편집 2. 적당한 위치에 아래 코드를 입력한다./* 네임카드 숨기기 */div[data-tistory-react-app="Namecard"] {display: none;} 3. 코드 수정이 끝났다면 적용을 누른다. 참고네임카드를 꾸미고 싶다면 아래 코드를 입력하면 된다./* 배경, 테두리색 */.tt_box_namecard { background-color: #fcfcfc !important; /* 배경색 우선순위 */ color: #333; /* 글..
2024.11.30 -
[Portfolio 스킨] 02. 인라인 코드 블록 만들기
검색하다보니까 인라인 코드라는 걸 적용하면 이브길래 한번 해볼거다.챗GPT한테 인라인 코드가 뭐냐고 물어봤는데인라인 코드는 함수의 내용을 호출 지점에 직접 삽입하는 프로그래밍 기법입니다. 이 방식은 일반적인 함수 호출 과정을 거치지 않고, 함수의 코드를 호출된 자리에 바로 삽입합니다.이게 무슨말인지 모르겠다.....설명만 보면 적용 모습이랑 너무 다른데... 적용 모습 스킨 수정 과정1. 편집화면으로 들어간다.꾸미기 - 스킨 변경 - 변경 - 스킨 편집 - HTML 편집 - CSS 편집 2. 적당한 위치에 아래 코드를 입력한다./* 인라인 코드 */.inkey { background-color: #f7f7f7; border: 1px solid #ccc; border-radius: 3..
2024.11.30 -
[Portfolio 스킨] 01. 테마 컬러 바꾸기
스킨을 바꾸고 처음 할 일은 테마 컬러 바꾸기!포트폴리오 디폴트 컬러셋은 핑크다!핑크 덕후인 나에겐 너무 좋은 선택!하지만 내가 좋아하는 핑크가 아니다ㅜㅜ진한 핑크컬러라서 잘 보이긴 하지만 싹 수정해줘야 한다.바꿀 컬러는 #FF90BC다.적용된 모습을 미리 확인해보자. 적용 모습 스킨 수정 과정1. CSS 편집화면으로 들어간다.꾸미기 - 스킨 변경 - 변경 - 스킨 편집 - HTML 편집 - CSS 편집 2. CSS창에서 Ctrl+F를 눌러서 theme를 찾으면 수정할 부분이 나온다.이런식으로 핑크컬러가 #FF567A가 지정돼 있는데 이 부분을 전부 #FF90BC으로 바꾼다.Ctrl+F를 눌러서 FF567A를 검색하면 바꿔야 할 부분을 파악하기 쉽다. 3. 코드 수정이 끝났다면 적용을 누른다.
2024.11.30 -
[Letter 스킨] 05. 공감 버튼 꾸미기
블로그 구경을 하다가 공감 버튼도 꾸밀 수 있다는 걸 알았다!바로 이거!좋은데? 바로 적용해야지!일단 CSS 편집화면으로 들어간다.꾸미기 - 스킨 변경 - 변경 - 스킨 편집 - HTML 편집 CSS 편집 2. 공감 버튼 적용하기움직이는 ♡ 만들기CSS에서 적당한 위치에 아래 코드를 입력한다..ico_like { position: relative; animation: ico_like 1.5s infinite; margin: 0 auto ;}ico_like:before, .ico_like:after { position: absolute; content: ""; top: 0; -webkit-transform-origin: 0 100%; -o-transform-origin: 0 100%; tr..
2024.11.23