친효애드온! 본문 중간 수동 링크 (마크9)

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

미리보기

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

짧은 텍스트의 링크글

이것은 어느정도 텍스트의 양이 제법 되는 본문 중간 링크글

와우! 이건 정말이지 말로 표현할 수 없을 정도로 텍스트의 양이 대단히 길기 때문에 두 줄로 내려가버리는 상당히 많은 텍스트의 양이 담긴 본문 중간 링크글

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

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 코드들이 더 있는 상황입니다. 참고하시기 바랍니다.