るうのたわごと。

[£]とりあえずPC版!SNSボタンの形をそれとなく揃えてみたよ!

 

やろうやろうと思っていたことをようやくやりました。
るう(@Lugh_)です。

モバイル版は少し形が崩れているのですが、PC版はそれとなく形の揃ったSNSボタン群をにしてみました。
snsbox

はてなブックマーク参考サイト

はてなブックマークボタン作成サイトへ飛んでからの手順がとてもわかりやすかったです。

はてなブックマークボタンが新しくなった! WordPressに新はてブボタンを導入する方法 | [M] mbdb
はてなブックマークボタンの作成・設置について – はてなブックマーク

そのままでは、どうやらTOPページでブックマークしてもらったものしかカウントされなかったので、少し修正しました。

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>|<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

feedly購読者数がわかるボタン参考サイト

晒していいものか…と一瞬悩みましたが、2桁登録されてるらしいと喜んで設置(笑)
ボタンのサイズのCSSを修正した程度でそのまま使わせていただきました。
…って、あかめちゃんの凄さを今検索して思い知りました。

[Å] feedlyの購読者数付きボックスボタン 効果は抜群!?作り方を晒しました! | あかめ女子のwebメモ
feedly. your news. delivered.

ついでにPocketも

一時期付けていたPocketも再度設置。

「pocket」のWordPressブログへのボタン設置方法。そしてわかった衝撃の事実。これは無視できない。 | iPhone・Macの情報発信ブログ “NUMBER333”

WordPressの個別ページで使うにはちょっと改造が必要。

【WordPress】トップページの各記事にPocketボタンを設置する方法 | アイデアハッカー

そのままでは、どうやらTOPページでブックマークしてもらったものしかカウントされなかったので、少し修正しました。

<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en" data-save-url="<?php the_permalink();?>"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>

そんなわけで、ね。

揃うとそれなりにすっきりと見えてきますね。
次はモバイル版の表示方法を考えないと、です。

…数字が見えてくると励みになるというか、諦めになるというか。
ぽちってしていただけるととても喜びます(笑)
るう(@Lugh_)でした!

 - ぶろぐ ,

admax300-2

admax300-2

Message

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

CAPTCHA


  関連記事

no image
[£]STINGER3、ウィジェットがうまく編集されない場合はテーマを変えてみるといいかも?

と、言うことを書こうと思ったら事象が再現しなかったるう(@Lugh_)です。 い …

image
[£]BackWPupがDropboxに保存できなくなっている時の対処法

WordpressのバックアップをBackWPupを使ってDropboxに保存し …

no image
[£]Stinger2をカスタマイズする -「続きを見る」のスタイルを変更する-

カスタマイズで検索に来て下さる方もちらほら居てくださるのが励みになっているるう( …

だららんペンギン
[£]「Stinger2」改造 -SNSアイコン群にFeedly・RSS追加-

「Stinger2」で運営中のるう(@Lugh_)です。 「Stinger2」は …

no image
[£]Feedlyボタンをつけてみた

るう(@Lugh_)です。 最近使い出したFeedly用のボタンを設置してみるこ …

やきど。
[£]改めまして、「るうのたわごと。」です。

改めまして、「るうのたわごと。」著者のるう(@Lugh_)です。 大まかなところ …

no image
[£]Stinger2をカスタマイズする -サイドバー見出しのスタイルを変更する-

年長さんの姪っ子と全力で遊んでちょっと腰に来ているるう(@Lugh_)です。 … …

wp1
[£]Android端末でモブログ環境を整えてみたかった…

基本的に手元でできるものは手元でやりたいるう(@Lugh_)です。 以前は絵日記 …

no image
[£]Xperia SX(Android) でモブログ環境を作ってみた!(試行錯誤中)

最近、Wordpress公式アプリでブログ更新をしているるう(@Lugh_)です …

名刺2
[£]ぶろがーめいしなるものをたのんでみた

ぶろがーめいしなるものに興味津津のるう(@Lugh_)です。 なにやらおふ会なる …