テーマによって若干の表記違いがあれば、そこは補完して読んでくださいね。
「ScrollHint」、JavaScriptライブラリであり、その名の通り、はみ出た表に対してスクロールできますというヒントを与えるものだ。
便利だ。そしてカッコイイ。
ScrollHintを入れたい・・でも私には無理だった
しかし。私には導入する方法がわからなかった。WordPressのプラグインには存在しないようですし。
（公式サイトや他サイトでの案内を参考に、cssとjsファイルをサーバーの子テーマフォルダ内、CSSとJSフォルダにそれぞれアップロードし、fuinction.phpに追記することはしたが、動かすことができなかった・・）（実力不足）
コピペすりゃイケるというページにも出会ったが、要素名が自分で付けたものではないので掴み切れない。
（要素名を自分でリネームすればいいだけなのだがやる気が起きなかった）
普通にコピペすればイケるはずなので、ぐう有能サイトであるだろう。
https://ponhiro.com/fixed-scroll-table/#toc9
面倒くさがりだからよ、「普通に表を挿入したら、スクロールできますって入れたい」のよ。
CSSでScrollHintもどきを入れる方法を探す
悔しくなり、それじゃあ私がCSSでモドキを作ってやろうじゃねえか！と思ったわけ。（悔しく思うところじゃない）
逆張りで面倒くさいオタクなので、妙なところで力入れちゃうのよ🥺。
さて、方法は～・・・、調べた末に、すでに存在していることがわかった。
☨神よ・・☨
https://karaagebow.com/archives/13682（コンテンツの提供元）
https://www.wotablog.com/scroll_table/（内容をカスタマイズした人）
チョーシに乗ったので、「それをさらにカスタマイズしちゃおう」じゃないの。
結果、四苦八苦――。
（学が無く、勉強嫌いな奴（最悪）が挑むことじゃないなっていつも思うわ・・）
やりたかったこと（オリジナル版と比較して）
① 上下の真ん中に「スクロールできます」文字を表示させたい 〇
② 表にオンマウスで文字が消えるようにしたい 〇
③ ふわーって消えるアニメーションに変更したい 〇
④ 「←☝→」みたいな感じで記号文字を入れたい ×
★CSSカスタマイズ内容の公開（忙しい人はこれだけ読んでください）
「Urvanov Syntax Highlighter」を使うぜ～！ノリノリだぜ～！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/* スクロールできますの表示 */ @media screen{ .tableScroll:before { white-space: pre; white-space: pre-wrap; content: 'スクロールできます >>>'; font-size:120%; font-weight:800; color:#597bea; background-color:#f5f5f5; padding: 2% 5%; border-radius:10px; position: sticky; top:50%; left: 20%; transition: 1.5s; } } .tableScroll:hover:before { opacity:0; visibility:hidden; } /* スクロールできますの表示 ここまで */ |
オリジナル版からの変更点
| .tableScroll:before 項目 | |
| @media screenの(max-width : 480px) を廃止 | |
| white-space: pre-wrap;（content内容に空白をいくらでも追加できる、/Aで改行追加できる） を追加 | 後述する |
| font-size:120%; に変更 |
|
| top: 50%; を追加 left: 20%; に変更 |
①上下の真ん中に「スクロールできます」文字を表示させたいの達成 |
| color:#597bea;（文字色） に変更 background-color:#f5f5f5; （背景色） padding: 2% 5%;（内側余白 縦2％、横5％） border-radius:10px;（四隅の角丸） を追加 |
好みで変更してください。 |
| アニメーション内容の変更。 yokoSC（オリジナル名のアニメーション。回数無限でゆっくり点滅する）→ .tableScroll:hover:before（表にオンカーソル時に効果を発現） |
③ふわーって消えるアニメーションに変更したいの達成 |
| transition: 1.5s; の追加 | |
| .tableScroll:hover:before 項目 | |
| opacity: 0; （不透明度0%＝透明）の追加 | ドヤ顔で後述する |
| visibility:hidden; （不可視）の追加 |
これだけかよ・・・・。これだけだよ。
表のはみだしを防ぐスマホテーブル横スクロールツール（紹介）
そう。「THE THOR」ならね。
その他諸々の話
「css content 文字 改行」で検索
残念ながら敵わなかった。（フツーにそれっぽい画像を作って入れなさいよ・・）
CSSの疑似要素は面白いことができるので、歯ごたえがありますよね～。