친절한효자손 취미생활

안녕하세요. 친절한효자손입니다. 본문 중간에 삽입하는 수동 링크 스타일을 새로 만들어봤습니다. 아마 지난번 유튜브 실시간 스트리밍을 보신 분이시라면 이걸 만드는 과정을 라이브로 보셨을 거에요. 거의 한시간만에 완성한 애드온이지요. 스타일은 코드펜을 참고해서 만들었습니다.

 

미리보기

먼저 스타일을 미리 만나보시겠습니다. 아래의 링크에 마우스를 올려보시기 바랍니다. 그리고 변화되는 애니메이션을 직접 목격해 보세요.

 

 

이런 느낌의 본문 중간 수동 링크글 스타일입니다. 보시면 아시겠지만 매우 긴 텍스트의 링크글 경우는 오른쪽으로 살짝 밀리면서 텍스트의 일부가 밑으로 자동으로 내려갑니다. 그래봐야 한 글자만 내려갑니다.

 

CSS 세팅하기

먼저 다음의 CSS 코드를 사용중인 티스토리 스킨의 CSS 카테고리에 그대로 붙여넣기를 해주시기 바랍니다.

 

/* 친효애드온 : 본문 중간 수동 링크 (마크9) 시작 */
.rgyLink9 {
    padding: 5px 10px;
}

.rgyLink9 > p {
    position: relative;
    overflow: hidden;
}

.rgyLink9 > p::before {
    position: absolute;
    top: 0;
    right: 100%;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #ff5544;
    transition: all 0.2s ease;
    z-index: 5;
}

.rgyLink9 > p:hover::before {
    right: calc(100% - 20px);
}

.rgyLink9 > p::after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 0;
    height: 100%;
    background-color: #eee;
    transition: all 0.2s ease;
    z-index: 1;
}

.rgyLink9 > p:hover::after {
    width: 100%;
}

.rgyLink9 > p > a {
    position: relative;
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    color: #ff5544;
    transition: all 0.2s ease;
    z-index: 100;
}

.rgyLink9 > p > a:hover {
    padding-left: 25px;
    color: #333;
}

/* 본문 중간 수동 링크 (마크9) 끝 */

참고로 친효스킨 2.3 버전 이상에는 해당 코드들이 기본 세팅되어 있습니다. 해당 코드를 아래의 첨부파일에 올려두었으니 다운로드 하시어 그대로 사용하면 됩니다.

 

본문 중간 수동링크 마크9 CSS.txt
0.00MB

 

이 코드를 다음의 위치에 그대로 붙여넣기를 진행합니다.

 

관리자 > 꾸미기 > 스킨편집 > HTML 편집 > CSS 탭으로 이동합니다. 그리고 아무곳이나 빈 줄을 확보 후 그대로 붙여넣기를 하시면 됩니다. 위의 스크린샷 이미지는 코드의 일부분만 나와있습니다. 화살표 아래로 CSS 코드들이 더 있는 상황입니다. 참고하시기 바랍니다.

 

HTML 사용 방법

친효애드온 사용 방법은 대체로 다 비슷합니다. 아래의 글을 참고하시어 사용하시면 되시겠습니다.

 

친효애드온 사용 방법

 

친효애드온 사용 방법

오늘 확인해보니 친효애드온에 대한 사용 방법을 따로 글로 작성하지는 않았다는걸 확인했습니다. 매번 사용 방법에 대해 언급하기가 대단히 귀찮기 때문에 아예 이렇게 공식적으로 문서화를

rgy0409.tistory.com

어렵지 않죠? 웹코딩을 잘 모르시더라도 설명서대로 진행하시면 누구나 쉽게 사용 가능합니다. 단 너무 남용하면 가독성을 해칠 수 있습니다. 적절한 사용을 부탁드립니다. 끝.

공유하기

facebook twitter kakaoTalk kakaostory naver band

댓글

비밀글모드

  1. 안녕하세요 친효님! 항상 깔끔하고 이쁜 디자인으로 꾸며주셔서 감사합니다.
    다름이 아니라 해당 애드온은 본문 html 글쓰기에서

    div class를 rgyLing9로 해놓고 쓰면 될까용?
    2021.03.25 19:34 신고
  2. 감사합니다.
    2021.03.26 17:45 신고