https://uda2.com/testbox/tooltip.html

一般的なツールチップと同じくリンク文字にホバーしたら開閉します。
アイコンをクリックするとトグル式で開閉します。
※上のサンプルはHTMLやCSS（アイコンも含む）をしょうよう個人問わず勝手に使ってOKです。

まず、「そういえばツールチップってアクセシビリティ的に使えないよなー」と思って検索してたら。
クリックで表示させる方法の比較について書かれてたツイートを見かけたのですが、ホバー式のメリットに「cssだけで作ることができる」と書かれてたのに触発され「今ならクリック式も出来そうやな」とやってみた。

label.htooltip {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23F00;stroke-width:0px;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class=%22cls-1%22 points=%228.02 16 5.98 12.96 10.06 12.96 8.02 16%22/%3E%3Cpath class=%22cls-1%22 d=%22M14.7,0H1.3C.58,0,0,.58,0,1.3v10.4c0,.72.58,1.3,1.3,1.3h13.4c.72,0,1.3-.58,1.3-1.3V1.3c0-.72-.58-1.3-1.3-1.3ZM13.1,5.76l-1.25,1.25-.03-.03c-.21.06-.65-.13-1.18-.52l-1.69,3.87h0s0,0,0,0c-.25.25-1.12-.22-2.1-1.06l-2.45,1.69s-.19-.06-.34-.21c-.15-.15-.24-.3-.21-.34l1.69-2.45c-.84-.98-1.31-1.85-1.06-2.1,0,0,0,0,.01,0h0s3.87-1.7,3.87-1.7c-.39-.53-.58-.97-.52-1.18l-.03-.03,1.25-1.25c.26-.26,1.38.43,2.5,1.55,1.12,1.12,1.81,2.24,1.55,2.5Z%22/%3E%3C/svg%3E") center center no-repeat;
    background-size: contain;
    filter: saturate(0%);
}
label.htooltip:has(input[type="checkbox"]:checked) {
    filter: saturate(100%);
}
label.htooltip p,
label.htooltip p::before {
    position: absolute;
    left: 50%;
    display: block;
    background-color: #212121;
}
label.htooltip p {
    margin: 0;
    padding: 7px;
    font-size: 12px;
    line-height: 1.2em;
    color: #fff;
    border-radius: 3px;
    width: 100px;
    bottom: calc(100% + 10px);
    box-sizing: border-box;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translate(-50%, 10px);
    transition: transform .3s ease-in-out,opacity .3s ease-in-out;
    pointer-events: none;
}
label.htooltip p::before {
    content: "";
    bottom: -10px;
    width: 14px;
    height: 10px;
    clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
    transform: translate(-50%, 0);
}
label.htooltip>input[type="checkbox"] {
    display: none;
}
label.htooltip {
    opacity: 1;
}
label.htooltip:has(input[type="checkbox"]:checked) p {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}
@media (hover: hover) or (pointer: fine) {
    label.htooltip:hover {
        filter: saturate(100%);
    }
    label.htooltip:has(input[type="checkbox"]:checked):hover {
        opacity: 0.8;
    }
    a:hover+label.htooltip p,
    label.htooltip:hover p {
        transform: translate(-50%, 0);
        opacity: 1;
        pointer-events: auto;
    }
}

<a href="https://uda2.com/blog/css_tooltip/">リンクテキスト</a>
<label class="htooltip" aria-label="ツールチップ"><input type="checkbox"><p>ここにツールチップの内容を書く</p></label>

設置はソースのCSSをコピペした上で、ToolTipを付けたいリンクのタグのそばに「<label class=”htooltip” aria-label=”ツールチップ”><input type=”checkbox”><p>ここにツールチップの内容を書く</p></label>」と書いてください。
近くに複数のリンクがある場合は各リンクとlabelのセットを何かしらで括ってください。

一般的なツールチップと同じくリンク文字にホバーしたら開閉します。
アイコンをクリックするとトグル式で開閉します。

ホバーのアクションを入れるとスマホでの挙動がおかしくなるのでメディアクエリ「@media (hover: hover) or (pointer: fine)」でパソコンでのみホバーアクションをするようにしています。

アクセシビリティにも配慮する為にvisibility:hidden;を使わずに「opacity: 0;」と「pointer-events: none;」で隠しています。
これでブラウザ上からは消えるけどスクリーンリーダーでは読めるという状態になります。

写真の撮影テクニックを持ってる人ならスマホでも十分な写真が撮影出来るが、普通の人は運任せで残念な写真になってしまう事もある。そんな時は写真を補正したいがこれもスキルが必要となってしまう。
撮影テクニックはどうしようも無いので写真補正スキルが無くても簡単に補正できる自動補正の機能を使う事にする。

iPhoneの「写真」アプリにも自動補正が付いているが微妙に修正するだけで訳に立たない場合が多いので、写真補正にかけては老舗のAdobe社が提供してるAdobe Photoshop Expressというアプリを使う。基本的に無料な上にiPhone、AndroidだけでなくWindows Phoneにまで対応してる。
起動したら入会してと言われるが入会する必要は無いので下の方の後でを押して
「Open from Camera Roll」で先ほど撮影した写真を選択する。
上部の中央にある魔法の杖のアイコンを押し自動補正をする。
問題無ければ右上のボタンを押し「Save to Camera Roll」を押す。
するとカメラロールに別名保存される。

次に画像のリサイズとアップロードだがWordPressは専用のアプリWordPressを用意してくれていてこれを使うと、リサイズとEXIF（写真の撮影場所やサムネイル等）情報の削除を自動で行ってくれる。
今回の画像だと元画像が2448×3264pxの2.14MBだったのが900×1200pxの0.36MBにダイエットされてる。

まず、アプリWordPressにブログの設定情報を入力する必要がある。アプリをインストールし起動したらログイン情報を入力する画面になるがWordPress.com用の入力画面になってるので、下部の「インストール型サイトを追加」をタップするとサイトアドレスの項目が追加されます。必要項目を入力し「サイトを追加」を押し問題無ければブログが登録されます。

次に画像サイズの設定をします。右上の設定からメディアの「アップロードできる最大の画像サイズ」を適当なものにする終わったら完了をタップする。

これで準備は完了したので画像アップの作業をしてみる事にする。
まずはアップしたいブログ名をタップしブログのメニュー画面を表示する。
そのまま「投稿」をタップし、右上の「＋」をタップして新しい記事を作成する。
そして右下のアイコンをタップし、先ほどカメラロールに入れた画像を選択し「Done」をタップすると画像が縮小しEXIFを削除しアップロードし記事に投稿される。

ただこのWordPressというアプリは記事を本格的に書くには機能が少ないので、きっちり作ろうとするとブラウザ版の管理画面に切り替えて作業をする事になる。（ブログのメニューの「管理画面表示」で切り替わる）個人的にはスマホで記事を書くのは苦手なので、投稿した記事を削除し（記事は削除しても画像は残ってる）パソコンで改めて記事を書いて画像を張り直している。

「Retina時代のスマホサイトのタイトルロゴはSVGがいい」と何処かに書いていたので作ってみた。
元画像はマイリリースのスマホ版トップのロゴ画像で元は480×109で作成して、iPhoneだと縦(320px)にも横(480px)にも使える様にしてる。

元々FireWorksで作成していたのでJPEG・PNGはRetinaテスト用に倍の解像度に変更しするだけで済んだが、SVGはFireWorksが未対応だったのでイラレに書き出し作り直した上でエディタでフィルタを追加したりと微調整した。

safariだとfilterが上手く動かないのかドロップシャドーが効かないみたいで昔のイラレみたいに手作業で追加する必要があり、容量も若干増える事になってしまう。