スキップしてメイン コンテンツに移動

ソーシャルアイコンの吹き出しCSSメモ

こういう吹き出しを表示させたい。

ソーシャルボタン入れておけばいいだろって話なんだけど、はてなのソーシャルボタンはページのURLを指定しても、どうやらJavaScriptが置かれてるページが対象になるらしく、別のところ(例えばブラウザの拡張機能上)に設置すると、ブックマーク数を表示してくれない。これがTwitterのツイートボタンだと、URLを指定してやればそのページのツイート数を表示してくれるのだが。

まあ、変に触れると虚偽の表示にできるのを防いでいるのかもしれない。
ボタンを押せばすぐバレる話ではあるけど...

既に拡張機能上にツイートボタンを設置できていることから(外観的に)後に引けなくなり、どうやったらブックマーク数をボタンに表示できるのかググってみたけどぱっと出てこない。このボタンの挙動を見ながら表示のさせ方を探るよりも、既にはてブAPIでブックマーク数は取得しているので、それを後から突っ込むという方法でいくことにした。

という経緯で、
問題はこの吹き出しをどうやって表示させるかで、一応表示できたのが下記のもの。

<style type="text/css">
.count {
background-color: #FFFFFF;
border: 1px solid #B0C1D8;
border-radius: 3px;
height: 18px;
padding: 0px 4px;
position: relative;
width: auto;
display: inline;
float: right;
color: #2D4C86;
font-family: "Arial";
font-size: 11px;
line-height: 18px;
text-decoration: none;
}

.count:after,  .count:before{
border: solid transparent;
content: ' ';
height: 0;
right: 100%;
position: absolute;
width: 0;
}

.count:after {
border-width: 3px;
border-right-color: #FFF;
top: 6px;
}

.count:before {
border-width: 5px;
border-right-color: #B0C1D8;
top: 4px;
}

</style>
<div class="count">100000</div>

不要な項目がいくつかありそうだけど、こんな感じに↓

あとは、JavaScriptで動的に数字を入れてやればOK。ボタンの方は数字なしのがあるので、それを左側に設置してやればそれっぽくなる。



PR:CSS3 スタンダード・デザインガイド
PR:ソーシャルインフルエンス 戦略PR×ソーシャルメディアの設計図 (アスキー新書)

コメント

このブログの人気の投稿

GolangでWindows GUIアプリケーション

GUIアプリ作成の前提 社内ツールとしてexeで配布 開発環境はGoLandを使う 社内ツールとしてexeを配布ということであれば、Visual StudioでC#による開発だと思います。しかしながら、Go言語を習得したいのと、GoLandの補完機能が便利で、Android Studio使っていたこともあり、とっつきやすいという点からGo縛りでGUIアプリケーションを考えたいと思います。 lxn/walk Windows application library kit for Go. Windows向けしか考えていないので、まずこのライブラリなのですが、ボタンやコンボボックスが思ったように並ばなかったり、手軽にイメージボタンを配置したりなど、簡単にレイアウトを変更できない課題に直面しました。レイアウト作成だけで時間を取られてしまいます。そう言えば、Androidアプリ開発のときは、XMLでデザイン部分を切り離してたのを思い出して、今回の調査の運びとなりました。 fyne-io/fyne Cross platform native GUIs designed for Go based on Material Design. Supports: Linux, macOS, Windows, BSD, iOS and Android. walkと比べると、クロスプラットフォームで作成できるのですが、こちらもコードの中にデザインを書いていく形でした。 therecipe/qt therecipe/qt allows you to write Qt applications entirely in Go or JavaScript. Qt Creatorなるものがあるようで、デザイン部分を切り離せる印象はあるものの、最新のPCでもビルドに時間がかかるようで、学習コストもかかるという記事を見かけて断念しました。 どうしたものかとツイートしましたら、下記のようにご助言をいただいた。 同じ課題に対し色々試した結果、PWAのフルキャッシュドに落ち着いた。中身はGo+WASMで。 https://t.co/e60whDTV16 — のぼのぼ📡 (@nobonobo) July 21, 2020 PWA 早速調べてみました。Googleが進めているプロジェクトで、ネイティブアプリのよ

Eclipseで一通り基本的なGitを使ってみる

備忘録的にまとめておきたいと思います。おかしな点があればご指摘いただければ幸いです。 目次 環境 プロジェクト作成~初コミットまで コミットの履歴&差分を見る 元に戻す ブランチについて ブランチを作成してみる ブランチを統合するには マージする Rebaseする ローカルリポジトリからプロジェクトを取り込む コミットしたメッセージの修正 環境 Eclipse IDE for Java Developers:Juno Service Release 1 Git:上記Eclipseのプリインストール版

Eclipseの高速化メモ

Eclipseが重いと一言に言っても、いろいろな工程での話があると思いますが、過去記事のなども含めてこの記事にピックアップしておきたいと思います。以下はWindows環境での話です。