ホームページビルダー18になってから、jQueryフォトモーションが搭載され、FlashがなくてもFlash風のスライドが実現できるようになりました。
実例
https://pcmanabu.com/20140118blog/
今回は、幅480px、高さ300pxにさせて頂きました。大切なことは、普段は、480pxにすることです。
しかも、480pxよりも狭いスマートフォンなどで見ると、大きさに合わせて小さくなるように制御することです。
今までは、Flashで実現していたため、iOS系とAndroid系は、見ることができませんでしたが、jQueryフォトモーションを使うことによって、どの端末でもスライドショーを参照できます。
なぜか、jQueryフォトモーションは、横幅の最大値の指定がありません。しかも普通の画像と違って、最大の大きさで表示しようと努力をします。例えば、幅が1024pxであれば。1024pxで表示するため、間延び間のある画像になります。
×駄目な例
https://pcmanabu.com/ng20140118/
どこまでも大きくなり、まのび感がでる。
作り方(事前準備)
素材を2枚準備します。以下の２枚をそのまま使ってください。デスクトップにドラッグし、コピーします。
操作方法
「新規作成」をクリックします。
「白紙から作成する」をクリックします。
「フォトモーション(スライドショー)」をクリック
画像をドラッグします。
「次へ」をクリック
「カスタム設定」をクリック
ここは、変更しなくても大丈夫。「OK」ボタンで戻る。
「完了」ボタンを押す。
現在は、駄目な状態であることを確認する。
ブラウザーが起動し、間延びしていることがわかる
480px以上、大きくならないようにする
今回は、画像が横480pxのため、これ以上大きくならないようにします。
max-widthとは、横幅の最大値です。これで、480px以上大きくなりません。
最後の確認
まとめ
HTMLとCSSの知識がないと厳しいかと思います。知識を得たい方は、Webクリエイターの勉強をすると良いと思います。私も資格を持っています。Webクリエイター能力認定試験とは(https://pcmanabu.com/?p=4574)
学生人や転職する人には良いのですが、社会人であれば、以下のような本を一度勉強すると良いでしょう。
スマートフォンで表示させるには、さらにCSS3の知識が必要です。
 |
HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。赤間 公太郎,原 一宣。 エムディエヌコーポレーション 2013-09-20 売り上げランキング : 27909
|
関連URL
マイクロソフト認定トレーナー。専業ブロガーになり1年経過(別名:ひきごもり)。ブロガーなのに誤字脱字王。滑舌が悪いのにYouTuber。『自己紹介』