メニューにマウスオーバーで効果音

こういうのです。

  • はなす
  • つよさ
  • そうび
  • じゅもん
  • どうぐ
  • さくせん
  • しらべる
SE:onoff
  1. まず、コード
  2. せつめい・スクリプト
  3. せつめい・スタイルシート
    1. 余談・pngも直接書ける
  4. せつめい・html
  5. 終わりって言うか、反省点

続きを読む(目次のリンクはこの先で有効になります)


ジャンル : コンピュータ
テーマ : ホームページ・ブログ制作

CLIP STUDIO ASSETSにアップしたやつ(まとめ)

いくつかアップしたものをこの記事にまとめることにしました。



  1. 買い物かご

  2. 包丁とまな板

  3. ハニカム_二色

  4. 棒点トーン

  5. 片手鍋

  6. 猫耳

  7. お箸を持つ手+お箸

  8. ハードカバー本

  9. 三角絞め

  10. お姉さん座り


続きを読む(目次のリンクはこの先で有効になります)


ジャンル : コンピュータ
テーマ : デザイン・イラスト・テンプレート

CLIP STUDIO ASSETSにアップしたやつ_包丁とまな板

https://assets.clip-studio.com/ja-jp/detail?id=1773488

包丁とまな板サムネイル

まな板は木目とプラスチックが選べますよ。
毎度のことですが、意味があるかどうかは分かりません……。

もしかして、素材をアップするごとに記事書くんじゃなくて、1つの記事にまとめて更新していけばいい感じですか?
【2020年05月19日追記】
というわけで、まとめた記事を作りました。
CLIP STUDIO ASSETSにアップしたやつ(まとめ)


ジャンル : コンピュータ
テーマ : デザイン・イラスト・テンプレート

アニメーションgifをjavascriptで制御

無限ループしないアニメーションgifをブログとかに貼り付けて、閲覧者がクリックすることによって再読み込みさせる方法を調べたよ。
こういうの。

しずちゃん「はて?」

基本的に

画像にonclick属性を指定して、単に同じURLを読み込ませるだけじゃダメみたい。
キャッシュの関係で、アニメーションが終わったところで表示され直すだけだから。
なので、再読み込みするときの画像URLに、適当なクエリ文字列をつけるといいんだって。
クエリ文字列って、よくブラウザのアドレスバーに「?○○=△△」とか表示されてるアレ。
これをつけることによって、さっきの画像とは別物として認識するから、キャッシュを使わないって事なんだろうね。
クリックするたびに違うクエリ文字列を追加したいので、DateオブジェクトgetTime()メソッドを使うといいわけだ。

一応動くけど、ちょっと問題が

上を踏まえて一番簡単に書くとこう。



終了画面? 閲覧者に、「クリックするともう一回再生されるよ」ってことをわかってもらう部分は、gifの最後のフレームに作っとけばいいかなと。

1回目も自動再生させたくないなら、最初に表示させておく静止画像を用意しておいて、さっきのスクリプトに画像URLを入れ替える部分を付け足すといい。



サムネイルのURL「_文字列.拡張子(+ あれば、クエリ文字列)」の部分を「_文字列.gif」と入れ替えてる。
ファイルの命名規則をいつも同じにしとけば、スクリプト部分はコピペでいけるね。
今回はサムネイルを「hoge_thumb.png」、アニメーションgifを「hoge_play.gif」にしてあるよ。

で、一応動くことは動くんだけど、webに上げた画像を再読み込みすると、やりとりのプロセスのせいなのか、アニメーションが数ミリ秒? とにかくほんの少し再生されたあと、もう1回最初に戻って再生され直しちゃうの。
ハプニング動画で同じところをきゅっきゅきゅっきゅ再生するみたいな感じ。
これを解決したい。

親要素を作って、そっちにスクリプトを指定する

色々やってみたところ、画像を親要素で囲って、img要素自体を新しく作って置き換えると上手くいくっぽいことが分かった。
とりあえず私が確認した限りでは上手くいった。
なのでこういう感じに。


親要素の高さを指定してるのは、それしないと、クリックした瞬間、中身が一瞬なくなるので、高さが0になってあとの要素が詰まってきちゃうから。

ライブラリにしておくといいのかも

コピペでいけるとは言っても、毎度onclick属性にこんな長い値を入れていいんだろうかとも思ってしまう……。
ライブラリにするって言うなら、もっとちゃんと便利に作られてるやつがいくつかあるようなので、それを利用するのもいい……のかな……。
それらはもう、再生ボタンとかも自動でつけてくれるみたいだし。
う~ん……時と場合によるか。



ジャンル : コンピュータ
テーマ : ホームページ・ブログ制作

共有プラグイン「開閉式カテゴリ一覧」

共有プラグイン「開閉式カテゴリ一覧」サムネイル
共有プラグイン「開閉式カテゴリ一覧」DLページ
これも結構前に申請して、サイレント承認されてたので全く気がつきませんでした……。


開閉式メニューをhtmlで使うとなると、details要素summary要素を使うのが一番簡単です。
が、以前の私の記事「cssで開閉式メニュー」でも書いたとおり、IEは未対応です(呪われたらいいのに……)。
MicrosoftEdgeは、2020年はじめに正式なものとなって、detailsにも対応したんですけれど。
IEはもう廃れゆくアプリケーションなので気にしなきゃいいと言えばいいんですが、さっき触れた私の過去記事のやり方でもできるなってことでこれを作りました。
htmlのinput type="checkbox"と、スタイルシートの:checked疑似クラスで表示非表示を切り替えています。


今私のブログではsummary要素details要素を使っています。
書き直すのがめんどくさかったので……。



ジャンル : コンピュータ
テーマ : ホームページ・ブログ制作

ステータス
細野ゆとり
あそびにん
せいべつおんな
レベル
ちから
すばやさ
こうげき力
しゅび力
EX
最新記事
カテゴリー
月別アーカイブ
全記事表示リンク

全ての記事を表示する

おえかき
ブログ内ページランキング
twitter
その他SNS
検索フォーム
オンラインカウンター
現在の閲覧者数:
カレンダー
05 | 2020/06 | 07
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 - - - -
リンク
カウンター
RSSリンクの表示
QRコード
QR