プラグイン「AddToAny」をインストールして設定したけど、何故かメインページのボタンだけいつの間にか表示されなくなった。ならばプラグインのような自作の「SNS」をメインページに乗せようとサイト巡ぐりで見つけた「SNSボタンをWordPressの記事やウィジェットにプラグインなしで追加する」をベースにしてほんの少しだけ修正・追加して納得(自己満足)の「SNSボタン」を完成させた。
# WordPressテーマ内(子テーマ)にテンプレート作成、CSSに追記、及び、「icomoon」をアップロード
1.FontAwesome公式サイトの「http://fontawesome.io/」、接続不可で別途「icomoon」をダウンロード・解凍。
2.sns.phpを作成
3.style.cssに記述
# WordPressのウィジェット機能でSNSボタンを設置するため、SNS用のウィジェットを作成
1.functions.phpに記述
2.ウイジェット用CSSを記述
# 参考サイト:Plusers
1.FontAwesome公式サイトの「http://fontawesome.io/」、接続不可で別途「icomoon」をダウンロード・解凍。
2.sns.phpを作成
3.style.cssに記述
# WordPressのウィジェット機能でSNSボタンを設置するため、SNS用のウィジェットを作成
1.functions.phpに記述
2.ウイジェット用CSSを記述
# 参考サイト:Plusers
ここまでは、サイトから得た方法で完璧に「SNSアイコン」をページの下部とかサイドバーに表示させることが出来た。次のステップは独自色を出したかったので、部分的に修正・追加をした。
1.sns.phpのGoogle+をLINEに入れ替えた。
1 2 3 |
<ul><!--LINEボタン--> <li class="line"><a href="https://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>"> <i class="icon-line"></i> LINE <!--?php if(function_exists('scc_get_share_line')) echo (scc_get_share_line()==0)?'':scc_get_share_line(); ?--> </a></li> </ul> |
2.style.cssで四角のボタンを楕円形にした。
1 2 3 4 5 6 7 8 9 |
.share a{ ←追記(リンク領域をブロック全体に反映させる部分) -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; text-indent:-999px; } # 円形になる値50%で楕円になった。 *四角:border-radiusの値に0%を指定 *角丸:border-radiusの値に15%を指定 |
3.ボタンにカーソルを合わせた時の表示設定欄へ
1 2 3 4 5 6 |
.share li a:hover { ←追記(マウスオーバーで上下運動) -ms-transform: translateY(4px); -webkit-transform: translateY(4px); transform: translateY(4px); box-shadow: none; } |
OSHIVM_SITEのウイジェット専用(フッター)になったけど、SNSボタン追加方法が分かったのでOSBLOG_OSSHINETのサイドバー用のSNSボタンを作成する予定。。。