カーソル合わせたらその説明が吹き出しで現れるToopTipというものがありますが、その性質上スマホやスクリーンリーダーと相性が悪かったのですがクリック式にする事で解決したものをHTMLとCSSだけで作ってみました。
https://uda2.com/testbox/tooltip.html
一般的なツールチップと同じくリンク文字にホバーしたら開閉します。
アイコンをクリックするとトグル式で開閉します。
※上のサンプルはHTMLやCSS（アイコンも含む）をしょうよう個人問わず勝手に使ってOKです。
WordPressをCMS（更新システム）代わりに使ってる企業サイトが多くある。
その更新作業で画像を掲載するときは、数年前まではデジカメで撮影した画像をSDカード等を使ってパソコンにコピーして「藤 -Resizer-」なんかの簡易画像編集ソフトで縮小し、WEBブラウザでWordPressにログインしてアップロードという手順だったが、最近はスマホ一つで画像のアップが可能になった。
ただ、そのままアップすると容量が大きすぎたり顔色が悪かったりするだけで無く、不要な情報（位置情報やサムネイル）も公開してしまい住所がバレたり、モザイクが外されたりするという危険もあります。
そこでスマホからスマートに安全にアップする手順を解説しようと思います。
(さらに…)
「Retina時代のスマホサイトのタイトルロゴはSVGがいい」と何処かに書いていたので作ってみた。
元画像はマイリリースのスマホ版トップのロゴ画像で元は480×109で作成して、iPhoneだと縦(320px)にも横(480px)にも使える様にしてる。
元々FireWorksで作成していたのでJPEG・PNGはRetinaテスト用に倍の解像度に変更しするだけで済んだが、SVGはFireWorksが未対応だったのでイラレに書き出し作り直した上でエディタでフィルタを追加したりと微調整した。
よくやる2倍サイズのJPEG画像（23.70KB）
モヤモヤが出るので今回の様なロゴ画像には向かないJPEGだけどRetinaだとそんなに問題無さそう、グラデの掛かった画像の圧縮率は魅力的
よくやる2倍サイズのPNG画像（39.88KB）
RetinaだとJPEGと画質は分らないし容量も大きい、グラデーションが無ければ色数を落として圧縮率を上げる事も出来るかも
SVG画像（8.85KB）
予想以上に低容量、SVGは表示が重いらしいがこのサイズだと差は分らない。
safariだとfilterが上手く動かないのかドロップシャドーが効かないみたいで昔のイラレみたいに手作業で追加する必要があり、容量も若干増える事になってしまう。