Please reload or enable CSS.

土俵裏日誌

黒糖丸部屋スタッフの日記

個人サイトWebオンリー めぐる市に参加して

個人サイトWebオンリー めぐる市に参加して

めぐる市を経由して、たくさんの方に訪問やコメントをいただき、とても嬉しかったです。

参加するかどうか迷っていたのですが、
ビーバーのことを知らなかった方やビーバーが好きな方からコメントまでいただけて、
参加して本当に良かったと思っています。

普段はSEO対策をほとんどしていないこともあって、アクセスが0人の日も多いので、
こうしてリアクションをいただける機会がとても新鮮でした。
これをきっかけに、少しずつリアクションしやすいサイト作りもしていけたらと思っています。

住んでいる地域にビーバーに会える動物園がないので、
なかなか直接会えない分、熱意だけで書き続けているサイトです。

情報をまとめることはできても、自分だけの体験や気持ちをうまく言葉にして織り交ぜることがなかなかできていなくて、
「情報サイトになってしまっているかな」と気になっていました。

それだけに、今回ビーバーへの気持ちが伝わっていたと感じられたことが、素直にとても嬉しかったです。
そして、もっと自分の言葉でビーバーのことを書いていきたいなという気持ちもあります。

書きたいネタは頭の中にいろいろあるのですが、
なかなかうまく形にできなくて、アウトプットが少ないのが悩みです。
少しずつでも表現していけたらいいなと思っています。

最後に、アクセスしてくださった皆さん、ありがとうございました。
これからもよろしくお願いします。

20260607201634-biba7.png
▲自演で絵文字を1個押してるけどキリがいい数字なので見逃してください(;'-' )

個人サイトWebオンリー めぐる市に参加します。

個人サイトWebオンリー めぐる市に参加します。

ピクリエで6月6日~6月7日開催される
個人サイトのオンラインイベントに参加します。
https://picrea.jp/event/a306c73ff0f8e27b...

暑さでダウンしていて、ようやくサークルカットを作れました(・ω・; A)

イベントまでにコンテンツも作りたいと思っています。
よろしくお願いします。

20260530014820-biba7.png

アクセス数100突破ヽ(^▽^)ノ

アクセス数100突破ヽ(^▽^)ノ

100人目のアクセスは……
素通りでした

急激なアクセス増加に喜んでいたところ、
そのうちの40件ほどは古いバージョンのChromeを装った
偽装クローラーであることが判明しました。
ネット上のIPアドレスに対して、総当たりでアクセスを試みているようです。

クローラーはカウント対象から除外するように設定していますが、
こういった偽装クローラーの対策は難しく、
今後もこうしたクローラーとの戦いは、いたちごっこになることが予想されます。

キリ番についても、クローラーによるものではないかと疑わしい状況です。
次にキリ番を踏まれた方は、ぜひコメントを残していただけると嬉しいです。

(<●>ω<●>)

#キリ番

iOSでヘッダーメニューが開かないバグに対応しました。

iOSでヘッダーメニューが開かないバグに対応しました。

色々と問題が多くて大変でした。
PCでは問題なく動いていたため、iPhone実機で確認した際に気がつきました。
Android端末では動作確認ができていないため、他にも表示の不具合があるかもしれません。
お気づきの際は教えていただけると助かります。

以下メモ

① overflow: auto の中で position: fixed が壊れる
普通のブラウザなら position: fixed は常にviewport基準で固定されるはずなのに、
iOSだと overflow: auto/scroll の親があると「その親の中」で動いてしまう。

.menu-box に overflow-x: auto(横スクロール用)があった。
iOS Safariには「overflow: auto の中にある position: fixed は
viewportじゃなくてその親要素基準で動く」というバグがある。
なのでドロップダウンが画面に固定されず、
overflow コンテナの外に出たところで、はみ出た部分が切り取られて見えなくなっていた。

→ 解決策: ドロップダウンを<body> 直下に動的に生成することで、overflow の外に出した。

② <label> 要素のクリックイベントが発火しない
チェックボックストグルの仕組みで使っていた <label> が、
iOSではインタラクティブ扱いされないことがある。
onclick="" を付けるハックで回避できることもあるが不安定。

→ 解決策: <label> → <button> に変えた。
<button> はiOSが「インタラクティブ要素」と認識するので確実にクリックが発火する。
<label> はフォーム要素と関連付けられていない場合、iOSでは「ただのテキスト」扱いになることがある。

③ <summary> に display: block/flex を設定するとトグルが壊れる
<summary>は本来 display: list-item という特殊な表示形式になってる。
それを block や flex で上書きすると、Safariが「開閉機能のある要素」として認識するのをやめてしまう。
ChromeやFirefoxは多少上書きしても大丈夫なことが多いんだけど、Safariだけ厳格。

→ 解決策:<button> + JS でトグルにして <details> を使わないことにした。

#CSS
ページ上部へ
-->