スポンサーリンク

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

gush2feedly, SNS, サイドバー

gush2

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

 

スポンサーリンク

既存のコード

 

 

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

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

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

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

 

サイドバー(sidedar.php)を開いてみると

 

各アイコンは Font Awesome の

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

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

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

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

 

 

新たに「feedly」を追加

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

 

最終コードは以下のようになった

 

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

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

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

例えばツイッターの場合

 

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

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

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

 

 

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

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

 

を記述する。

 

記事下シェアボタン

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

sns.phpを開きます。

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

まとめ

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

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

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

 

スポンサーリンク