친효애드온 : 본문 이미지 링크 걸었을 때 마우스 올리면 글씨 보이게 하기
스마트폰으로 인터넷 정보를 스크랩하는데 스크랩된 이미지 아래 부분에 웹사이트라는 문장이 표시가 되는것을 목격했습니다. 분명 캡쳐할때는 이런 글씨가 없었는데 싶었고 다시 한 번 해당 웹문서를 캡처 시도하며 체크했는데 역시 없습니다. 안드로이드에 추가된 기능인지는 모르겠으나 현재 사용중인 갤럭시노트20 울트라는 웹문서 캡쳐 시 URL 정보가 이미지에 남습니다. 그래서 캡쳐된 이미지를 갤러리에서 확인 시 북마크처럼 편리하게 해당 웹페이지를 방문하는 기능이 있습니다. 여기에서 힌트를 얻었습니다. 티스토리 본문에도 링크를 걸어서 마우스 오버 시 "바로가기" 표시가 되도록 만들고 싶었습니다. 왠지 가능해 보였습니다. <a>태그만 제어하면 될 것 같았습니다. 바로 시도해보았고 마침내 구현에 성공했습니다.
위의 이미지에 마우스를 올려보시기 바랍니다. 전체 이미지가 어두워지면서 아래쪽에 바로가기라는 글씨가 생성됨을 알 수 있습니다. 참고로 친효스킨을 기준으로 설계되었으며 타스킨에서도 작동은 되지만 100% 알맞게 동작하지 않을 수 있음을 말씀드립니다. 만약 타스킨에서 사용하고 싶은데 정상적으로 안 되는 것 같다면 댓글로 문제의 URL 주소를 남겨주시기 바랍니다.
HTML 및 Script 세팅
세팅할게 없습니다.
CSS 세팅
아래의 첨부파일을 다운로드 받아서 사용중인 스킨의 CSS에 붙여넣기 합니다. 관리자 > 꾸미기 > 스킨편집 > CSS 탭으로 들어가시어 빈 공간을 확보 후 복사 및 붙여넣기 하시면 됩니다. 위치는 상관 없습니다.
위의 텍스트에는 다음의 CSS 스타일코드가 들어있습니다.
/* 친효애드온 : 본문 이미지 링크 */
figure.imageblock > a {
display: inline-block;
position: relative;
bottom: -5px; /* 친효스킨에서만 필요한 옵션 */
font-size: 0;
letter-spacing: 0;
word-spacing: 0;
}
/* 어두운 백그라운드 영역 */
figure.imageblock > a::before {
display: inline-block;
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: calc(100% - 15px); /* 어두워지는 백그라운드 세로 사이즈 조절 */
background-color: #000;
transition: all 0.2s; /* 애니메이션 재생 시간 조절 */
opacity: 0;
z-index: 1;
}
/* 텍스트 영역 */
figure.imageblock > a::after {
display: inline-block;
position: absolute;
bottom: 30px; /* 바로가기 글씨의 바닥으로부터 떨어진 간격 조절 */
left: 50%;
content: "바로가기";
padding: 0 20px;
border: 1px solid #fff;
border-radius: 20px;
font-size: 13px; /* 폰트 크기 조절 */
color: #fff;
transform: translateX(-50%);
transition: all 0.2s; /* 애니메이션 재생 시간 조절 */
opacity: 0;
z-index: 2;
}
/* 마우스 호버 시 밝기 */
figure.imageblock > a:hover::before,
figure.imageblock > a:hover::after {
opacity: 0.7; /* 밝기 조절 */
}각 옵션에 대해서 주석으로 설명을 넣었습니다. 참고하시어 조절하시면 됩니다. 특히 「어두워지는 백그라운드 세로 사이즈 조절」 부분은 스킨에 따라 영역이 다를 수 있습니다. 다시 한 번 말씀드리지만 이 설정값은 친효스킨 2.4 버전을 기준으로 완성된 결과입니다.
사용 방법
세팅이 다 끝났다면 이제 테스트를 해봅시다. 본문에 사용된 이미지에 링크를 걸어서 사용하면 됩니다. 따라서 글쓰기 모드에서 이미지를 첨부 후 링크를 걸고자 하는 이미지에 URL을 입력해 사용하기만 하면 끝입니다.
글쓰기 모드에서 이미지를 선택하면 바로 위에 옵션 메뉴바가 나타납니다. 오른쪽에서 두번째 위치에 있는 링크 아이콘을 누릅니다.
그러면 아래쪽에 입력란이 생성되는데 아래의 정보 순으로 입력하시면 됩니다.
1번 : 클릭 시 이동할 URL 주소 입력
2번 : 타이틀 텍스트 입력 (사용하지 않아도 무관함)
3번 : 새 창으로 열기 (기본적으로 체크된 상태)
4번 : 반드시 확인을 눌러 저장해야 함
이렇게하면 본문 이미지 링크 걸기가 끝납니다. 참고로 미리보기에서는 확인이 되지 않습니다. 반드시 글을 발행 후 확인해봐야 합니다. 따라서 예약글 혹은 비공개로 발행해서 확인하시는것을 권장합니다. 그러면 모두들 세팅에 성공하시기를 응원하겠습니다. 끝.
