친효애드온: 관련글 (참고글) 디자인 마크1.0

제 블로그를 살펴보시면, 관련글 부분이 어느 순간부터 다른 디자인으로 이루어져 있다는걸 확인하실 수 있습니다. 아직 잘 모르시겠으면 여기를 방문하셔서 관련글들의 디자인을 살펴보실 수 있습니다. 다른 블로그와의 차별성을 두기 위해, 혹은 좀 더 개성넘치지만 과하지 않은 디자인을 생각하다보니 이렇게 구성을 해 봤습니다.


관련글 마크1 사용방법

1. 먼저 본 페이지에서 제공하는 첨부파일을 다운로드 받습니다.

2. 첨부파일 안에 있는 CSS 내용을 자신의 티스토리 스킨의 CSS에 붙여넣기를 합니다.

3. 글 작성시, 수동으로 div로 감싸줍니다.


크게 이 세가지로 진행됩니다. 2번까지는 쉽습니다. 3번에서는 좀 더 추가설명을 드리도록 하겠습니다.


HTML <head> 안쪽에 폰트어썸 CDN 세팅하기

아이콘 세팅을 위한 단계입니다. 자신의 스킨안에 있는 HTML 카테고리에서 <head> 안쪽에 다음의 주소를 입력해 주시기 바랍니다.


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">


CSS 세팅하기

먼저 아래의 첨부파일의 메모장을 다운로드 해주시기 바랍니다.


친효애드온-관련글(CSS).txt


다운로드 받은 CSS의 내용을 살펴보시면 다음과 같습니다.


/* 관련글 모듈 */
/* https://rgy0409.tistory.com */
.rgyTextBox {
    overflow: hidden;
    padding: 10px;
    box-shadow: 5px 5px 15px 0 #555;
}

.rgyTextBox > p {
    overflow: hidden;
    background: #f00;
	transform-origin: right;
}

.rgyTextBox > p a {
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 5px;
    color: #555;
    transform-origin: right;
    transition: all 0.15s;
    -webkit-transition: all 0.15s;
    -moz-transition: all 0.15s;
    -o-transition: all 0.15s;
    -ms-transition: all 0.15s;
    background: #eee;
}

.rgyTextBox > p:hover a {
    box-sizing: border-box;
    font-weight: bold;
    color: #222;
    transform: scaleX(0.97);
    -webkit-transform: scaleX(0.97);
    -moz-transform: scaleX(0.97);
    -o-transform: scaleX(0.97);
    -ms-transform: scaleX(0.97);
    background: #ddd;
}

.rgyTextBox > p a::before {
    content: "\f105";
    font-family: FontAwesome;
    margin-right: 10px;
    color: #222;
}

이 모든 내용을 자신의 스킨안의 CSS에 아무곳에나 붙여넣기를 해주세요.




저는 상단의 @font-face 관련 요소 아래에 붙여넣기를 해서 사용하고 있습니다. 참고만 해주세요.



적용시키기

먼저 플러그인에서 "이전 글 넣기" 기능이 활성화 되어 있어야겠습니다. 아니면 수동으로 글을 작성하시고 링크를 걸어두셔도 상관 없습니다. 개인적으로는 이전글넣기가 훨씬 편해서 늘 이용하고 있습니다. 대체로 저는 본문 맨 마지막에 관련글을 넣으므로 마지막 부분에 이렇게 작성을 해둡니다.




제 글의 마무리는 늘 "친절한효자손 취미생활" 을 검색! 이라는 문구가 있습니다. 바로 위에 저렇게 태그를 임시로 작성해 두었습니다. 빨간색 부분이고요, 초록색 빈 공간에 바로 관련글을 첨부해 두는 것 입니다. 아까 말씀드린대로 플러그인의 이전 글 넣기 기능을 이용해서 현재 이 글과 관련이 있는 글들을 빠르게 넣을 수 있습니다. 실제로 이 글을 작성하면서 방금 관련글을 넣었는데 모습은 이렇습니다.




이렇게 되어있습니다. 친효애드온 관련글 두개를 넣었습니다. 이제 거의 다 끝났습니다. 태그 정리만 해주시면 됩니다.




태그 수정을 위해서 오른쪽 상단에 있는 HTML에 체크합니다. 그러면 현재 글 작성하는 모드가 HTML 태그 모드로 변경되는것을 확인하실 수 있습니다. 맨 아래쯤에서 rgyTextBox 를 찾으세요.




찾으셨나요? 저기 빨간색 박스 부분이 아까 미리 입력해둔 태그이며, 초록색이 방금 이전 글 넣기로 입력해둔 관련 링크글 부분입니다. 이제 빨간색 태그만 정리해주시면 됩니다.


<div class="rgyTextBox">

링크글

</div>


최종적으로 이렇게 만들어 주시면 됩니다. 한 마디로 rgyTextBox 라고 하는 클래스명을 가진 div로 링크글을 감싸주시면 됩니다.




네. 이렇게 작성해 주시면 끝납니다. 그러면 다시 HTML 체크를 풀고 글 작성 모드로 돌아와서 관련글 부분을 확인해 보세요.




아까 미리 작성해 두었던 태그가 사라진것을 확인하실 수 있습니다. 이렇게 되면 정상입니다. 이제 미리보기를 하셔서 잘 적용이 되었는지 확인해보시면 됩니다.




보시는 것 처럼 잘 적용이 된 것을 확인하실 수 있습니다. 조금 복잡해 보여도 익숙해지면 금방 적응하실 수 있으실 것입니다. 여기 본문 맨 아래에 실제 관련글이 있습니다. 마우스로 올려보시면 애니메이션 효과도 나타납니다. 직접 살펴봐주세요.


TIP

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


앞으로 친효애드온은 이런 식으로 사용하게 될 것입니다. 제가 코딩에 대해 더 많은것을 알게되면 좀 더 사용하기 편리하도록 제작하겠지만 지금은 이게 한계입니다. (울음) 그래도 많이 이용해 주시고 다양한 애드온을 만들도록 좋은 아이디어 있으시면 댓글로 많이 알려주시면 감사하겠습니다. 끝.




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

이 글을 공유하기

댓글(6)

  • 2019.01.04 09:57 신고

    우와 너무 신기해요! 쉽게 알려주셔서 저도 도전해볼 수 있을 것 같습니다^^

  • 2019.01.28 20:15

    비밀댓글입니다

    • 2019.01.29 00:25 신고

      안녕하세요! red 라고 되어 있는 부분을 원하시는 16진수 코드로 변경하시면 됩니다.

  • 2019.06.27 21:57 신고

    이전글 보기 이뻐서 적용해봅니다. 감사합니다. 아 최신 에디터에서는 p 태그때문에 한칸식 밀리네요 ㅠㅠ

    • 2019.06.28 03:29 신고

      이전 에디터를 사용해보시기를 바랍니당. 최신에디터는 버그가있어서 쓰지않고있어요.

Designed by JB FACTORY