친절한효자손 취미생활

현재 일부 스타일을 변경해서 적용하고 있습니다. 스킨은 현재 순조롭게 완성되어가고 있습니다. 그 중에서 당장 사용 가능한 몇가지들을 공유하려고 합니다. 현재 친효스킨은 부분별로 업그레이드가 가능한 파츠형 스킨으로 개발 중 입니다. 누구라도 쉽게 커스터마이징 해서 사용하기 편리한 그런 스킨으로 완성하는데 목표를 두고 있습니다.


티스토리에서 기본적으로 제공하는 첨부파일 스타일이 뭔지 아시죠? 상당히 촌스럽습니다. 그리고 눈에 잘 띄지도 않습니다. 개인적으로 두번째 문제가 가장 심각하다고 생각합니다. 첨부파일이 어디에있나 한참을 찾을 이유가 없습니다. 누가봐도 "아, 이게 첨부파일이군!" 싶어야 합니다.




이게 기존 티스토리 첨부파일 디자인 입니다. 눈에 잘 안띕니다. 이것을 수정하려면 CSS 내부에서 클래스값이 .imageblock 인 요소를 찾아서 수정해주시면 됩니다. 이것은 스킨마다 다를 수 있습니다. 그리고 원본은 반드시 백업해 두세요. 그리고 스킨 수정 전에 한번 전체적으로 백업을 해주시기 바랍니다. 문제가 발생되면 언제든 롤백할 수 있도록 말입니다.


See the Pen :: before -&rt; FontAwesome CSS Unicode Use by rgy0409 (@rgy0409) on CodePen.


이것이 수정 후 모습입니다. 마우스를 올려 보세요. 반전되는 효과도 확인하실 수 있습니다. 무엇보다도 눈에 확 들어와서 확실히 첨부파일의 위치라던지 파일명을 직관적으로 알 수 있습니다. CSS3 태그 요소들을 모두 메모장에 복사해두세요. 그대로 사용할 것 입니다. 아래에 첨부파일로도 남기겠으니 다운받으셔서 사용하세요.


친효애드온-첨부파일(CSS).txt


CSS 세팅

적용 방법도 어렵지 않습니다. 먼저 현재 사용하시는 스킨의 CSS 화면으로 이동합니다.



이곳에서 Ctrl + F를 누르셔서 .imageblock 을 검색합니다. 만약 검색이 된다면 기존 요소를 주석처리를 하거나 아예 삭제를 합니다. 저는 저 위에 표시된 것 처럼 주석 처리를 해놨습니다. 참고로 제가 사용하는 스킨은 JB131 반응형 스킨 입니다. 그리고 그 아래로 쭈욱 붙여넣기를 해주시면 됩니다. 이게 끝입니다. 간단하죠? (위의 예제와 첨부파일의 코딩 상태는 다를 수 있습니다. 첨부파일이 가장 최신 버전 입니다.)


Script 세팅

다음은 스크립트 링크 입니다. HTML의 <head> 안쪽에 붙여넣기를 해주시면 됩니다.



이렇게 붙여넣기 해주세요. 위치를 잘 모르시겠다면, <title> 바로 아래에 넣으시면 됩니다. 위의 링크 태그는 아래의 첨부파일에 있습니다.


친효애드온-첨부파일(Script).txt


HTML 세팅

아래는 구 버전 방법입니다. 현재는 일괄 적용됩니다.



TIP

주의사항 :
친효애드온 이미지 테두리 자동 감싸기와 중복 사용이 가능하지만, 이미지에 링크를 걸게 되면 이미지가 삭제됩니다. 이점 참고하시기 바랍니다.


TIP

알림 :
친효애드온의 저작권은 저에게 있습니다. 코딩에 마크업된 태그 요소들은 수정하셔서 사용하셔도 됩니다. 하지만 주석처리된건 절대로 지우시면 안 됩니다.


한번 첨부파일을 올려서 테스트해보세요. 잘 적용이 될 것입니다. 이제 답답했던 첨부파일 디자인을 버리고 새로운 옷으로 갈아입으십시오! 앞으로 여러가지 티스토리에 도움되는 애드온을 많이 만들도록 하겠습니다. 끝.





이 블로그를 후원해주실 분들을 모집합니다!

이 글을 공유합시다

facebook twitter googleplus kakaostory naver

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.