らいちのヒミツ基地

公然のひみつ基地です

たった5行ではてなブログにTwitterのエゴサボタンを設置!

とうじょうじんぶつ

f:id:AzuLitchi:20170724182014p:plain

阿豆らいち:
フリーランスのデザイナー。ときどきコーダー。


 

f:id:AzuLitchi:20170824005740p:plain

ATA-b(アタビイ):
都合よく会話してくれるヒミツロボ。


 

たった5行ではてなブログにTwitterのエゴサボタン設置

前回の記事がコチラ

azulitchi.hatenablog.jp

ありがたくブコメを頂戴しました。

f:id:AzuLitchi:20170827004318p:plain

(c) id:kinako222

f:id:AzuLitchi:20170827004540p:plain

ちょうシンプルに

前回、あんな長い記事書きましたが、ブログ記事の上に「この記事に関するツイート」ボタンを設置するだけなら以下の4行を

「デザイン→カスタマイズ→記事」の「記事上」

に追加するだけで良いです。

 

<style type=text/css>
a.twitter-search{background: #5ae;width: 85%;border-radius: 4px;font-size: 12px;padding:4px;line-height: 0px;display: inline-block;text-align: center;color: #fff;}
</style>
<a href="https://twitter.com/search?f=tweets&vertical=default&q={URLEncodedPermalink}" class="twitter-search" target="_blank"><i class="blogicon-twitter lg"></i>この記事に関するツイート</a>

前回記事と同様、はてなブログの構文チェッカーが一部[×]吐きますけど無視してください。構文チェッカー側の不具合のようです。

 

はてなブログで選んでるテーマによっては表示崩れたり上手く動作しないかもしれませんが、

基本的にWebフォントやjQueryの読み込みはブログ純正テーマの方でやってるみたいなんで、実際はリンクとスタイルシートだけ書けばイイって話。

 

ボタンをグレーにしたいなら

「background: #5ae」

のところの#5aeを#111〜#999くらいの3桁ゾロ目に書き換えて、お好みの濃さで設定してください。数字が多い方が明るくなります。

 

f:id:AzuLitchi:20170827004557p:plain

以上、たった4行ではてなブログにTwitterのエゴサボタンを設置する方法でした!

ご大層に語ってますけどこれ、ただのhtml+cssです。

 

【追記】これだと左に寄っちゃうって方へ

中央に寄らない方はこちらをお試しください

<style type=text/css>
a.twitter-search{background: #5ae;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?f=tweets&vertical=default&q={URLEncodedPermalink}" class="twitter-search" target="_blank"><i class="blogicon-twitter lg"></i>この記事に関するツイート</a>

 

【追記】DAC (id:dacs) さんがブックマークレット版を作ってくれました!

www.gudaguda.work

記事デザインの編集がうまくいかない方や、はてなブログ以外のブログサービスをご利用の方はブックマークレット版をお試しくださいませー。

 

 

【追記】この記事にjQueryは関係ない

記事ページにブログパーツなどを配置するときに利用できる変数を追加しました - はてなブログ開発ブログ

「{URLEncodedPermalink}」は、はてなブログで使える変数なので、jQueryの読み込みはこの記事のソースコードでは不要です。( id:minimalgreen さんご指摘感謝です )

 

 

もっと色んな方法が紹介されてユーザーの選択肢が増えるとイイなと思います。

 

 

モンスターハンターダブルクロス Nintendo Switch Ver.

モンスターハンターダブルクロス Nintendo Switch Ver.

 

MHXX買いました。テレビ画面でモンハンやれるのイイですね。

 

それではまた…さよならいち!・∀・)ノ