블로그 꾸미기9 [티스토리 스킨 편집] 글 제목(타이틀) 가독성 높이기 내가 지금의 스킨에서 이것저것 고친다는 것은 보통 '더 예쁜 블로그'를 만들고자 할 때와 '더 보기 편한' 블로그를 만들고자 할 때인데 오늘은 바로 더 보기 편한 블로그를 만들고 싶을 때 이야기이다. 지금 사용하는 북클럽 스킨에서 게시글이 보이는 페이지인데 좀 극단적인 예시를 가져오긴 했지만 제목 부분, 타이틀 영역의 글씨가 생각보다 눈에 확 띄지 않는 편이다. 그나마 폰트 크기가 큰 글 제목은 그렇다 쳐도 그 위의 카테고리 정보나, 그 아래의 작성자와 날짜 등의 정보는 크기도 작을뿐더러 투명도까지 적용되어 있어 한눈에 확 들어오지 않는다. 이런 건 답답해서 싫어하는 성미이기에 바로 수정에 들어갔다. 개발자 도구(F12)를 열어 왼쪽 상단의 아이콘을 클릭해준 뒤 타이틀 영역을 클릭해보면 ...라 쓰인 곳.. 2020. 12. 20. [티스토리 블로그] 파비콘 적용하기 예전에 주로 이용하던 블로그와는 달리 티스토리 블로그는 소소하게 이것저것 꾸밀 수 있는 재미가 있다. (그래서 가끔은 포스팅보다 그냥 스킨을 이것저것 건드려보는 게 더 재밌을 때가 있지만.) 오늘도 뭘 또 건드려볼까 하던 차에 이번엔 스킨 편집 대신 관리 페이지에서 변화를 줄 수 있는 것을 찾았다. 딱히 그림이나 사진 툴을 다루지 못해도 비교적 손쉽게 할 수 있는 파비콘(favicon) 설정! 파비콘이란 이렇게 탭 이름(웹페이지의 타이틀)의 왼쪽에 표시되는 작은 아이콘인데 이름이야 예전부터 알고 있었다만 favorites + icon의 합성어인 줄은 처음 알았다. 어쨌든 티스토리에서는 이 파비콘을 변경할 수 있는 기능을 지원하기 때문에 오늘은 한번 파비콘을 설정해보기로 했다. 그림판이든 파비콘 제작을 지.. 2020. 11. 22. [티스토리 스킨 편집] 스크롤 진행률 표시줄(scroll indicator) 만들기 영어로는 scroll indicator. 다시 말해 스크롤 진행률 바(bar)? 스크롤 진행률 표시줄? 모자란 국어 실력에 깔끔하게 설명하기가 힘들다.🤔 말하자면 내가 지금 문서의 어디쯤 읽고 있는지 표시하는 상태 바(bar)인데 보이는 부분으로만 따져보면 인터넷 창 우측의 스크롤바와 같달까. (다만 기능적인 측면은 다르다. 클릭 & 드래그로 페이지 이동은 불가.) 근데 이걸 하나 더 만들어 페이지 상단에 콕! 박아볼까 한다. 실은 오래간만에 블로그 뭐 또 뜯어고쳐볼 거 없을까 하고 기웃거리다 scroll indicator가 생각났는데 스크롤바가 너무나 잘 보이는 데스크톱에서는 개인적으로 필요성을 못 느끼는 기능이다. 한다면 그냥 멋이랄까. "나 이런 거 할 줄 알아요!"라는.😆 그런데 생각해보니 모바일.. 2020. 10. 30. 블로그 다크 모드를 만들다. 티스토리 스킨 편집에 한창 재미들린 요즘. 다양한 걸 시도해보고 싶어서 자꾸만 오늘은 어떤걸 바꿔볼까 궁리하는데 그러다 문득 이런 생각이 들었다. "지금 스킨에서 다크 모드를 한 번 만들어볼까?" 다른 스킨으로 바꾸는 것도 좋지만 이번에 바꾼지 얼마 안 됐기 때문에 눈의 피로를 덜어주려는 생각보다는 그냥 새로운 분위기의 스킨을 만들고픈, 두개의 스킨을 같이 쓰고픈 마음이 더 컸다.🤣 그런데 하필 이런 생각이 왜 자려고 눕기 전에 들었는지... 얼른 만들어보고 싶어 괜히 핸드폰으로 구글링하면서 두근두근 잠 못 이루다가 다음날 아침에 바로 작업에 착수했다. 한 페이지를 다크 모드로 바꾸는 건 자바스크립트, 제이쿼리 쪼렙인 나도 할 수 있지만 페이지가 바뀌어도 한 번 바꾼 모드를 유지해야 하는 부분은 전혀 감.. 2020. 10. 16. [티스토리 스킨 편집] 상단 메뉴 없애기(초⭐️간단!!) 티스토리 블로그에 관심을 가진지도 어언 한 달. 처음엔 Odyssey 스킨을 사용하다가 애드센스에는 Book Club 스킨이 좋다는 얘기를 듣고서는 북클럽 스킨을 조금씩 손보며 계속 사용하고 있다. 아마 많은 블로거들이 나와 같은 이유로 북클럽 스킨을 사용하고 있는 듯하다 :) 북클럽 스킨을 적용하고 스킨 편집 > 홈 설정에서 홈 화면 글 수를 9개로 늘리면 이렇게 콘텐츠의 길이와 사이드바의 길이가 얼추 보기 좋게 맞춰진다. 여기서 난 잘 사용하지 않는 상단의 메뉴도 없애볼까 한다. 관리 화면에서 홈, 태그, 방명록 대신 자주 쓰는 다른 메뉴를 넣을 수 있긴 하지만 북클럽 스킨 특성상 사이드바에 이미 카테고리가 있기도 하고... 또 메뉴가 많아서 주요 메뉴를 상단에 집어넣으면 이 상단바가 유용하겠지만 난.. 2020. 10. 15. [티스토리 스킨 편집] 블로그 폰트 바꾸기(+무료 한글폰트 사이트) 블로그를 꾸밀 때 수고 대비 가장 큰 효과를 볼 수 있는 걸 찾아본다면 바로 블로그의 폰트를 바꾸는 게 아닐까 싶다. 지금 쓰는 스킨도 새로 만든 것이 아니라 기존의 티스토리 스킨인 Book Club스킨에서 하나 둘 고친 것이다 보니 기본 스킨에서 솔직히 큰 차이는 없달까? (아무리 이것저것 뜯어고쳐봤자 전체적인 구조가 변하질 않았으니ㅠ) 그래서 스킨을 입히자마자 처음 시도한 건 바로 폰트 바꾸기~ 일단 무료 한글 폰트 사이트에 접속한다. 상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누 상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누 noonnu.cc 이미 알 사람은 다 아는 무료 한글 폰트 사이트 '눈누'. 무료 한글 폰트가 귀하디 귀한 요즘 같은 때에 상업적 이용도 가능한 데.. 2020. 10. 14. [티스토리 스킨 편집] top 버튼 꾸미기(CSS3 animation) 지금 사용 중인 스킨은 티스토리에서 만든 스킨 중 Book Club. 이 스킨의 하단(footer) 오른쪽을 보면 페이지가 아무리 길더라도 클릭 한 번에 페이지 맨 위로 갈 수 있는 버튼이 하나 있다. 여기에 마우스를 올려보면 이렇게 버튼 색깔이 바뀌는 것은 좋긴 하나, 크기도 작고, 페이지를 최하단까지 내려야 이 버튼을 볼 수 있기 때문에 나는 이걸 좀 더 내 취향에 맞게, 쓰기 편하게 바꿔보려 한다. (Home 키가 없는 키보드 특성상 commnad + 위 화살표를 눌러야 하는데 귀찮다. 그냥 클릭 한 번으로 끝내고 싶다.) 우선 이번에 수정할 내용 첫 번째로는 간단하게 페이지 어느 부분에서도 간편하게 맨 위로 갈 수 있도록 스크롤을 하거나 창 크기를 조정해도 항상 그 위치에 고정하는 것. 그리고 마.. 2020. 10. 12. [티스토리 스킨 편집] 스크롤시 배경 고정하기 웹페이지 만들때 은근슬쩍 한두번 쓰곤 했던 css 기술 중, 바로 생각나는 것 하나를 꼽아보라면 바로 스크롤시 배경 고정하기! 아직도 이해 못하고 있는 패럴랙스는 솔직히 어지러운 느낌이라 별로 좋아하지 않는데 이건 그냥 css에 한 줄만 써 넣으면 되는데다 보기에 어지럽지 않고, 기본적인 기술에 비해 좀 있어보이는 스킬이라 부분부분 쓰곤 했다. 보통 배경사진을 집어 넣으면 이런식으로 스크롤을 내릴 때 사진도 당연히 같이 움직이는데, 스크롤 해도 저 빨간 테두리의 배경만 딱풀로 붙인것처럼 딱! 고정시키고 싶을 땐 background-attachment: fixed; 이 한 줄이면 끝난다. 우선 편집할 페이지를 켜놓은 상태에서 f12를 눌러 관리자모드를 실행시켜주고 (이제껏 크롬만 99%사용하다가 티스토리 .. 2020. 9. 19. 티스토리 블로그 꾸미기 시작! 요즘 초등학생들은 코딩 교육이 필수라는데 나는 아주아주 예전에 초등학교를 졸업한지라 내게 HTML의 마지막 기억은 ＜marquee＞태그랄까ㅋ (왜 차고 많은 것들 중 하필 이걸까ㅋ) 그래서 그동안 네이버 블로그보다 더 취향에 맞게 꾸밀 수 있는 티스토리를 하고 싶어도 스킨을 건들 줄 몰라 그동안 만들어놓기만 하고 방치 아닌 방치ㅠㅠ ... 하다가! 얼마 전 좋은 기회가 되어 HTML5와 CSS3, 그리고 아주아주아주 약간의 JavaScript를 배울 기회가 생겼다 :) 그래서 조금씩 차근차근 나만의 블로그를 새로 꾸며보면서 그새 다 까먹은 웹디자인 복습을 해보려 한다. 티스토리에는 웹디자인 배웠답시고 처음부터 스킨 만든다며 괜히 나댈 필요 없이 블로그 관리 > 스킨 변경에 들어가 보면 적용 버튼 하나로 .. 2020. 9. 18. 이전 1 다음
