본문 바로가기

티스토리/· 스킨편집36

오디세이 스킨 - 본문 제목에 '수정, 삭제' 버튼 넣기 얼마전에 새로운 스킨 오디세이가 나왔죠. 조금 불편한 점이 있어 계속 수정중입니다. 북클립 처럼 본문 제목줄에 '수정, 삭제' 버튼이 있으면 좋겠더라고요. 요걸~ 이렇게 수정해봐요. 수정 치환자 ##_s_ad_m_link_## 삭제 치환자 ##_s_ad_d_onclick_## 입니다. 이것만 알고 있으면 되어요. 다음 위치에 넣었습니다. 본인이 원하는 곳에 넣으세요. 글쓴이 뒤에 넣어도 되고 날짜 뒤에 넣어도 되고 맘대로~ html 수정전이라고 치면 210번 줄 근처에 있을거에요. 저는 구분선 |과 ·· 넣었습니다. 그리고 글자색을 흰색으로 바꾸고 버튼은 링크라 밑줄이 생기는데 text-decoration: none으로 줄을 없애줬습니다. 끝! 당근 로그아웃 상태에서는 안 보입니다. 2020. 9. 24.
티스토리 새로운 스킨 - 오디세이 ✿ 새로운 스킨 오디세이가 추가 되었다. 미리보기로 잠깐 봤는데 깔끔하다. 주말이나 시간 날 때 오디세이로 변경해야겠다. 맘에 든다. (ʘ‿ʘ✿) 드디어 스킨을 변경 해보겠군!!! 오예~ 더 많은 내용이 궁금하다면~ notice.tistory.com/2549 신규 스킨 업데이트 안내 안녕하세요, 티스토리팀입니다. 새로운 스킨 '오디세이'(Odyssey)를 소개해드립니다. 이번 스킨에서는 카테고리마다 목록 스타일을 지정하거나, 이미지와 소개 문구를 설정할 수 있는 기능을 �� notice.tistory.com www.tistory.com/skin/Odyssey TISTORY 나를 표현하는 블로그를 만들어보세요. www.tistory.com 2020. 9. 9.
위로가기 버튼 만들기 - 티스토리 페이지 위로가기 버튼을 만들어 보자. - body 사이에 버튼을 넣어준다.버튼을 만드는 방법은 아주 다양합니다. 예문처럼 만들수도 있고 div, span, img로도 할 수 있어요.저는 그냥 배운대로 button 태그로 만들었습니다. id도 본인이 기억하기 쉽게 알아서."▲" 버튼모양을 이렇게 화살표를 넣어도 되고 글자를 넣어도 됩니다. 로 이미지를 넣어도 됩니다. - head 사이에 스크립트를 넣는다.스트립트 태그중 숫자 200은 언제 버튼이 나타날지 지정해주는거에요. 스크롤이 200이 되면 버튼이 나타납니다.자신의 블로그 스타일에 맞게 숫자를 입력하세요. css 편집도 해줍니다. 버튼의 크기. 위치, 색을 만들어줍니다. 다른 블로그에 적용한 모습니다. 투명도를 줘서 평소에는 버튼 뒤 본문이 살짝 보이.. 2020. 9. 2.
티스토리 페이징 편집 ▲ 이전에 한번 수정을 했었습니다. 폰트 사이즈를 좀 키우고 토마토 색을 적용하고 있었는데 최근에 어두운 색으로 몇가지 요소를 변경후에 페이징도 변경해봤습니다. ▲ 이렇게요. 크롬에서 div 구조 파악후에 css를 찾아 수정하면 됩니다. 구조 파악하는 방법은 다음 글을 참고하세요. 티스토리 스킨 만들기 - div 구조 이해 ▲ 선택된 페이징 숫자의 class 이름은 상위 pagination의 selectde입니다. 스킨마다 다르겠죠. color: #fff; // 폰트 색 : 흰색 font-size: 14px; // 폰트 크기 : 14 font-weight: 900; // 폰트 두께 : 900 background-color: #555555; // 배경색 : #555555 padding: 7px 10px 8.. 2020. 1. 2.
내 블로그에 맞는 이미지 사이즈 찾기(로딩속도향상) 내 블로그에 들어가는 이미지의 사이즈는? 정확히 말해 가로사이즈. 이미지를 넣다 보면 사이즈가 작은 건 상관없지만 큰 사이즈의 이미지는 깨져 보일 수도 있다. 그러니 미리 작업 해서 올리는게 좋다. 쓸 때 없이 이미지가 크면 본문을 로딩하는데 시간도 오래 걸린다. 1. 조금 큰 이미지 올리기 비공개로 조금 큰 사이즈의 이미지를 올려본다. ▲ 예시로 사용한 이미지는 너무 과하다. ㅋㅋ 적당히 큰 이미지를 올리자. 2. 소스 확인하기 ▲ 비공개 글에서 브라우저의 F12키를 눌러 소스를 확인합니다. 저기 버튼을 눌러줍니다. ▲ 이미지에 마우스를 가져가면 실제 크기가 아닌 본문에서 보여주는 크기의 사이즈를 표시하고 있습니다. 이걸 참고로 이미지의 가로 사이즈를 정하면 됩니다. 저는 항상 가로 최대 807로 약간.. 2019. 11. 29.
홈화면 글 목록에 댓글 개수 표시하기 피드에 빨간 점이 생기면 뭐지 뭐지 하면서 들어가 본다. 대부분 관심 가는 주제로 글을 쓰시는 분들을 구독해서 재미있게 읽는다. 그분들은 보통 댓글이 많으시다. 부럽다. 난 소심해서 소통을 잘 못한다. 그러면서 느끼는 점. 이분들 홈 화면에서 글 목록 옆에 댓글 개수가 표시되면 어떨까? 댓글 개수를 표시해주는 스킨도 많지만 그렇지 않은 스킨이 더 많은 것 같다. 그래서 오늘은 홈 화면 글 목록에 댓글 개수 표시하기를 만들어보자. 조금 어려울수도 있지만 천천히 따라 해 본다면 딱히 어렵지도 않다.^^ 일단은 제가 쓰는 스킨으로 설명합니다. 이 부분은 모든 스킨에 해당되니 스킨에 크게 신경 쓰지 마셔요. 참고로 이미지는 스킨 편집에 이용하는 테스트 블로그예요. 저는 테스트 블로그에 실험해보고 본 블로그에 적.. 2019. 11. 15.
방문 인사 달아보자 방문해 주셔서 감사드립니다 (°▽°)/ 블로그에 작은 변화를 줬습니다. 카테고리 위에 방문 감사 인사를 하나 달았어요.^^ 예쁘다~ 그리고 카테고리 간격도 좀 줄여서 촘촘하게 만들고 글 수도 좀 작게 해보고요. ▲ 사이드바 메뉴에 HTML 배너출력을 추가합니다. ▲ 이름이랑 태그를 넣어주세요. 저는~ 방문해 주셔서 감사드립니다 (°▽°)/ :: 태그 해석 :: text-align: center; // 글자 정렬: 가운데; background-color: tomato; // 배경색: 토마토; border-radius: 10px; // 테두리 둥글게: 10px; 만큼 둥글 color: #fff; // 글 색: 흰색; font-size: 14px; // 글 크기: 14px; margin-bottom: 3px;.. 2019. 11. 11.
방문자수 꾸미기^^* 아주 간단한 html/css 태그를 이용해 나만의 방문자수 카운터를 만들어보자. 갑자기 그냥 하고 싶어 해 봤는데 재밌다. 보통은 이런 모양이다. 이걸~ 이렇게 바꿨다. 풉~ 어서오이소 = Today 왔다가심 = Yesterday # 2019.05.06 부터 = 전체 방문자. 거기에 방문 감사 인사.^^ 저는 스킨 편집이나 변경시에 테스트 블로그에 해보고 본 블로그에 최종 적용해요. 본 블로그로 실험하다 망한 경우가 몇번 있어서... ㅠㅠ 오늘을 열심히 살아야 하고 오늘이 중요하기에 Today를 맨 위로 올리고 내 블로그가 언제 시작한지도 볼 겸 전체 방문자 이름을 "# 2019.05.06"으로 바꿨다. 뭔가 좀 정리가 더 필요해 보이지만 나름 괜찮아 보이는 데? =.=)? 전체 방문자 Today : Y.. 2019. 11. 9.
스킨 편집시 태그를 백업하자 스킨 편집 시 꼭 태그를 따로 저장해야 합니다. 먼저 편집 전에 모든 태그를 복사해서 메모장이든 편집기든 어디든 저장을 해둬야 합니다. 왜냐고요? 편집했는데 실수를 했다. 그러면 블로그 화면이 어찌 될까요? 네. 엉망이죠. 컨트롤 + z로 복구하며 되지만 헛수고 아니겠습니까? 그러네요. 컨트롤 + z로 취소하면 되네요. =-=? 그럼 이 글을 쓸 필요가 없네요. 아... 그러나 저는 아주 귀찮게 작업을 합니다. 편집을 해야겠다고 마음먹으면 편집 화면과 함께 무조건 태그 편집기를 따로 켭니다. 편집기는 서브라임 텍스트를 씁니다. 참고해보세요. 2019/09/19 - [맛좋은 Soft] - 티스토리 스킨 수정 html/css 편집기 입력기 Sublime Text!!! 티스토리 스킨 수정 html/css 편집.. 2019. 10. 24.
블로그 새 글 알림 NEW 아이콘 바꾸기 블로그 새 글 알림 new 아이콘 바꾸는 방법을 알아보겠습니다.이 아이콘은 카카오에서 자동으로 적용하는 거라서 이미지를 마음대로 바꿀 수 없습니다.html 태그와 이미지 업로드로 변경 할 수 있습니다. 생각보다 굉장히 쉬우니 따라 해 보세요. ▲ 원래 색상은 회색입니다. 예쁘지 않아. 싫어. ▲ 이렇게 빨간색으로 바꿀 겁니다. ▲ 먼저 이미지를 만들어줍니다. 각자 마음에 드는 이미지로 만들어 주세요.이미지 위에 공간을 두는 이유는 그냥 적용하니 아이콘이 위로 올라가더라고요.margin 태그로 가능할지는 모르겠지만 그냥 이미지 자체에 공간을 두는 게 쉬울 것 같아요. ▲ 만든 이미지를 업로드합니다. 스킨 편집에서 올리면 됩니다. 이미지 이름이 마음대로 하시면 됩니다. ▲ 그리고 이 태그를 html 태그 ~.. 2019. 10. 10.
티스토리 Square 스킨 영어 부분 한글로 바꾸기 티스토리 Square 스킨에 영어로 된 부분이 있죠.영어에 약한 저는 이걸 한글로 바꿔야겠습니다. -_-;티스토리 스킨은 html/css 편집이 자유롭습니다. 정말 좋은 기능이죠. ▲ Square 스킨의 영어 부분입니다. 이걸 이렇게 한글로 모두 바꿨습니다. 수정 방법을 알려드릴게요. ▲ 스킨 편집 > html에 들어갑니다. ctrl + F를 해서 검색에 위에 수정하려는 글자를 입력하고 찾아줍니다. 그리고 저 부분을 원하는 글자로 바꿔주면 됩니다. ▲ "press enter to search...." > "글 검색" 으로 변경해주세요. 이렇게 하면 글 검색이 왼쪽 정렬이 되는데 앞에 스페이스파로 공간을 주고 중앙에 위치시키면 됩니다. 티스토리 편집 그렇게 어렵지 않아요.^^* 2019. 9. 30.