유튜브를 보다가 동영상 하나 놓고 그와 관련된 글을 쓸 땐 좋지 않을까 싶어서 만들어보는 중입니다. 근데 영상을 위주로 하는 블로그가 아니라서 만약 만든다 해도 쓸지가 의문이긴 하네요. 마음에 들게 만들기가 굉장히 힘듭니다 ㅠㅠ 사용하고 싶을 땐 iframe을 특정 class를 지닌 div로 감싸고, 만약 그 div가 하나만 있을 때만 동작하도록 만드는 중입니다. 유튜브 영상이 페이지 최상단에 존재하도록 하였고, 페이지가 스크롤 되어 영상이 보이지 않으면 하단에 고정되도록 했습니다.

폰트 출처 Our words shall remain here for the ages사족이지만, 잘 째려보면 무슨 알파벳인지 대충 보입니다. 위 문자는 포켓몬스터 시리즈에 등장하는 '안농(unown)'이라는 포켓몬의 모습입니다. A~Z와 !?를 포함한 문자를 만들 수 있습니다. 가장 처음 접한 포켓몬 시리즈인 포켓몬스터 다이아몬드에서 잡은 안농 이렇게 안농은 다음 세대 작품이 발표되면 항상 데리고 다닐 정도로 아끼는 편인데, 그 계기가 생각나진 않네요. A~?까지 모조리 맞추려고 생고생을 하던 중 색이 다른 포켓몬을 처음 조우하게된 포켓몬이라 그때 더 애정이 깊어진 것 같긴 한데, 딱히 그게 계기도 아닌 것이 그전부터 안농을 좋아해서 A부터 모조리 모으기 시작한 거라... 여하튼 유튜브 보던 중에 관련된 ..

이제 큰 틀은 더 변경할 것이 없어 보여, 자잘한 변화들만 계속되는 중입니다. 이미지 커서 온클릭 이벤트 없음 온클릭 이벤트 있음 지금까지는 모든 이미지에 포인터 커서를 줬지만, 이젠 온클릭 이벤트가 있는 경우에만 포인터로 변경되도록 했습니다. 인덱스 페이지 별건 아니고 로고의 애니메이션을 좀 수정했습니다. What is love? 이란 테마에 맞춰서 천천히 호흡하다, 마우스를 올리면 호흡이 빨라지는 것처럼 표현해봤습니다. 처음엔 심장 박동처럼 해보려다 너무 난잡하고 요란해서 호흡으로 바꿨습니다. 푸터 내용이 없는 영역은 표시되지 않도록 변경했습니다. 사이드바 스킨 사용하시는 분의 요청으로 아코디언 메뉴를 만들어서 적용해봤습니다.하지만 제 블로그는 하위 카테고리가 많지도 않고, 접었다 폈다 하기 귀찮아서..

배너 위에 특정 정보들을 넣으려고 이런저런 시도를 많이 해봤습니다 타이틀도 배치해보고, 이것저것 해보다가 깨달았습니다. 배너를 가릴 수가 없다는걸. 예전에 그냥 사진 걸어둘 때는 아무런 거리낌이 없었는데, 트와이스 영상 넣고부터는 배너 위에 뭘 배치하니까 몹시 거치적거리더군요;; 그래서 트와이스 what is love mv에 나오는 장면들을 11개로 추려서 넣어봤습니다. (영화 패러디 8개 + 단체 댄스 2개 + 광고 1개) 단체 댄스 영상 나연 정연 모모 사나 지효 미나 다현 - 원데이 아큐브 광고 채영 쯔위 가릴 수 없으면 최대한 꾸며야 하는 것 아니겠습니까. 사실 이때까지 배너 영상이 하나였던 이유도 배너에 제목 등을 넣어보기 위함이었는데, 가릴 엄두가 안 나니까 각종 영상으로 열심히 꾸며야죠. 근..

스크롤 스파이가 무엇인지는 이 페이지를 보시면 확실히 아실 수 있습니다. 스크롤 하시면서 좌측에 고정되어있는 사진을 유심히 살펴봐 주세요.부트스트랩 scrollspy는 이곳을 확인하시면 됩니다. 웹 페이지에서 글을 읽을 때, 종종 원하는 요소로 빠르게 이동할 수 있도록 내비게이션 메뉴를 이용하곤 합니다.스크롤 스파이는 그 내비게이션 메뉴에 곁들여서, 사용자가 지금 어느 부분을 보고 있는지를 직관적으로 표시해주는 역할을 합니다. HTML1234567891011121314151617181920212223 #1 #2 #3 #4 #5 cs JS123456789101112131415161718 window.onload = function () { var a, b = $("#scroll-spy"), c = b.ou..

티스토리 글을 삭제하거나 비공개 처리하면 보이는 페이지입니다. 투박한 이미지와 함께잘못된 주소이거나, 비공개 또는 삭제된 글입니다.라는 글을 보여줍니다. 글 내용을 감싸는 컨테이너 안에 들어가는 것도 아니라서, 본래 의도했던 모습과는 많이 다른 페이지가 보이게 됩니다.간단한 스크립트와 css를 통해 이를 수정할 수 있습니다. 123456$(function () { var d = $("article_container"), e = $(".absent_post").length, f = $(".article_container div"); 0

최신 버전 업데이트 https://marshall-ku.tistory.com/178 다운로드 주의 : 이 스킨에 포함된 인터파크 고딕 폰트는 개인의 비상업적 용도에 한해 무료로 제공되는 폰트입니다. 이 스킨은 익스플로러와 완벽하게 호환되지 않습니다! Dance the Night away 테마 (하늘색 중심) What is Love 테마 (보라색 & 분홍색 중심) 다운로드 후에 이 포스트를 참조하셔서 초기 설정이나 커스터마이징을 하시면 됩니다. 소개Dance the Night away 테마What is Love 테마 인덱스 페이지를 꾸며본 반응형 스킨입니다.데모페이지 카테고리 목록엔 Masonry 디자인을 사용했고, 페이지 이동이 필요 없이 다음 페이지를 불러옵니다. 사이드바를 더욱 간단하게 닫으실 수 있..

초기 설정 폰트 제거 1단형/2단형 변경 어두운 모드 설정 각종 색상 배너 인덱스 페이지 About 인기 글 헤더 블로그 이름 아이콘 폰트 404 페이지 수정 네이버 이웃 아코디언 메뉴 검색 결과 표시 자동으로 다음 페이지 불러오기 헤더 카테고리 후술할 내용 중, html / css의 편집은 티스토리 스킨 편집에서의 html / css 편집을 의미합니다. js의 수정은 summer-nights.js의 수정을 의미합니다.사용 중이신 텍스트 에디터를 이용하셔도 되고, 에디터가 없으신 경우엔 메모장으로도 가능합니다. js의 추가는 summer-nights.js에 추가를 하셔도 되고, html의 앞에 와 함께 이용하셔도 됩니다. 초기 설정 스킨을 등록하신 후에 블로그 관리 탭으로 가주세요. 본인 블로그에서 q를..