堀 浩一

Home About

   English

FacebookボタンとTwitterボタンをきちんと並べる

(老いぼれ人工知能研究者のプログラミング日記)

2019年3月6日

このサイトのwebページに、Facebookの「いいね!」ボタンとTwitterのtweetボタンを付けようと思いました。

まずは、簡単でした。
下のページに行って、
https://developers.facebook.com/docs/plugins/like-button/,
and
https://help.twitter.com/en/using-twitter/add-twitter-share-button.
そこに書いてある指示に従うだけです。

とりあえず、うまく行きました。


あー、しかし!
ボタンの位置関係がガタガタになってしまいます。しかもブラウザごとに挙動が異なります。

インターネットで検索したら、解決法がたくさん出てきました。
最も簡単な方法は、一つの<div>要素の中に、複数のボタンをfloatで左づめにしてやることのようです。

こんなコードを書きました。

htmlファイルの中で、


<div>
  <div class="snsbutton">
    code for facebook button here
  </div>
  <div class="snsbutton">
    code for twitter button here
  </div>
</div>

そして、cssファイルの中で、


.snsbutton{float:left; margin-left:3px}

このページをご覧いただいてもわかる通り、この簡単な方法で、うまくいっているようです。


でも、実は、うまくいくまでに、馬鹿馬鹿しく時間を無駄に使ってしまいました。
新しいcssファイルを試す時に、ブラウザのキャッシュをリセットするのを忘れていたのです。
webページをreloadしても、古いcssがキャッシュされたままになって います。
新しいcssファイルを試す時は、ブラウザのキャッシュを強制的にリセットしないと いけませんね。



追記:
おっと、
<link rel="stylesheet" href="koichihori.css?201903062000">
というように、cssファイルの指定にqueryを付加してやるという手もありましたか。query部分を更新すれば、ブラウザがキャッシュを使わずにcssファイルを読み込み直してくれます。



CC0
To the extent possible under law, the person who associated CC0 with this work has waived all copyright and related or neighboring rights to this work.






関連項目(自動計算):
モバイル端末のための css <pre> と <code>
Ruby on RailsでURLをredirectする
WindowsのコマンドプロンプトでUnicodeを使う
WindowsでPythonを使う
MeCabを使っていると、"'utf-8' codec can't decode byte 0xfa in position 0: invalid start byte" というエラーが起こる
Google検索の結果にfaviconを表示する
WindowsからMacにVNCで接続しようとするとlogin windowが固まる
長崎原爆の日
UAV/UGV Autonomous Cooperation
UNESCO: `Do you know AI or AI knows you better? Thinking Ethics of AI'
人工知能として認識されない人工知能の埋め込まれる社会に向けて
倫理的AIの設計を支援するためのAI
文化国家としての技術立国 ー 猪瀬博教授の思い出
AI(人工知能)と哲学
東京大学学術資産等アーカイブズポータル ー UTokyo Digital Collections
映画「グリーンブック」を観て、年寄り人工知能研究者が考えること - 人種その他の差別とAI(人工知能)について
AI ELSI賞
工学と理学の違い
堀 浩一 ホーム
文明と文化と科学と技術
堀 浩一
人工知能とは