본문 바로가기

티스토리/· 스킨편집33

티스토리 검색 기본 글자 "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.
티스토리 북클럽 스킨 최근글, 인기글 편집 북클럽 스킨의 사이드바 메뉴인 최근글, 인기글을 편집해 보겠습니다. 이 글은 누군가의 도움 요청으로 알려드렸는데 글로 남겨도 괜찮을 것 같아서 써봐요.^^ ▲ 최근글이 먼저 나오고 인기글을 클릭해서 보는 구조입니다. 인기글이 먼저 나오게 해 봅시다. ▲ 이 부분이 어디에 있는지 div 구조를 파악해야 합니다. 크롬 브라우저에서 F12를 눌러서 소스를 보죠. 살펴보니 div 'post-list tab-ui'에서 컨트롤해야 합니다. ▲ 스킨 편집 html 편집 화면으로 들어가서 찾기(Ctrl+f)로 post-list tab-ui를 찾아줍니다. 참고로 저는 html이나 css 편집 시 다른 편집기에서 수정 후에 복/붙합니다. 편집기는 sublimetext입니다. 무료니 이용해 보세요. ▲ ~ : 최근글 ~ :.. 2022. 1. 24.
티스토리 스킨 편집 기초 스킨 편집의 기초입니다. 조금만 공부하면 누구나 할 수 있어요. ▲ 크롬 브라우저를 기준으로 설명합니다. 엣지, 웨일 브라우저도 가능해요. 먼저 F12(검사)를 눌러 오른쪽에 검사창을 켜줍니다. 그럼 영어가 막 나와요. ▲ 검사창 구조를 간단히 살펴보면 1. 요소 선택 툴 2. 휴대폰 화면으로 보기 3. 현재 페이지의 HTML 4. 현재 페이지 또는 1. 요소 선택 툴로 선택한 요소의 CSS(style) 요 4가지 정도만 알면 충분합니다. 더 많이 알고 싶다면 막 클릭해보고 우클릭 메뉴도 보세요. "HTML은 사이트의 구조고 구조를 꾸미는 것은 CSS입니다." 예를 들어서 해볼게요. 먼저 1. 요소 선택 툴을 클릭하고 편집하고 싶은 부분을 클릭합니다. ▲ 홈 화면의 글 목록에서 제목 부분을 수정해봅시다... 2021. 10. 27.
글 목록 - 마우스 반응 꾸미기 .list-type-thumbnail .post-item:hover { /* 마우스가 올라가면 */ transform: scale(1.02); /* 크기를 1.02배 키운다 */ box-shadow: 6px 6px 12px #e9e9e9; /* 박스에 그림자를 넣는다 */ } 글 쓰는 것보다 스킨 꾸미기가 더 재미나다. 어쩔... 글도 써야 하니 꾸미기를 글로 남긴다. ㅎ 핑계 만랩. 2021. 10. 25.
코드블럭 꾸미기(테마, 넘버링) - 티스토리 ▲ 플러그인에서 적용 중인 코드블럭 모양은 이렇다. ▲ 꾸며봤다. 앞에 넘버링도 달고 좀 더 알아보기 쉽게 해 봤다. 지금 보니 짜다시리 달라진 게 없어 보인다. ㅎ ▲ 외부 테마를 적용하려면 플러그인에서 코드 문법 강조 기능을 사용하면 안된다. 끄자. ▲ 테마는 여기서 가져오고 https://highlightjs.org/ 넘버링은 https://github.com/wcoder/highlightjs-line-numbers.js 에서 가져온다. ▲ 2번 줄에 monokai-sublime.min.css가 테마다. 위 영어 사이트 왼쪽 메뉴의 테마 이름은 무조건 소문자, 공백은 -로 써야 한다. 예를 들어 Nnfx Light 테마는 nnfx-light.min.css라 적는 거다. 티스토리 스킨에 따라 적용 안.. 2021. 10. 18.
검색창 꾸미기 - 티스토리 원래 검색창은 이렇게 생겼다. 검색을 클릭해야 입력창이 열린다. 그리고 마우스가 입력창을 벗어나며 닫혀버린다. 아주 불편하다 할 수 있겠다. 그래서 이렇게 만들어 봤다. 부족한 실력이지만 만족스럽다. ㅎ CSS가 맞는지는 모르겠으나 뭐 대충 ㅎㅎ. 필요 없는 태그도 분명 있을 것 같다. 글 쓰는데 신경을 많이 써야 하는데 스킨 꾸미기가 더 재미있다. 올바르지 않다. 어쩔... 2021. 10. 16.
스크롤바 모양과 색 꾸미기 /* 스트롤바 스타일 */ ::-webkit-scrollbar{ width: 12px; } /* 바 넓이 */ ::-webkit-scrollbar-track { background-color: #dcdcdc; border: 3px solid transparent; background-clip: padding-box; } /* 트랙(배경) 색 */ ::-webkit-scrollbar-thumb { background-color: #bbbbbb; border-radius: 5px; } /* 바색, 바 둥근*/ ::-webkit-scrollbar-thumb:hover { background: #333; } /* 마우스 hover 색*/ ::-webkit-scrollbar-button:start:decremen.. 2021. 9. 27.
스킨 보관함을 사용하자 어제 다른 블로그 스킨 편집 놀이를 하다 큰 실수를 했다. 어찌어찌해 닐기의 HTML 전체를 다른 블로그 HTML에 붙여 넣기 하고 저장해버렸다. 그것도 모르고 오늘 그 블로그를 보니 난리 난리 이런 난리가 없다. ㅎㅎㅎ 그 블로그는 하나의 주제만 쓰는 곳이라 나름 좀 신경 써서 이쁘게 만들었는데 다 없어졌다. 방심했다. 나를 너무 믿었다. 그래서 모든 블로그의 스킨을 보관함에 저장했다. 큰 편집에만 사용했는데 이제 작은 변화라도 있으면 무조건 저장해야겠다. 사소한 건 저장 안 했는데 말이다. 또 나이를 느끼는 시간이었다. 실수로 인해 잠시 스킨을 처음부터 만져봐서 재미있었다 라고 결론을 지었지만 중간에 분명 난 욕을 했다. 풉~ 웃자.^^ 썅~ 2021. 9. 3.