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

gush2feedly, SNS, サイドバーgush2, SNS, サイドバー

gush2

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

 

既存のコード

 

 

  • ここで紹介するgush2のカスタマイズは、私の備忘録です。
  • gush2は素でも使える。でも個性を出すためにカスタマイズしよう
  • バックアップは忘れずに!!!

以下記事はワードプレス(WP)や、テーマのgush2をカスタマイズしたやり方等を忘れないために書き留めた備忘録です

これらを参考にカスタマイズする時は、自己責任でお願いいたします。

ソースコードを変更する場合は、FTPソフトを使ってサーバーにアップ。または各サーバーのオプション(ファイルマネージャー)等(例はさくらサーバーです)でカスタマイズを行ってください。

 

サイドバー(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」のアイコンフォントが無かったのが残念でした。

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