« 千石電子と秋月電子 | メイン | 赤倉観光リゾートスキー場へ（赤倉温泉） »
2015年2月22日
Pocketのボタンを改行を防ぐならSPANタグを使え！
久々にBLOGのシステムを更新しMovable Typeのバージョンも最新にUPしました。それに伴い、トレンドから外れたボタンの削除と追加を行いました。
まずは、Addclipの削除と代わってAddThisの追加。長年Addclipは愛用してきましたが、未だにiGoogleの登録ボタンがあったり、Livedoor Clip等もう存在しないサービスを未だに表示し続けているので削除しました。代わりに付けたAddThisは世界のSNSやブックマークを網羅しており良く見かけるのでそちらに置き換えました。
次に削除したのは、人人网の共有ボタン。中国のLinkedin的な存在なのですが、やはりWeChat(微信)等が頭角を現してからは、一部の層からしか支持を受けておりません。その代わり、Pocketボタンを設置しました。
Pocketボタンの設置に際してはそれなりに難航しました。始め他のサイトでPocketボタンを設置したら改行されてしまいまして、
最初に参考にしたサイトは
●「Pocket」のブログパーツを改行せず設置する方法
でして、ここではスタイルシートに
.pocket-btn{
display:inline-block;
}
を追加すればOKと書いてあったので、その通りにしたのですが効果が無く悩みました。
次に参考にしたのは以下のサイト
●FC2ブログにソーシャルボタン設置～Pocketの改行も防ぎました
●まきこみ計画：主要ソーシャルボタンを水平設置する際Pocketボタンの改行を防ぐ方法
これらのサイトがやっているのはPocketを含めて並べたい各ボタンをdivタグで囲んでdivの属性にinline-blockを指定する方法です。後者の方は更にFloatを一度導入し、その後Floatを解除しております。確かに一部改善は見られたのですが、まだ一部改行されてしまいます。
というのも、DIVタグはブロック要素なのでタグ効果に標準で改行効果が入っております。しかも、オブジェクトである各ボタン如きにクラス名を持たせてスタイルシートで管理するのも面倒です。そこで、考えたのはインライン要素であるspanタグを利用する方法。
<span style="display: inline-block;">
各共有ボタンサイトから得たコード(1ボタンのみのコード)
</span>
これをボタン毎連続して書いていけば各ボタンが改行されないで一列に表示されるようです。
投稿者 cazper : 2015年2月22日 12:50
| 
Tweet
トラックバック
このエントリーのトラックバックURL:
http://www.cazoo.jp/cgi/mt/mt-tb.cgi/3478
