친효스킨! 사이드바 블로그정보 프로필 모듈에 SNS 아이콘 만드는 방법
친효스킨 1.17 버전에서 적용되는 기능인데, 물어보시는 분들이 좀 계셔서 아예 이렇게 따로 언급하는게 더 낫겠다는 생각으로 강좌글을 하나 올립니다. 방법은 어렵지 않습니다. 현재 친효스킨 사이드바에는 프로필 (블로그정보) 모듈이 있습니다. 이 아래에 페이스북, 트위터, 인스타그램, 유튜브, 그리고 이메일로 바로갈 수 있는 아이콘을 배치했습니다. 어떻게 배치하는지 알아보도록 합니다.
HTML 수정
먼저 친효스킨의 HTML에서 아래의 영역을 찾습니다. "블로그정보" 라고 검색하면 쉽게 찾을 수 있습니다.
<s_sidebar_element>
<!--블로그정보-->
<div class="blogInfo rgy-sidebar-title rgy-sidebar-content">
<h3>블로그정보</h3>
<ul>
<li>
<img class="blogInfoImg" src="https://tistory1.daumcdn.net/tistory/944811/attach/08d55220c3614990b450f7ed5e046764" alt="블로그 이미지">
</li>
<li class="blogInfo-text">
<p>친절한효자손</p>
<p>IT와 그림, 각종 프로그램 사용하는것을 좋아합니다.</p>
</li>
</ul>
</div>
</s_sidebar_element>이 부분 입니다. 여기를 수정해 줘야 합니다. 아래의 첨부파일에 있는 태그로 모두 교체해주시면 됩니다.
위의 첨부파일 중에서 수정해야 할 부분은 다음과 같습니다.
<li class="blogInfo-sns">
<p>
<a href="#" target="_blank" title="페이스북"><i class="fab fa-facebook-square"></i></a>
<a href="#" target="_blank" title="트위터"><i class="fab fa-twitter-square"></i></a>
<a href="#" target="_blank" title="인스타그램"><i class="fab fa-instagram"></i></a>
<a href="#" target="_blank" title="유튜브"><i class="fab fa-youtube"></i></a>
<a href="https://www.google.com/gmail" target="_blank" title="이메일"><i class="fas fa-envelope"></i></a>
</p>
</li>바로 이 부분 입니다. 먼저 a href="#" 이라고 되어 있는 부분에서 #을 지우고 자신의 계정 URL 주소를 입력하면 됩니다. 예를 들어서 인스타그램의 경우라고 한다면 https://www.instagram.com/자신의계정 이 될 것 입니다. 이런 식으로 나머지 # 부분을 자신의 SNS 계정 URL 주소로 대체하면 됩니다. 이메일 주소 경우에는 그냥 GMail로 바로 갈 수 있도록 해 놨습니다. 원래는 mailto 매소드를 사용할 수 있지만, 이런 경우에는 자주 사용하지 않는 마이크로소프트 아웃룩 익스프레스가 실행 됩니다. 따라서 아웃룩 익스프레스보다 더 사용 효율이 높을 것 같은 지메일 링크로 대체했습니다. URL 링크를 제외한 나머지 부분에서는 수정할것이 없습니다. 다음은 CSS 입니다.
CSS 수정
친효스킨 CSS에 아래의 코드를 추가합니다.
/* 블로그정보 : SNS 아이콘 추가 */
#sidebar aside .blogInfo li.blogInfo-sns > p {
margin-bottom: -5px;
text-align: center;
}
#sidebar aside .blogInfo li.blogInfo-sns > p > a {
display: inline-block !important;
padding: 5px;
width: 18%;
font-size: 2.5em;
}
#sidebar aside .blogInfo li.blogInfo-sns > p > a::before {
display: none !important;
}이 매소드를 CSS의 빈 공간에 삽입하면 됩니다. 따로 수정할 부분은 없습니다. 위의 CSS 스타일 매소드는 아래의 첨부파일에 들어 있습니다. 편하게 다운로드해서 사용하시면 됩니다.
이렇게 하면 친효스킨의 블로그정보 프로필 모듈의 맨 아래에 5개의 SNS 아이콘이 생성 완료 됩니다. 하나씩 눌러보시면 자신의 SNS 계정으로 이동하는것을 확인할 수 있을 것 입니다. 끝.
"친절한효자손 취미생활" 을 검색!
