티스토리 블로그 꾸미기: 오디세이 스킨에서 SNS 버튼 링크 연결 되지 않는 오류 수정하기 이전 포스팅에 이어서 오디세이 스킨으로 변경하니까 SNS 링크를 입력하면 자동으로 SNS 버튼이 생기는 기능이 있어서, 잘 관리하고 있지는 않지만^^; liis 인스타그램 추가하였다. 당연히 링크가 잘 연결되어있겠거니 하면서 신경쓰지 않고 있었는데, 우연히 눌러보니까 사이트에 연결할 수 없다는 메시지가 뜨는 것이다. 그래서 URL 주소를 잘못 입력했나 싶어서 다시 고치고, https도 혹시나 해서 http로 바꿔보기도 하고...했는데도 오류가 떠서 html를 살펴보니... URL 주소 앞에 '//' 이렇게 슬래시 두 개가 붙어 있는 것이었다. 그렇니까 오류가 난 이유는 굳이 'https://'라고 적을 필요없이 w..

티스토리 블로그 꾸미기: 오디세이 스킨의 로고 이미지 크기 원하는 대로 바꾸기 오랜만에 티스토리 블로그 스킨을 바꾸었다. 가장 최근 스킨인 'Odyssey(오디세이)'을 보니까 html을 변경하지 않고도 커스텀하기 좋게 잘 나온 것 같아서 나도 이것 저것 바꾸어 보는 중이다^^ 블로그의 타이틀도 이미지로 바로 넣을 수 있게 되어있는데, 텍스트 크기 18px에 맞춰서 고정이 되어있다보니까 로고 이미지의 높이가 '18px'보다 큰 경우 아래처럼 로고가 너무 작게 들어가서 보기가 좋지 않다. ↓ 이 부분은 티스토리 블로그 html 편집하는 곳에서 간단하게 수정이 가능해서 바꾸어보겠다. 변경할 부분 로고 크기 바꾸기 모바일 화면에서 로고 관련 부분 수정하기 CSS:로고 크기 변경 일단 '스킨편집'에서 로고 이미..

티스토리 블로그 꾸미기: 답글 프로필 이미지 블로그의 Portfolio 스킨을 사용 중인데, 댓글을 달면 내 프로필이 보이지만, 댓글에 답글을 달면 랜덤 프로필 이미지가 나오는 것이다. (내 답글 프로필은 튜브...멋쩍ㅋ) 보통 내가 내 글에 '댓글'보다 '답글'을 달게 될텐데, 계속 요렇게 내 프로필 대신 랜덤 이미지가 보이는 것이 아쉬워서 수정을 해보았다. (다행히도) 코드 한줄로 간단하게 수정 가능!^^ html: 수정 수정 전 코드 ㄴ /*이미지 경로를 수정!*/ '티스토리 블로그 > 스킨 편집 > html 편집'에서 Portfolio 스킨 기준으로 's_rp2_rep' 태그를 먼저 찾는다. (단축키: Ctrl+F) 태그 내에 경로를 보면 유저마다 랜덤하게 부여되는 카카오톡 캐릭터 프로필 이미지 ..

티스토리 블로그 꾸미기: 스크롤 메뉴바 만들기 티스토리 블로그 Portfolio 스킨을 사용하면서 좀 아쉬웠던 점이 글 내용이 길면 상단 메뉴바가 보이지 않는다는 점이다. 다른 카테고리의 글을 보고 싶으면 맨 위로 스크롤을 쭉해서 메뉴 버튼을 찾아야 했다. 나도 내 블로그에서 다른 글 보기가 어려운데 방문자들은 오죽할까. 그래서 상단에 고정되는 메뉴바를 만들고 더 나아가서 스크롤할 때 등장하도록 애니메이션까지 추가해보련다! 이 튜토리얼은 티스토리 블로그 Portfolio 스킨에 초점이 맞춰져 있으며, w3school.com의 오픈 소스를 활용해서 만들었다. ※ How to - Slide Down a Bar on Scroll: www.w3schools.com/howto/howto_js_navbar_slid..

티스토리 블로그 꾸미기: 한글 웹폰트로 제목 스타일 바꾸기 티스토리 블로그의 이미지와 무드를 가장 쉽게 바꿀 수 있는 방법 중에 하나는 '폰트'를 바꾸는 것이다. 요즘에는 한글 폰트도 웹폰트로 많이 공유가 되고 있어서 매번 보던 '나눔'서체와 다른 다양한 폰트로 자신의 티스토리 블로그 또는 웹사이트의 분위기를 확 바꿀 수 있다. 한글 웹폰트를 기준으로 쉽게 폰트 소스를 가져올 수 있는 두 개의 사이트를 소개하면서 바꾸는 방법을 알려드리겠다. 구글 폰트 눈누 티스토리 폰트 바꾸기 구글 폰트 (https://fonts.google.com/) 구글 폰트의 가장 큰 장점은 다양한 언의 폰트들을 서칭할 수 있다는 것이다. 세세한 라이센스는 직접 확인을 해야하지만 웹폰트는 거의 무료로 사용할 수 있고 어느 나라에서..

티스토리 블로그: 제목 영역 꾸미기 티스토리 블로그 Portfolio 스킨으로 변경하였다. Portfolio 스킨의 가장 큰 특징 중의 하나는 포스팅한 글의 상단 제목 영역이 배경이미지로 채워져 있다는 것이다. 이번 튜토리얼에서는 이 상단 제목 영역은 간단하게 3가지 방법으로 꾸며보는 것이다. (변경된 화면은 지금 이 포스팅의 PC, Mobile 화면으로 확인할 수 있다!) 변경할 부분 글 제목 영역 화면 전체를 꽉채우는 스타일로 키우기 글 제목 영역의 배경 이미지를 스크롤 상관없이 고정하기 글 제목 영역 '어둡기' 조정하기 CSS: 글 제목 영역 키우기 아래 이미지처럼 원래 스킨에서의 글 제목 영역을 디스플레이 화면 크기만큼 키우려고 한다. 이미지로 꽉 채웠을 때의 시각적인 느낌을 개인적으로 좋아한다...

티스토리 블로그 꾸미기: Header 고정하기 Poster 스킨으로 상단에 슬라이더와 벽돌형 리스트를 추가하면서 블로그 리스(liis)의 첫 화면을 조금 바꾸었다. 그러다보니 화면 전체길이가 길어지게 되었고, 스크롤을 하면 헤더(Header)에 있는 로고가 잘 보이지 않아 아쉬웠다. 그래서 화면에서 항상 로고가 보이도록 헤더를 고정하기로 하였다. 현재 블로그 리스(liis)의 화면을 보면 스크롤을 하면 헤더가 화면 상단에 고정이 되어서 계속 노출이 되는 것을 확인할 수 있다. 투명도를 주어서 뒤에 콘텐츠가 살짝 보이게도 하였다. (수정하는 과정에서 여러가지 요소들의 스타일을 같이 바꿔줘야 하기 때문에 아래 튜토리얼이 조금 복잡해보일 수 있지만 티스토리는 html 블로그 만들기가 가능하니까 차근차근 흐름을..

티스토리 블로그 꾸미기: Poster 스킨에 로고 넣는 방법 티스토리 블로그에서 세련되고 멋진 스킨들을 무료로 제공하고 있다. 심지어 반응형으로 제작되어서 디바이스에 맞춰 디자인이 구성되고, 커버 디자인도 쉽게, 마음대로 바꿀 수가 있다. 티스토리 블로그를 처음 만들 때, 어떤 스킨으로 예쁘게 꾸며볼까 고민을 많이하다가 나는 Poster 스킨을 선택했다. 여러커버 디자인 중에 슬라이더가 화면 전체를 꽉 채우는 스타일이 마음에 들었기 때문이다. 그런데 유일한(?) 단점이 블로그 이름이 나오는 화면 상단(헤더, header)에 '로고 이미지'를 넣을 수 없다는 것이다. 다른 스킨들은 사이즈에 맞춰서 로고 이미지를 업로드 하면 노출이 자동으로 되지만, Poster 스킨은 텍스트로만 블로그 이름을 보여준다는 점..

티스토리 블로그 꾸미기: Favicon 파비콘이란? 즐겨찾기 아이콘이라는 뜻으로 주소창 앞에 작은 아이콘으로 표시되는 것을 말한다. 티스토리 블로그 내에서도 파비콘을 등록할 수 있어서 더욱더 자신만의 블로그를 만들 수가 있다. 파비콘은 확장자가 'ico'라서 아이콘 형태로 바꿀 수 있는 변환 프로그램을 써야한다. 파비콘으로 변환하기 전, 포토샵 같은 디자인툴로 이미지를 먼저 만들면 가장 좋지만, 디자인 툴이 없더라도 내가 원하는 이미지가 있다면 쉽게 만들 수 있다. 이미지를 먼저 준비한 다음, 파비콘 변환 사이트(http://icoconvert.com)에 접속한다. 파비콘 변환 사이트는 많지만, 아래 사이트가 용량도 줄여주고 설정도 여러가지 할 수 있어서 가장 좋은 것 같다! 01. 이미지 업로드 파비콘..

티스토리 블로그 꾸미기: Top Button 만들기 사이트 화면 길이가 길 경우 다시 맨 상단 위로 올라가는 Top 버튼이 있으면 편리하다. 내가 필요해서 붙인 Top 버튼. liis 블로그에도 오른쪽 하단에 위로 올라가는 화살표 이미지가 보일 것이다. 다들 익숙하게 알고 있을 탑버튼이 바로 이거다. html과 CSS를 함께 사용하기 때문에 퍼블리싱 초보들은 헷갈릴 수도 있지만, 아래 소스들을 각 알맞은 위치에 차근차근 넣어주면 쉽게 만들 수 있다. (소스는 COFS님 블로그에서 관련 내용을 토대로 만들었다.) html: Top 버튼 추가 나는 '티스토리 블로그 관리자 페이지 > 스킨편집 > html 편집'에서 'footer' 태그 위에 추가하였다. 01. id값 id="MOVE_TOP_BTN"은 버튼 ..