ホームページビルダー18 「jQueryフォトモーション」のサイズを指定する

ホームページビルダー18になってから、jQueryフォトモーションが搭載され、FlashがなくてもFlash風のスライドが実現できるようになりました。

実例

http://pcmanabu.com/20140118blog/

今回は、幅480px、高さ300pxにさせて頂きました。大切なことは、普段は、480pxにすることです。

20140117r40

しかも、480pxよりも狭いスマートフォンなどで見ると、大きさに合わせて小さくなるように制御することです。

20140117r41

今までは、Flashで実現していたため、iOS系とAndroid系は、見ることができませんでしたが、jQueryフォトモーションを使うことによって、どの端末でもスライドショーを参照できます。

なぜか、jQueryフォトモーションは、横幅の最大値の指定がありません。しかも普通の画像と違って、最大の大きさで表示しようと努力をします。例えば、幅が1024pxであれば。1024pxで表示するため、間延び間のある画像になります。

×駄目な例

http://pcmanabu.com/ng20140118/

どこまでも大きくなり、まのび感がでる。

20140117r43

作り方(事前準備)

素材を2枚準備します。以下の2枚をそのまま使ってください。デスクトップにドラッグし、コピーします。

20140117r30

20140117r31

操作方法

「新規作成」をクリックします。

20140117r32

「白紙から作成する」をクリックします。

20140117r33

「フォトモーション(スライドショー)」をクリック

20140117r34

画像をドラッグします。

20140117r35

「次へ」をクリック

20140117r36

「カスタム設定」をクリック

20140117r37

ここは、変更しなくても大丈夫。「OK」ボタンで戻る。

20140117r44

「完了」ボタンを押す。

20140117r39

現在は、駄目な状態であることを確認する。

20140117r45

ブラウザーが起動し、間延びしていることがわかる

20140117r43

480px以上、大きくならないようにする

今回は、画像が横480pxのため、これ以上大きくならないようにします。

max-widthとは、横幅の最大値です。これで、480px以上大きくなりません。

20140117r46

最後の確認

20140117r47

まとめ

HTMLとCSSの知識がないと厳しいかと思います。知識を得たい方は、Webクリエイターの勉強をすると良いと思います。私も資格を持っています。Webクリエイター能力認定試験とは(http://pcmanabu.com/?p=4574)

学生人や転職する人には良いのですが、社会人であれば、以下のような本を一度勉強すると良いでしょう。

スマートフォンで表示させるには、さらにCSS3の知識が必要です。

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。赤間 公太郎,原 一宣。 エムディエヌコーポレーション 2013-09-20
売り上げランキング : 27909

by ヨメレバ

関連URL

ホームページビルダー18(hpb18) もうすぐ発売

   このエントリーをはてなブックマークに追加