ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法

      2015/02/16

Pocket&Feedly_button_tittle

先日、WordPressの人気テーマ「Stinger3」の追尾型SNSボックスを削除する方法の記事を投稿しましたが、SNSボタン関係で「Stinger」のSNSボタンにPocketとFeedlyを追加する方法の備忘録も残して置きたいと思ったので今回投稿させて頂きました!PocketとFeedlyって何?と言う方はこちら…

スポンサーリンク

Pocketとは?

携帯総合研究所さんのPocket紹介文章はこちら
あとで読むサービスの「Pocket」アプリが超絶便利すぎる!

Feedlyとは?

CreativememomemoさんのFeedly紹介文章はこちら
Googleリーダーユーザーに送る!!僕が「Feedly」を超オススメする3つの理由

個別記事の下にあるSNSボックスに各ボタンを追加します。

WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法デフォルトは上の画像のように表示されてると思いますが…WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法

完成するとこの様な感じになります。デフォルトの状態だとコードをペーストする場所は記事の下のSNSボックスと追従型のSNSボックスと2種類ありますが、追従型の方にボタンを追加してしまうとスマホなどで表示した時に上手く表示されないため、PCからとスマホからのアクセスで表示の仕方を変更するか、あまり使わないボタンを削除して新しい物と交換するなどありますが、その設定するのは面倒くさいのと(笑)追従型のSNSボックスは使用してないので現状の記事下のSNSボックスだけに追加します。

スポンサーリンク

Pocketボタンを追加

まず下記のコードをコピーしてください。特に変更点はありません。

そしてsns.phpを開きます。デフォルトではこんな感じのコードです。

ここの13行目あたりの</li>の後で改行してからペーストします。このようになればOKです。

14行目から16行目に先程のPocketのコードがペーストされました。記事下のSNSボックスを確認して頂き無事に追加されていることを確認します。
WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法
無事Pocketボタンが追加されました。

Feedlyのボタンを追加

Feedlyのボタンを追加るのですが、こちらはちょっと手間がかかります。先程のsns.phpとstyle.cssの二カ所に記入するコードがあります。

Feedlyのサイトで貼付け用のコードを生成

ご自身のブログ用にFeedlyのサイトで貼付け用のコードを生成します。
Feedlyボタン生成ページへ飛びます! まず追加したいボタンのデザインを選びます。自分は赤で囲まれたボタンにしました。 WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法
そしてご自身のブログのURLを入れコンピュータのリターンキーを押します。管理ブログのURLで実際試してみました。
WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法
するとコードが生成されます。後ほどこのコードを貼付けます。
WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法

Feedlyボタンのコードをsns.phpに追加します。

先程Pocketのボタンをsns.phpに追加しましたが、その下の部分に追加します。先程までのコードはこちら…

ここの16行目の後で改行して下記のコードを追加します。

すると下記のようになるはずです。

そして先程ご自身でFeedlyのボタン生成ページで作成したコード。下記のコードは私の管理ブログ用コードなので、ご自身で作成したコードをコピペしてくださいね(笑)

こちらを30行目の

後にペーストします。最終的に下記の様になっていれば問題ありません。

現状こんな感じで表示されてしまいます。

スポンサーリンク

WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法これを調整する為にstyle.cssにコードを追加します。

style.cssに調整用のコードをペーストします。

下記のコードをコピーして、style.cssの一番下の空いている所にペースとしてください。

これで完成です!ご自身のブログで表示を確認してください!

WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法

このような表示になっていれば問題ありません。

最後に

現状は問題ないのですが、各ボタンの大きさが微妙に違うので気になっています。これを修正する方法も知りたいですね…ほんとStingerは面白い!今回ボタンを追加するにあたって参考にさせて頂いた、おまえは今までスキャンした本の冊数をおぼえているのか?さん、大変参考になりました。ありがとうございました。みなさんもトライしてみてください!

 - WORDPRESS

Comment

  1. […] dmgadget(ディーエムガジェット) WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法 […]

  2. […] WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法 […]

  3. […] WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法 | dmgadget(ディーエ… […]

  4. […] そこで、dmgadget様のこちらの記事を参考に設置に取り組みました。 […]

  5. […] 参考にさせて頂いたサイト様:dmgadget […]

  6. […] はてブボタン修正の参考:はてなブックマークボタンの吹き出しデザインをFacebookやTwitterのものと同じにしよう! | そふぁねブログ その他の追加の参考:WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法 […]

  7. […] – [参考] WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法 | dmgadget(ディーエムガジェット)- [参考] WordPress[Stinger3] LINEで送るボタンを設置 | dmgadget(ディーエムガジェット) […]

  8. […] はてブボタン修正の参考:はてなブックマークボタンの吹き出しデザインをFacebookやTwitterのものと同じにしよう! | そふぁねブログ その他の追加の参考:WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法 […]

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

WordPress[nend] スマホ用広告(アフィリエイト)の導入方法
WordPress[nend] スマホ用広告(アフィリエイト)の導入方法
WordPressテーマ「Stinger3」のサイドバーの幅を変更する方法
WordPressテーマ「Stinger3」のサイドバーの幅を変更する方法
WordPress[Yet Another Related Posts Plugin] RSSに関連記事を追加
WordPress[Yet Another Related Posts Plugin] RSSに関連記事を追加
WordPress Popular PostをStinger5と同じ表示にカスタマイズ
WordPress Popular PostをStinger5と同じ表示にカスタマイズ
WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示
WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示
WordPressテーマ「Stinger3」のトップページの記事の間に区切り線を入れる方法
WordPressテーマ「Stinger3」のトップページの記事の間に区切り線を入れる方法
WordPress「Stinger3」サイドバーの背景色を変更する方法
WordPress「Stinger3」サイドバーの背景色を変更する方法
WordPress[Stinger3] 記事下のSNSボックスの背景色を変更する方法
WordPress[Stinger3] 記事下のSNSボックスの背景色を変更する方法
WordPress[Stinger3] スマホ用ページでヘッダー画像がはみ出る問題
WordPress[Stinger3] スマホ用ページでヘッダー画像がはみ出る問題
WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更
WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更