 |
 |
前号へ
このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。おちゃのこネットの刑部です。
今回のデザイン道場は、おちゃのこネットでご用意しているアイコンフォントを利用してSNSとYoutubeのアイコンリンクを設置する方法をご紹介します。
メインエリア、サイドエリア自由記入欄やフッター上部自由記入欄などHTMLタグが利用できるエリアであればどこでも設置することができます。
 |
|
 |
 |
下記のHTMLタグをHTMLタグ利用可能エリアに設定してください。
※サンプルサイトでは、メインエリア、サイドエリア自由記入欄、フッター上部自由記入欄に設定しています。
各SNSやYoutubeへのリンク先はご自身がお持ちのアカウントURLを設定ください。
※下記のサンプルはおちゃのこネットオフィシャルアカウントのリンク先URLが設定されています。
<div class="shop_snsicon_box">
<div class="shop_snsicon_list flex_layout flex_wrap flex_j_center flex_a_center">
<div class="shop_snsicon shop_snsiconfb">
<a href="https://www.facebook.com/ocnk.net" class="snsicon_btn" target="_blank">
<i class="fa ocnkiconf icon-ocnk-snsfb"></i>
</a>
</div>
<div class="shop_snsicon shop_snsiconx">
<a href="https://x.com/ocnknet" class="snsicon_btn" target="_blank">
<i class="fa ocnkiconf icon-ocnk-snsx"></i>
</a>
</div>
<div class="shop_snsicon shop_snsiconin">
<a href="https://www.instagram.com/ocnknet/" class="snsicon_btn" target="_blank">
<i class="fa fa-instagram"></i>
</a>
</div>
<div class="shop_snsicon shop_snsiconyb">
<a href="https://www.youtube.com/@ocnk-net" class="snsicon_btn" target="_blank">
<i class="fa ocnkiconf icon-ocnk-snsyb"></i>
</a>
</div>
</div>
</div>
デザイン管理→スタイルシートの編集から下記の指定をコピーして貼り付けてください。
アイコンのサイズは、22pxの数値でアイコンの色は#000000でそれぞれ設定しています。
変更される場合は、文字サイズとカラーコードを変更してください。
.responsive .shop_snsicon_box {
padding: 5px 0;
}
.responsive .shop_snsicon_box .shop_snsicon_list {
gap: 15px;
}
.responsive .shop_snsicon_box .snsicon_btn {
display: inline-block;
font-size: 22px;
color: #000000;
line-height: 1;
}
.responsive .shop_snsicon_box .snsicon_btn:hover {
opacity: 0.7;
}
なお、お問い合わせは下記ページからお願い致します。
Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.