친효애드온: 관련글 참고글 모듈 (마크1)
제 블로그를 살펴보시면, 관련글 부분이 어느 순간부터 다른 디자인으로 이루어져 있다는걸 확인하실 수 있습니다. 아직 잘 모르시겠으면 여기를 방문하셔서 관련글들의 디자인을 살펴보실 수 있습니다. 다른 블로그와의 차별성을 두기 위해, 혹은 좀 더 개성넘치지만 과하지 않은 디자인을 생각하다보니 이렇게 구성을 해 봤습니다.
관련글 마크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.txtCSS 세팅하기
먼저 아래의 첨부파일의 메모장을 다운로드 해주시기 바랍니다.
다운로드 받은 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>
이렇게 주황색 태그 부분처럼 입력해주시면 적용 됩니다. 그리고 "이 글도 읽어보세요" 부분의 텍스트는 사용자 임의대로 변경해서 사용하면 됩니다.
앞으로 친효애드온은 이런 식으로 사용하게 될 것입니다. 제가 코딩에 대해 더 많은것을 알게되면 좀 더 사용하기 편리하도록 제작하겠지만 지금은 이게 한계입니다. (울음) 그래도 많이 이용해 주시고 다양한 애드온을 만들도록 좋은 아이디어 있으시면 댓글로 많이 알려주시면 감사하겠습니다. 끝.
