なんだか久しぶりに CSS でハマった…。
やりたかったことは、画像の一部を表示させたものを並べて、マウスオーバーすると画像全体が表示されるってやつ。
html は <ul> でリストを作り、<li> の中に <div> で囲んだ <img> と画像のタイトルが入ってるよくありがちなモノ。
CSS では <li> を float し、<div> に width・height 指定して overflow:hidden; にしておいて、マウスオーバーしたら overflow: visible; みたいな。
ふつーにリストで表示する際には特に問題なかったんですが、画像の一部を表示するのにだいぶ手こずって…。
なのでメモ代わりに。
最近ちょくちょくいろんなサイトで見かける仕掛け。
基本は固定表示で、スクロールすると追従するってやつ。
自分もオシャレの一環として（？）←にあるSNSボタンに適用してみました。
見ての通り、記事が書かれている範囲のみスクロールに追従するようになっております。
当初、やり方はちょちょっと調べればすぐ分かるだろうと余裕こいてたら、紹介されてるのがだいたいスクロールすると無限に追従する系で、一定範囲となるとプラグインを使用したり、追加機能や事細かに指定してたりと「単純かつシンプルに一定範囲だけ追従させたい」自分としてはイマイチあわないということで考えてみました。
もし、このやり方が合うサイトを制作してる方がおりましたら、ご参考ください。
ただし、自分の文才がない＋説明ベタな箇所が多数あるので、そこは想像をふくらませてご対応ください。
先日、ちゃっかりテンプレートをレスポンシブにしてスマートフォン表示にもとりあえず対応した今日このごろ。
width を100％にした時には box-sizing が便利です。
それはさておき、Wordpress で画像付きで記事を投稿する際は [新規投稿]→[メディアを追加] 後にそのままビジュアルエディタを使用して書いてるんだと思います。
ですが、自分の場合 fc2 ブログだった頃から、画像があってもなくても html に特化したテキストエディタを使用し、<p> とか <br> とかのタグを手打ち入力（←エディタの機能により半自動）しつつ記事を書いてたりします。
画像を挿入する場合は、画像をアップロード後に URL をコピーして src にペースト。みたいな。
fc2 ブログの場合、アップロードされたファイル一覧部分に URL が表示されているのですが、Wordpress の場合は編集画面に行かないとURLが表示されない。
しかも、アップロードした時に自動で作成される縮小画像が fc2 の場合『ファイル名s.jpg』と『s』が付くだけだったのが、Wordpress だと『ファイル名-横サイズx縦サイズ.jpg』となんともめんどくさいわかりずらい感じ。
こりゃイカんでしょ。と言うことで、メディアライブラリの一覧部分に URL を表示することにしました。
イロイロ変更してたので、新しく書き直しました
https://webruary.net/web/2020-11-04/stylus-resultnum/
数年前に旧ブログで『GreasemonkeyでYahoo!・Google・bingの検索結果に順位表示。』ってのを書いてましたが、実はこちら、その後の検索サイト側の仕様変更などにより使えないのもあったりします。
で、自分はちゃっかり他のスクリプトに変更したり、Yahoo! に至っては Stylish を使って対応してたりしました。
話は代わり、昨日 Firefox をクリーンに再インストール。
パソコンが変わった時とか OS 再インストールした時等、いつもは『MozBackup』を使ってましたが、今まで about:config でイロイロいじった上に、古いバージョンからアップデート続きのバックアップファイルからの復元だったので、なんとなくスッキリしたくて MozBackup の復元を使用せず、再インストール後はほぼ手動で復元しました。
そこで、手動ついでにイロイロ整理してる中、実は Greasemonkey で使ってるスクリプトは Google と bing の検索結果に順位を表示するのみだったので、じゃぁ、Greasemonkey やめてこっちも Stylish でやっちゃえばいんじゃないかな？みたいな。