こなさんみんばんわ。
そんな訳で、Zenback がサービスを終了するというので1そのウィジェットを外して以降、このサイト上から消滅していた各種の SNS や Web サービスにアクションを起こす用のボタン、いわゆる SNS シェアボタン（とざっくり呼ばれているもの）を何年かぶりに復活させてみました。各ブログ記事の本文が終わった後に配置してあります。これで少しはシェアしやすくなったでしょうかね。知らんけど。
ボタンはすべて、各サービスの公式が公開しているタグを貼るだけのやつではなく、自前で実装しております。アイコンはインライン SVG だし JavaScript は一切使用してないので軽いのがウリ。シェアされた数? あんなもんは自己満足じゃ🤣
という訳でみなさん、よかったら下の方にあるボタンで試しにこの記事をシェアしてみてくださいね。ではさいならー ﾉｼ
…と、これだけで終わるのも何なので😅 ここからは実装するにあたって考えたことや実際にやったことなどを、メモとして書き残しておこうと思います。いちおう 2025 年 1 月時点での最新情報ですから、これからこういうボタンを設置しようと思ってる方への参考にもなるかも、ということで。
考えたこと
対応する SNS・サービスの選定
今回付けたのは X（旧 Twitter）と Facebook の共有ボタン、はてなブックマークのボタン、Pocket に保存するボタンの計 4 つ。これくらい準備しとけば普通の人には事足りるんじゃないかなーというものだけを厳選したつもりです。
昨年 12 月 26 日のブログにも書いたとおり、基本的にはブラウザの拡張機能やアプリの機能などで好きにやってくださいというスタンスなので、例えば Mastodon や Bluesky を率先してやってるような IT リテラシーの高い方々は別にボタンがなくても自力でできるでしょうし、複数あるインスタンスなどへの対応を考えるのもめんど…大変なので、その辺は外しました。
あっ Threads がないのはそれとは関係なく、単にあのおすすめをデフォルトで表示してくる仕様が嫌いでアプリ削除してもう見てないからです😇
それ以外でよく置かれてるのだと LINE に送るボタンがありますが、これは別に記事の拡散にたいした効果はなさそうだし、個人的にもあまり必要性を感じないという理由で対応しておりません。
実装にあたってこだわったところ
たいしたことではないんですが、共有と保存は明確に区別しておこう、というのは考えました。
だいたいどんなブログでもこういう系統のボタンは一ヶ所にまとまってて「よかったらシェアしてください!」みたいな文言が付いてるというのが通例なんですが、何か色々入りすぎてて訳分からなくなってるのをたまに見かけるんですよね。例えば Feedly に登録とか RSS のアイコンとか…「節子それシェアちゃう」って僕はなります。
そこまでいかなくても、果たして Pocket とかはてブに登録する行為が「シェア」なのかと問われると、ちょっと微妙じゃないですか。そんなことない?
まぁ思わない人や気にしない人もいるとは思うので強くは言いませんが、とりあえず僕はこの 2 つに関しては「保存」として捉えた方がしっくりくる気がするので、並べはするけどセクションとラベルは別にしております。
実装に関するメモ
ボタンのリンク先 URL
2025 年 1 月現在、おおむね次のような感じでいいかと思います。
- X（旧 Twitter）
https://x.com/intent/post?url=[URL]&text=[TEXT]https://www.facebook.com/sharer/sharer.php?u=[URL]- はてなブックマーク
https://b.hatena.ne.jp/add?mode=confirm&url=[URL]https://getpocket.com/edit?url=[URL]
パラメーターはどれも一緒で [URL] には共有したいページの URL を、[TEXT] には共有する際に一緒に投稿したい任意のテキスト（通常はページのタイトルですかね）を設定します。どうやって設定するかは使ってるブログサービスやツールによって全然違うので、ここでは触れません。
あと [URL]・[TEXT] ともに、できれば URL エンコードしておいた方がより安全ではないかと思います。まぁしなくてもブラウザが良きに計らってくれるとは思いますが、とりあえず僕はそのままは何か嫌なので😅 エンコードする派です。
各サービスのアイコン素材
Pocket 以外は公式が配布しているブランドロゴの素材を使っています。それぞれのダウンロード元は以下にあります。
Pocket のロゴ素材も以前は公式の配布物があったようですが今はないようなので、サービスのログインページにある大きなロゴマークの SVG 画像を拝借しました。
Facebook とはてブの SVG は Affinity Photo で書き出し
X（旧 Twitter）と Pocket は元素材が SVG なのでいいのですが、Facebook のロゴは EPS 形式、はてなブックマークのロゴは Illustrator 形式でしかベクターデータが配布されてないので、何らかのアプリでこれらを開いて SVG で書き出す必要があります。僕はとりあえず Affinity Photo でやりました。
あとその過程の中で、はてブのロゴは青い角丸の背景を削除して B! の文字部分だけにしております。また色付けは Web サイトのスタイルシート側でコントロールしたいので、いずれの素材からも fill や style の属性は削除しました。
IcoMoon App で SVG スプライト化
そうやってできたアイコンの SVG 素材は IcoMoon App にアップロードして、他のアイコンと合わせて SVG スプライト化しました。IcoMoon は特にユーザー登録をしなくても使えるし、大量のアイコン・ライブラリーが無料で用意されており、自力で素材を作らなくても必要なアイコンはほぼ揃うので重宝しています。
やり方は全然難しくなくて、左上の Import Icons ボタンを押してローカルの SVG 素材をアップロードし、新しくできたアイコンセット（と、必要であれば任意のアイコン・ライブラリー）の中から使うものを選択したら左下の Generate SVG & More タブを押します。確認ページが開くので内容を見て、問題がなければあとは同じく左下に出てくる Download ボタンを押すだけ。
ダウンロードされた ZIP ファイルを解凍するとスプライト化された SVG ファイル (symbol-defs.svg) の他、各アイコン個別の SVG と PNG 素材、デモ用の HTML & CSS ファイル、さらには旧ブラウザ向けのポリフィル用 JavaScript ファイルまですべて揃っていますので、あとは自分が必要なものをピックアップして自由に使えばいいと思います。
マークアップとスタイリング
…は、全部事細かに書いても長くなるだけなので、興味のある方は勝手に開発者ツールなどで調べてください😅 あっソースコードは全部 GitHub に Public で置いてあります。
そんな訳で、キモとなる部分にだけ触れておこうかと思います。
要素の横並びは CSS Grid Layout
もう Baseline (Widely available) なので気兼ねなくガンガン使っております。clearfix とか使って float で段組してた時代の苦労が、今となっては懐かしいよね。涙
ひとつポイントだけ書いておくと、ウィンドウ幅によって見出しとボタンが縦並びと横並びで切り替わる部分がありますが、これはベースとして常に display: grid を掛けておいて、メディアクエリーでウィンドウ幅が 35em 以上になった場合にだけ grid-template-columns を設定することで横並びにしています。grid-template-columns がなければグリッド・アイテムは縦に積み上がるだけなので2これでいいのです。
@media (min-width: 35em) {
.reactions-section {
grid-template-columns: max-content 1fr;
align-items: center;
}
}
見出しの部分が max-content となるのがミソといえばミソですかね。これで内容に応じて幅が伸縮するので、あとで見出しテキストを変更したりアイコンを足したりするたびに CSS で幅調整する必要がなくなります。
アイコンのセンタリングは Flexbox
アイコン（svg 要素）の親である a 要素に次のようなスタイルを当てて上下左右の中央に寄せています。これも昔は苦労してやってたやつですね…ちなみに幅は親要素いっぱいになるので必要ないですが、高さは設定しないとアイコンの高さにしかならないので注意。
.share-link,
.save-link {
display: flex;
align-items: center;
justify-content: center;
height: 2.2em;
/* 以下省略 */
}
アイコンの色付けは CSS で
上の方で書いたとおり元の SVG 素材から色関係の属性を削除したので、そのままだと黒単色でしかアイコンが表示されませんが、これに関してはサイトのスタイルシート側で svg 要素に fill: currentColor を当てて、親要素の color プロパティで色を変更できるようにしています。まぁこれは以前から使っているスタイルですね。
と、大層に書いてますけど現状は単に白で塗りつぶしてるだけです。涙
その他
実装するにあたって気が付いたことや、新しく知ったことがいくつかありました。最近 Web 関係の動向を積極的に追ってなかったのがバレバレですね…
target="_blank" のリンクには rel="noopener" を付ける…の?
セキュリティ的な理由で付けておかないといけないらしいです…とたまたま読んだサイト（どこか忘れた）にそう書いてあったので付けましたが、さらによく調べてみると最近のブラウザはデフォルトでそう振る舞うようになっているので必要ないらしい…ようにも思えます。
もっというと今回のリンク先は全部超有名な SNS とかなので、隠れてコソコソ悪さをするとは到底思えないのですが😅 まぁ念のためということで当面そのまま付けておきます。
あと rel=noreferrer も付けた方がいいとも書いてあった気がしますが、その理由は古いブラウザ…というより IE のためらしく、今さら死んだブラウザのことを考える必要もなかろうということで付けてないです。
Google Fonts の CSS API が気付けば v2 になっていた
今回実装したボタン・セクションの大見出し部分のフォントに Google Fonts のフォント Lobster を使用したのですが、その過程で Google Fonts の CSS API がアップデートされて v2 になってたことを知りました。バリアブル・フォントに対応したらしいです。
エンドポイントが https://fonts.googleapis.com/css2 に変更になってる他、パラメータの書き方もけっこう変わってますね。
で、このサイトでも以前から Google Fonts を使ってましたので、導入ついでに合わせてエンドポイントを変更しましたが、そしたら今まで使ってたフォント (Source Sans Pro) が無くなってました…😭 ということで、同じフォントの可変フォント版である Source Sans 3 に変更しました。
font-size-adjust プロパティが Baseline に
上記に関連しての話ですが、昔は Firefox くらいしか対応してなくて使おうにも使えなかった font-size-adjust が、その後各ブラウザでの実装が進んで今は Baseline (Newly available) になってることを知りました。
Baseline 2024 なのでここ 1 年くらいのブラウザではってことだと思うんですが、別に効いてなくても問題ないといえば問題ない（文章が読めなくなる訳ではない）プロパティなので、気にせず使っていくことにしました。同じ理由でまだ baseline ではない text-wrap: balance も気にせず使っております。
.reactions-title {
font: 400 225%/1.3333 Lobster, Brush Script MT, cursive;
font-size-adjust: cap-height .748;
text-wrap: balance;
}
今のところここだけですね。デフォルトの ex-height じゃなくて cap-height に合わせるようにしたのは、単にその方がサイズの違和感がなかったというだけです。
ちょっとした TIPS
ちなみにフォントのエックス・ハイトやキャップ・ハイトなどの値を知りたい時には、適当な HTML ファイルに適当な div 要素を置いて、
- 調べたいフォントを
font-familyに指定 font-sizeを100pxに指定- 幅は適当に、
heightを1ex（エックス・ハイト）や1cap（キャップ・ハイト）に指定 - 背景色は適当に（入れておくと右クリックで開発者ツールを開くのに便利）
- ブラウザで HTML ファイルを表示
- 開発者ツールで
div要素の高さ（ピクセル値）を調べて 100 で割る
とかやればすぐに分かります。ただし Safari でやると整数値に丸め込まれてしまうので😅 Google Chrome か Firefox でやりましょう（この 2 つで微妙に数値は変わりますが、気にするほどの差ではないはず）。
以上、こんなところですかね。
そんな訳で
本日はこの Web サイトにいわゆる SNS シェアボタンを何年かぶりに復活させた話と、復活させるにあたって考えたことや実際にやった作業、また作業中に新たに知ったことや気が付いたことなどをまとめてみました。
とりあえず現時点ではこれで完成ですが、こういうのってちょくちょく仕様が変わったりするので、付けたら付けたでこの先ずっとベンダー側の仕様を追ってアップデートしていかないとダメなんですよね。それがめんど…大変なので、あんまり色々付けすぎてサービスの都合に振り回されるのが嫌だ、というのは少しあります。
まぁでも付けちゃったものは仕方がないので、がんばりますよ。
という訳でみなさん、よかったら下の方にあるボタンで試しにこの記事をシェアしてみてくださいね。ではさいならー ﾉｼ（リプライズ）