친절한효자손 취미생활

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


관련글 마크1 사용방법

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

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

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


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


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

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


<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


참고로 친효스킨에는 위의 링크가 기본 세팅되어 있습니다. 다른 스킨을 사용하시면 꼭 세팅해 두시기 바랍니다. 아래에 텍스트 파일로 올려두도록 하겠습니다.


부트스트랩 폰트어썸 CDN.txt


CSS 세팅하기

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


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


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


/* 친효애드온 : 관련글 마크1 시작 */

.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에 체크합니다. 그러면 현재 글 작성하는 모드가 HTML 태그 모드로 변경되는것을 확인하실 수 있습니다. 맨 아래쯤에서 rgyTextBox 를 찾으세요.


찾으셨나요? 저기 빨간색 박스 부분이 아까 미리 입력해둔 태그이며, 초록색이 방금 이전 글 넣기로 입력해둔 관련 링크글 부분입니다. 이제 빨간색 태그만 정리해주시면 됩니다. 아래에 태그 부분을 한번 더 자세히 적어보겠습니다.


<div class="rgyTextBox">

    <p><a href="URL주소" target="_blank">링크글 제목</a></p>

    <p><a href="URL주소" target="_blank">링크글 제목</a></p>

</div>

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


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


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


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


관련글에 소제목 넣기

이 방법은 div 안쪽에 <span> 태그를 활용하여 넣어주기만 하면 됩니다.


<div class="rgyTextBox">

    <span>이 글도 읽어보세요</span>

    <p><a href="URL주소" target="_blank">링크글 제목</a></p>

    <p><a href="URL주소" target="_blank">링크글 제목</a></p>

</div>

이렇게 주황색 태그 부분처럼 입력해주시면 적용 됩니다. 그리고 "이 글도 읽어보세요" 부분의 텍스트는 사용자 임의대로 변경해서 사용하면 됩니다.


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





당신을 위한 콘텐츠

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band

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

비밀글모드

  1. 우와 너무 신기해요! 쉽게 알려주셔서 저도 도전해볼 수 있을 것 같습니다^^
    2019.01.04 09:57 신고
  2. 비밀댓글입니다
    2019.01.28 20:15
    • 안녕하세요! red 라고 되어 있는 부분을 원하시는 16진수 코드로 변경하시면 됩니다.
      2019.01.29 00:25 신고
  3. 이전글 보기 이뻐서 적용해봅니다. 감사합니다. 아 최신 에디터에서는 p 태그때문에 한칸식 밀리네요 ㅠㅠ
    2019.06.27 21:57 신고
    • 이전 에디터를 사용해보시기를 바랍니당. 최신에디터는 버그가있어서 쓰지않고있어요.
      2019.06.28 03:29 신고
  4. 이런 좋은 팁을 공유해주셔서 정말정말 감사합니다. ^^

    책도 구매하려고 하는데 제가 갔던 서점은 품절이더군요. ㅎㅎ

    인터넷으로 구입하겠습니다.
    2019.08.27 13:44 신고
  5. 좋은 스킨과 좋은내용 잘 사용하겠습니다. 항상 감사합니다.
    2020.02.23 20:42 신고
  6. 왜저는 안될까요!! ㅠ_ ㅠ
    2020.04.30 11:36 신고