はてなブログのカスタマイズでお馴染みの、横に細長い「この記事に関するツイート」ボタンの元記事はこちらになります。
エントリを紹介してくれているツイートを一覧表示するボタンの設置方法です。
20190723更新
Twitterの仕様変更のため、コードを修正しました。
とうじょうじんぶつ
阿豆らいち:
フリーランスのデザイナー。ときどきコーダー。
ATA-b(アタビイ):
都合よく会話してくれるヒミツロボ。
たった5行ではてなブログにTwitterのエゴサボタン設置
前回の記事がコチラ
ありがたくブコメを頂戴しました。
(c) id:kinako222
ちょうシンプルに
前回、あんな長い記事書きましたが、ブログ記事の上に「この記事に関するツイート」ボタンを設置するだけなら以下の4行を
「デザイン→カスタマイズ→記事」の「記事上」
に追加するだけで良いです。
<style type=text/css>
a.twitter-search{background: #1DA1F2;width: 85%;border-radius: 4px;font-size: 12px;padding: 4px;line-height: 0px;display: block;margin: 0px auto;text-align: center;text-decoration: none;color: #fff;}
</style>
<a href="https://twitter.com/search?q={URLEncodedPermalink}&f=live" class="twitter-search" target="_blank"><i class="blogicon-twitter lg"></i> この記事に関するツイート</a>
はてなブログの構文チェッカーが一部[×]吐きますけど無視してください。構文チェッカー側の不具合のようです。
はてなブログで選んでるテーマによっては表示崩れたり上手く動作しないかもしれませんが、
基本的にWebフォントやjQueryの読み込みはブログ純正テーマの方でやってるみたいなんで、実際はリンクとスタイルシートだけ書けばイイって話。
ボタン色の変更について
ボタンをグレーにしたいなら
「background: #1DA1F2」
のところの#1DA1F2を
- #14171A
- #657786
- #AAB8C2
のどれかに書き換えて、お好みの濃さで設定してください。下の方が明るくなります。
水色かグレー以外にするのはTwitterロゴ使用規定違反になる可能性があるので非推奨です。
Twitterのブランドリソースガイドラインについては下記PDFをご覧下さい。
まとめ
以上、たった4行ではてなブログにTwitterのエゴサボタンを設置する方法でした!
ご大層に語ってますけどこれ、ただのhtml+cssです。
【追記】はてなブログ以外のサイトに設置する方へ
このページのコードははてなブログ用ですので。
【追記】DAC (id:dacs) さんがブックマークレット版を作ってくれました!
記事デザインの編集がうまくいかない方や、はてなブログ以外のブログサービスをご利用の方はブックマークレット版をお試しくださいませー。
【追記】この記事にjQueryは関係ない
記事ページにブログパーツなどを配置するときに利用できる変数を追加しました - はてなブログ開発ブログ
「{URLEncodedPermalink}」は、はてなブログで使える変数なので、jQueryの読み込みはこの記事のソースコードでは不要です。( id:minimalgreen さんご指摘感謝です )
色んな方法が紹介されてユーザーの選択肢が増えるとイイなと思います。
それではまた…さよならいち!・∀・)ノ