- 2025-08-16
- 0件
【プラグイン不要】WordPressで「パラパラ漫画風」連続画像を表示する方法
動画⇩https://youtu.be/vVcYz0px_pY 医療現場では、CTやMRI画像をスライス設定して、アキシャル(軸位像)・サジタル(矢状断)・コロナル(冠状断面)など、さまざまな方向から連続画像を観察します。 しかし、インターネット上で公開されている医療画像は、病変部だけを切り取った1 […]
動画⇩https://youtu.be/vVcYz0px_pY 医療現場では、CTやMRI画像をスライス設定して、アキシャル(軸位像)・サジタル(矢状断)・コロナル(冠状断面)など、さまざまな方向から連続画像を観察します。 しかし、インターネット上で公開されている医療画像は、病変部だけを切り取った1 […]
パラパラ漫画の自動作成ツールを作成していましたが、諦めたことをご報告いたします。 〇HTMLで入力欄やチェックボックスを作成、自動作成ツールを試みる。 自動作成ツールの最終的なHTMLになります。 <!DOCTYPE html> <html> <head> < […]
パラパラ漫画のHTMLを自動で作成することができるページの作成を試みています。 CSSを追記する CSSを追記しない 画像の枚数: jsとCSSの読み込みのパス: パラパラ漫画の表紙のパス: パラパラ漫画の画像のパス: パラパラ漫画のHTML作成 &l […]
変数を宣言する際に以前はvarを使用していましたが、JavaScriptのバージョンアップに伴って、今後はは「let」または「const」になっていくと聞いたことがあったので、「var」は使用しないようにしていました。 ですが、パラパラマンガを作成する過程で変数宣言の「var」は必要不可欠であったお […]
前回は パラパラ漫画にスクロールバーを設置しました。 今回は画像に拡大や縮小と画像移動の機能を追加させました。 参考サイトは以下になります。〇imgViewer2.jsを使って画像の拡大縮小機能を実装する【マウスホイール・拡縮ボタン】 完成コードは以下になります。 「imgViewer2」を使用する […]
前回は jQuery の環境構築についてお話ししました。 〇【JQuery入門】環境構築の方法。 「jQuery」はJavaScript初心者が高度な処理を行うための必須スキルだと思います。 今回はスライドバーを設置して、スライドを動かすと画像がめくれるように実装しました。 完成コードは以下になりま […]
jQueryはJavaScriptのライブラリです。 ライブラリを導入することで、初心者でも簡単に高度な処理が行うことができるようになります。 ①「Jquery」のダウンロードページを開きます。 〇Jquery ②「Download jQuery」をクリックします。 ③「Download the […]
前回までのパラパラ漫画作成シリーズは以下のようになります。〇【ワードプレス】JavaScriptを使用してボタンをクリックするとポップアップを表示させる。〇【ワードプレス】JavaScriptの正しい書き方は?〇【ワードプレス】JavaScriptでページをコマ送り・戻りさせた。〇【JavaScri […]
前回は一つのボタンでパラパラマンガの再生と停止をできるように実装しました。 〇【JavaScript】1つのボタンでパラパラ漫画の再生/停止をやってみた。 今回はJavaScriptのイベントである「touchmove」や「wheel」イベントを使用する場合の必須の知識をご紹介します。 例えば、以下 […]
前回はパラパラ漫画で必須の写真のコマ送りを実装しました。 〇【ワードプレス】JavaScriptを使用してページをコマ送り・戻りさせた。 今回は一つのボタンでパラパラ漫画の再生と停止を行いたいと思います。 以下のコードは作成途中で書いていたコードです。 スクリプトタグ内のコードは以下になります。 / […]
前回はJavascriptの書き方について話しました。 〇【ワードプレス】JavaScriptの正しい書き方は? 今回は、写真をコマ送り・戻りするプログラムを書きました。 実行結果 sample1 ▶ ◀ <script>タグの中身は以下になります。 let […]
前回の記事でワードプレスのブログでJavaScriptを動作させてみました。 〇【ワードプレス】JavaScriptを使用してボタンをクリックするとポップアップを表示させる。 しかし、これではjavascript のコードが長くなれば、見ずらいコードになります。 そこで、HTML内にスクリプトタグを […]
完成コード 実行結果 クリックしてください 解説 HTMLの<button>タグを使用して、「クリックしてください」というボタンを作成しました。 「onclick属性」を使用しています。 onclick属性は、要素がクリックされた際に発生するイベントの処理を設定するための属性です。属性値 […]