본문 바로가기

티스토리/· 스킨편집36

티스토리 스킨 편집 - 본문 '프로필 카드' 영역 삭제 방법 div[data-tistory-react-app="Namecard"] { display: none } 스킨편집 - CSS에 위 코드를 입력하고 저장합니다. 2023. 12. 21.
티스토리 - 마우스 우클릭, 드래그, 복사, 붙여넣기 막기 내 블로그의 글을 보호하는 방법입니다. 드래그로 글을 선택하지 못하게 하고 복사, 붙여 넣기도 못하게 합니다. ▲ 플러그인에 마우스 오른쪽 클릭 방지 기능이 있긴하나 부족합니다. ▲ 아래에 다음 코드를 넣어주세요. 2023. 7. 1.
블로그 글자 크기, 색 변경 ▲ 글자 크기 변경은 '본문2' 메뉴를 클릭하면 바꿀 수 있습니다. 그러나 글을 쓸 때마다 변경하려면 귀찮으니 CSS에서 수정하여 영구적으로 적용해 봐요. ▲ 브라우저에서 미리 보기를 할 수 있습니다. 단축키 F12를 누르면 오른쪽에 검사창이 켜집니다. 티스토리를 운영한다면 꼭 알아야 하는 기능입니다. 그리고 검사창의 왼쪽 위에 선택툴을 클릭하고 ▲ 블로그 콘텐츠의 글자를 클릭합니다. ▲ 그럼 검사창 아래에 글자에 해당하는 CSS 코드를 보여줍니다. 폰트 사이즈가 있습니다. 숫자를 클릭하고 ▲ 위, 아래 방향키로 조금씩 늘려도 보고 줄여도 보십시오. 마음에 드는 크기가 나왔다면 해당 CSS의 줄번호 1470을 찾아가야 합니다. ▲ 티스토리 스킨편집 - CSS 편집 1470번 줄로 갑니다. 검사창과 똑같은.. 2023. 6. 28.
티스토리 - 표 테두리 색 바꾸는 방법 ▲ 스킨에 따라 다른지는 모르겠으나 북클럽 스킨은 표 테두리 색은 회색입니다. ▲ 이렇게 바꾸는 방법입니다. ▲ 스킨편집 - CSS 마지막 줄에 위 코드를 추가합니다. .entry-content table tbody td { border: 1px solid #585858; } ▲ 1px와 solid 2023. 5. 3.
티스토리 - 글 발행 날짜 연도만 표시하기 ▲ 스킨에 따라 다르지만 글 쓴 날짜는 보통 '년. 월. 일'입니다. 연도만 표시하도록 수정하는 방법입니다. ▲ 먼저 티스토리 스킨편집 - html에서 저부분이 어디 있는지 찾아야 합니다. 브라우저 F12를 켜고 선택툴을 클릭하고 글 쓴 날짜를 클릭합니다. 그럼 해당 html을 보여주죠. 주변 class 이름을 잘 보고 찾아야 합니다. ▲ 스킨편집 - html로 와서 편집창을 클릭하고 찾기(Ctrl+F) '수정'을 합니다. 수정 근처에 있으니까요. class 이름을 잘 확인하고 날짜 부분을 찾습니다. 날짜 치환자는 '##_article_rep_simple_date_##'입니다. ▲ 블로그 관리 페이지 아래에 보면 스킨 가이드가 있어요. ▲ 글 정보 치환자에 보면 연도만 표시하는 치환자가 있습니다. 복사~.. 2023. 1. 4.
티스토리 스킨 편집 - 댓글 수정/삭제 버튼 보이게 하기 ▲ 오늘 아침부터 댓글 점 3개 메뉴가 열리지 않는다. 다른 블로그를 확인해보니 이 블로그만 안 된다. html/css를 봐도 문제는 없다. 서버 오류가 확실하다. 그냥 저 점 3개 버튼을 없애 버리고 바로 수정/삭제 버튼이 나오게 만들자. ▲ 브라우저 검사(F12)를 켜고 선택툴로 점 3개를 찍으면 html/css를 보여준다. display: none으로 변경하여 안 보이게 하자. 티스토리 스킨편집 > CSS 1686번 줄로 가서 수정하면 된다. ▲ 이번에는 댓글주소, 수정/ 삭제 찾아서 none을 block로 변경하여 처음부터 보이게 한다. 1694번 줄에 가서 수정하자. ▲ '댓글주소'는 딱히 필요 없는 기능이니 html 편집에서 저 부분을 찾아 주석 처리하였다. ▲ 이제 이렇게 나온다. 차라리 이.. 2022. 12. 26.
티스토리 공감버튼 위치(중앙) 바꾸는 방법 광고 사이에 공감버튼이 있어 잘 보이지 않는가 보다. 딱히 공감에 신경을 안 쓰긴 하는데... 일단 위치를 바꿔보기로 한다. 스킨 편집은 항상 미리 해보고 적용하는 게 좋다. 대부분의 브라우저에서 미리 해볼 수 있다. F12를 누르자. ▲ 선택툴을 누르고 공감 버튼 근처로 가져가 클릭하면 아래에 클릭한 부분의 html, css를 알려준다. 여기서 수정하여 미래 해볼 수 있는 것이다. ▲ 먼저 저작권 표시를 없애야 한다. 이 마크는 블로그 설정에서도 할 수 있는데 표시하지 않는다 설정하여도 적용이 안되니... ▲ css에서 display: none; 처리한다. ▲ 공감 버튼을 중앙으로 옮기기 위해 부모 요소에 text-align: center;를 적용한다. ▲ 공감 버튼이 있는 div의 css에서 floa.. 2022. 12. 9.
티스토리 오디세이 스킨 - 슬로건, 배너 위치 바꾸는 방법 ▲ 오디세이 스킨의 슬로건과 배너를 사용하면 슬로건이 먼저, 배너가 뒤에 나옵니다. 위치를 바꾸는 기능이 있으면 좋겠지만 지원하지 않습니다. ▲ 슬로건과 배너 이미지, 문구 설정은 스킨 편집에서 할 수 있어요. ▲ html 편집에서 부분을 찾습니다. 딱히 html을 수정하지 않았다면 줄번호 80번대에 있습니다. ~ 부분을 잘라내기(Ctrl+X)하여 ▲ 바로 위에 있는 에 붙여 넣기 하면 됩니다. 쉽죠. ▲ 이제 배너가 먼저 나옵니다. 2022. 12. 6.
티스토리 검색 기본 글자 "Search...", "검색내용을 입력하세요" 색 변경 ▲ 예로 오디세이 스킨입니다. 검색창의 기본 글자인 Search... 글자색을 바꾸는 방법입니다. ▲ 브라우저 검사(단축키 : F12)를 켜고 선택기를 눌러요. 그리고 검색창을 클릭합니다. ▲ 검색창의 HTML 부분을 표시해줍니다. 잘 보면 placeholder="Search..." 있어요. ▲ 스킨 편집 CSS에서 찾기(Ctrl + f)를 하고 placeholder 찾아주세요. 참고로 CSS 편집 창을 클릭하고 찾기를 해야 합니다. 그냥 찾기를 하면 브라우저 찾기가 켜집니다. placeholder 부분이 나옵니다. color 값이 있지요. ▲ 원하는 색으로 바꾸고 저장합니다. ▲ 바뀜. 글자를 바꾸고 싶다면 스킨 편집 HTML에서 Search... 대신 원하는 문구를 넣으면 됩니다. ♥ 2022. 8. 10.
CSS를 이용한 이미지 그림자 넣기 이미지 편집 프로그램을 이용하지 않고 CSS로 이미지에 그림자를 넣는 방법. 내는 블로그에 올리는 이미지는 포토스케이프를 이용해 그림자를 넣는다. 옛날에 누가 그림자 어케 넣는 건지 물어보기도 했다. 가만히 생각해보니 이미지 편집 프로그램 없이도 그림자를 넣을 수 있는 거 아닌가?! 그러나 또 생각해보면 이 방법을 쓰면 지금까지 넣었던 이미지에 그림자가 있는데 또 그림자가 생기는거다. 까비~ 그냥 이런 방법이 있다고만 알고 다른 블로그에 써 먹자. ▲ 이렇게 만들 것이다. ▲ 먼저 이미지가 어떤 부분인지 알아야 한다. F12로 검사 창을 열고 요소 선택 도구로 이미지를 클릭한다. 그럼 CSS(style)가 나온다. 그림자 넣는 태그는 box-shadow다. box-shadow : xpx ypx 흐림px .. 2022. 6. 24.
진짜 '편집기'가 된 HTML, CSS 편집 - 티스토리 ▲ HTML 편집기 요소들의 색과 범위를 표시해주는 선이 생겼다. 워~ 아주 좋구만! ▲ 그리고 진짜 편집기가 되었다!!! 두둥~ 이제 따로 코드 편집기를 쓰지 않아도 편하게 작업할 수 있다. 대박! ▲ CSS도 역시 색과 범위선이 생겼고 편집기 다운 모습을 보여준다. 옳다! 이렇게 좋은 기능을 공지도 없이 업데이트 했다. 쿨한데?! 2022. 6. 14.

티스토리툴바