超簡単に出来る！はてなブログで読者登録ボタンやTwitterのフォロワー数を付けて記事上に表示させる方法
お疲れ様です*:(o・-・)｡o○☆*ﾟ
副業トレーダーの
ＦＸ小銭党党首です (@fx_kozeni)
簡単コピペで実装可能だよ
- 超簡単にできる！はてなブログカスタマイズ
- Twitterのフォロワー数を表示させるボタンの作り方
- 手順とその流れ
- これを変えないと表示されません
- PC記事上に固定する場合
- スマホでも表示させる場合
- 私のタグHTML
超簡単にできる！はてなブログカスタマイズ
Twitterのフォロワー数を表示させるボタンの作り方
はじめに
パソコンが必要です
無料ブログ版でもProでも可能
簡単にコピペで記事上に
はてなブックマークボタン
読者登録ボタン
Twitterフォローボタンを
フォロワー数を表示し配置する事が
超簡単に出来ます
ＰＣとスマホ共に設定は必要です
記事内にも勿論貼り付け可能です
手順とその流れ
まず、こちらのサイトへアクセスします
トップページの画像ですが
無視して㊦へスクロールして下さい
すると、この様な表示がでてきますので
ここをクリックします
画像にて確認
クリックすると
次にこの様なレイアウトが出てきます
画像にて確認
左から２番目ですね
ここをクリックすると次に
この様な表示がでてきます
ここの空白の所にTwitterのＩＤか
もしくはＵＲＬをコピーし貼り付けます
画像にて確認
TwitterのIDなら
僕の場合なら@fx_kozeni
赤色の〇の部分となり
URLは上の〇に部分となります
どちらでもOKです
するとこの様なコードが
表示されます
上記のコードを記事内や
デザイン設定でご自分の
貼り付けたい所にHTMLコードを
貼り付ければ完了です
これを変えないと表示されません
<a href="https://twitter.com/fx_kozeni?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @fx_kozeni</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
上記は取得したコードなのですが
デフォルトでは、
data-show-count="true"ではなく
falseとなっておりますので
この部分をfalseからtrueと
書き変えて下さい！
これでOKです
あとは好きな場所に貼り付けて下さい
記事内に貼り付けするなら
上記で取得したコードを
そのままペーストすれば完了です
PC記事上に固定する場合
デザイン設定
→カスタマイズ
→記事
記事上に先程取得した
コードを貼り付けます
この様な感じになります
パソコンで見た表示
スマホでも表示させる場合
スマホで見た表示
スマートフォン設定
記事→記事上に
取得したHTMLコードを
貼り付けます
私のタグHTML
私の場合はてなブックマークと
読者登録ボタンを横並びにし
その㊦にTwitterフォワーボタンを
設置したのですが、その際のコードが
こちらとなります
素人に毛が生えたLVの知識なので
僕なりのコードの書き方です
<table border="0">
<tr>
<td><a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="basic-label" data-hatena-bookmark-lang="ja" data-hatena-bookmark-width="100" data-hatena-bookmark-height="35" title="このエントリーをはてなブックマークに追加"><img src="https://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="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></td>
<td><iframe src="https://blog.hatena.ne.jp/kozeni_fx/kozeni-fx.hatenablog.com/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe>
</td>
</tr>
</table>
tabletタグを使い
ブックマークと読者ボタンを横並べにし、
その㊦にTwitterフォロワーさんボタンを
配置してみました
読者ボタンや
はてばブックマークボタンは
以下の公式ページより取得可能です
読者ボタンは
設定
→詳細設定の所から取得可能です
以上ではございますが、
簡単に出来るかと思いますので
お時間のある方で興味のある方は
お試しくださればと思います
