gush2 サイドバーSNSボタンの初期設定と装飾

サイドバートップにあるSNSボタン箇所に、「feedly」ボタンの追加とそれらのボ
タンを装飾してみた。

新型コロナウイルス北海道の感染場所最新情報!

 

新型コロナ北海道内の感染者数動向の最新情報!

新型コロナの5類移行に伴い、指定した医療機関からの「定点把握」による全国の感染状況を初めて発表。そこで北海道内（特に釧路・札幌）で感染された動向の最新の状況を配信しています。

www.net.y-taka.biz

 

 

既存のコード

サイドバー（sidedar.php）を開いてみると
[php]
<!–アイコン–>
<div class=”side-sns”>
<!– thnx! http://www.iconsdb.com/ –>
<ul>
<li><a href=”https://twitter.com/” target=”_blank”><i class=”fa fa-twitter”></i>
</a></li>
<li><a href=”https://www.facebook.com/” target=”_blank”><i class=”fa fa-facebook”></i>
</a></li>
<li><a href=”https://www.google.com/” target=”_blank”><i class=”fa fa-google-plus”></i>
</a></li>
<li><a href=”<?php echo home_url();?>/feed/” target=”_blank”><i class=”fa fa-rss”></i>
</a></li>
</ul>
</div>
[/php]

各アイコンは Font Awesome の

アイコンフォントを使用しており、header.php に読み込み用のコードが
記述してあります。
デフォルトのままでOKなら、各SNSアイコンのリンクをご自分のアカウントへのリ
ンクに変更する。

サイドバーSNSボタンの初期設定

各SNSアイコン（ボタン）に自分のアカウントを設定する。

各SNSアイコンのリンクをご自分のアカウントへのリンクに変更後のコード

[php]
<!–アイコン–>
<div class=”side-sns”>
<!– thnx! http://www.iconsdb.com/ –>
<ul>
<li><a href=”https://twitter.com/G_takayoshi” target=”_blank”><i class=”fa fa-twitter”></i>
</a></li>
<li><a href=”https://www.facebook.com/mdtakayoshi” target=”_blank”><i class=”fa fa-facebook”></i>
</a></li>
<li><a href=”https://plus.google.com/u/0/111443466191056101027/” target=”_blank”><i class=”fa fa-google-plus”></i>
</a></li>
<li><a href=”<?php echo home_url();?>/feed/” target=”_blank”><i class=”fa fa-rss”></i>
</a></li>
</ul>
</div>
[/php]

新たに「feedly」を追加

「feedly」サイトよりコードを取得して、下記コードを追記した。

[php]
<li><a href=’http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fwww.y-taka.biz%2F%2Ffeed’ target=’blank’><img id=’feedlyFollow’ src=’http://s3.feedly.com/img/follows/feedly-follow-logo-green_2x.png’ alt=’follow us in feedly’ width=’42’ height=’42’></a></li>
[/php]

最終コードは以下のようになった
[php]
<!–アイコン–>
<div class=”side-sns”>
<!– thnx! http://www.iconsdb.com/ –>
<ul>
<li><a href=”https://twitter.com/G_takayoshi” target=”_blank”><i class=”fa fa-twitter”></i>
</a></li>
<li><a href=”https://www.facebook.com/mdtakayoshi” target=”_blank”><i class=”fa fa-facebook”></i>
</a></li>
<li><a href=”https://plus.google.com/u/0/111443466191056101027/” target=”_blank”><i class=”fa fa-google-plus”></i>
</a></li>
<li><a href=”<?php echo home_url();?>/feed/” target=”_blank”><i class=”fa fa-rss”></i>
</a></li>
<li><a href=’http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fwww.y-taka.biz%2F%2Ffeed’ target=’blank’><img id=’feedlyFollow’ src=’http://s3.feedly.com/img/follows/feedly-follow-logo-green_2x.png’ alt=’follow us in feedly’ width=’42’ height=’42’></a></li>
</ul>
</div>
[/php]

サイドバーSNSボタンの装飾

デフォルトでは各SNSボタンの色は同じなので、それぞれボタンに色とテキストシ
ャドウをつけてみた。
サイドバー(sidebar.php)を開きます。

先ほど初期設定したしたところの「<!–アイコン–>」のところを修正します。

例えばツイッターの場合

[php]
<li><a href=”https://twitter.com/G_takayoshi” target=”_blank”><i class=”fa fa-twitter”></i>
</a></li>
[/php]

の中にある「target=”_blank”>」の「”_blank”」の後ろに、スペースを入れてから
「 class=”twitter”」を記述する。

このように各SNS毎記述する。

すべて記述した後のコードです。

[php]
<!–アイコン–>
<div class=”side-sns”>
<!– thnx! http://www.iconsdb.com/ –>
<ul>
<li><a href=”https://twitter.com/G_takayoshi” target=”_blank” class=”twitter”><i class=”fa fa-twitter”></i>
</a></li>
<li><a href=”https://www.facebook.com/mdtakayoshi” target=”_blank” class=”facebook”><i class=”fa fa-facebook”></i>
</a></li>
<li><a href=”https://plus.google.com/u/0/111443466191056101027/” target=”_blank” class=”google”><i class=”fa fa-google-plus”></i>
</a></li>
<li><a href=”<?php echo home_url();?>/feed/” target=”_blank” class=”rss”><i class=”fa fa-rss”></i>
</a></li>
<li><a href=’http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fwww.y-taka.biz%2F%2Ffeed’ target=’blank’,a href=”#” class=”feedly”><img id=’feedlyFollow’ src=’http://s3.feedly.com/img/follows/feedly-follow-logo-green_2x.png’ alt=’follow us in feedly’ width=’42’ height=’42’></a></li>
</ul>
</div>
[/php]

残念ながら「feedly」のボタンは、今のところ「アイコンフォント」では無く画像
なので出来なかった

スタイルシート(style.css)を開きます

[css]
/*————————————–
サイドSNSアイコン装飾
————————————–*/

#sub .side-sns ul { display: table; }
#sub .side-sns li { display: table-cell; }
#sub .side-sns ul li a { text-shadow: 0 0 1px #000 ; transition: 0.5s; }
#sub .side-sns a.twitter { color: #55acee; }
#sub .side-sns a.facebook { color: #3b5998; }
#sub .side-sns a.google { color: #dd4b39; }
#sub .side-sns a.rss { color: #ff9500; }
[/css]

を記述する。

記事下シェアボタン

初期設定はとくに必要ありませんが、Twitter のコードに data-via=”” という
項目があります。ここにアカウント名を入れると、記事がシェアされたときにアカ
ウント名が表示されます。

sns.phpを開きます。

[php]
<li><a href=”https://twitter.com/share” class=”twitter-share-button” data-count=”vertical” data-via=”ここにアカウント名” data-url=”<?php the_permalink(); ?>” data-text=”<?php the_title(); ?>”>Tweet</a></li>
[/php]

上記コード内の「 data-via=”ここにアカウント名” 」または
「 data-via=”” 」の「””」の中に、「＠」より後ろのアカウント名を記述する。

まとめ

なかなかいいアンバエデス。

ただ「feedly」のアイコンフォントが無かったのが残念でした。

後日勉強してカスタマイズしたいと思います。