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