「Hi Slider」でスライドショーを作る。

Size: px

Start display at page:

Download "「Hi Slider」でスライドショーを作る。"

しおりいいはた
5 years ago
Views:

Hi Slider でスライドショーを作る Hi Slider は jquery を利用して簡単にスライドショーが作成できるフリーソフトです英語表記のソフトなのでしきいが高いと思って躊躇する人もあると思いますがそれほど難しい英語ではありませんのでちょっと慣れれば使いこなせます (1) ソフトの入手とインストール下の Hi Slider のホームページ (

1 Hi Slider でスライドショーを作る Hi Slider は jquery を利用して簡単にスライドショーが作成できるフリーソフトです英語表記のソフトなのでしきいが高いと思って躊躇する人もあると思いますがそれほど難しい英語ではありませんのでちょっと慣れれば使いこなせます (1) ソフトの入手とインストール下の Hi Slider のホームページ ( ) からをダブルクリックしてインストール開始 I accept the agreement ( 同意する ) にチェックを入れて NEXT そのままインストールを進めれば OK です余計なソフトが入ってくる心配はありませんデスクトップにショートカットが出来ますのでこれをダブルクリックすれば起動します - 1 -

2 (2) スライドショー作成開始デスクトップの sy- トカットをダブルクリックするとスタート画面が全画面表示で開きますこのままではデスクトップが見えず作業がしにくいので縮小画面に切り替えます Create New は新規作成です使用する写真画像について大きさ ( 横幅 ) タテヨコ比は自由ですサムネイルがスライド画像の下になるタイプの場合はタテ ( 高さ ) が大きすぎると画面からはみ出てしまい見づらくなりますのでタテ ( 高さ ) を基準にして大きさを決めるのが良いと思います - 2 -

3 - 3 -

4 Template タブで好みの形状をダブルクリックすると変更できます上の写真は Eris Horizontal が選択されています Classic にすると説明 (Caption) が画像の上に重なって表示されます Wonder にするとサムネイルが画像の右側にタテ一列に表示され説明 (Caption) は画像の上に重なって表示されます - 4 -

Skin タブで好みの背景色背景画像が選択できます Clear : 明白な Dawn : 夜明け Stripy : ストライプ White : 白 Wood : 木目の中から好みのものを選んでダブルクリックして適用しますおすすめは Clear です Custom タブではスライドの各部分のサイズ色部品の表示非表示などの詳細な設定が出来るようになっています変更を加えたらツールバー

5 Skin タブで好みの背景色背景画像が選択できます Clear : 明白な Dawn : 夜明け Stripy : ストライプ White : 白 Wood : 木目の中から好みのものを選んでダブルクリックして適用しますおすすめは Clear です Custom タブではスライドの各部分のサイズ色部品の表示非表示などの詳細な設定が出来るようになっています変更を加えたらツールバーの Refresh ボタンを押すと変更内容が反映されその右の Preview ボタンでブラウザーを起動してプレビュー画面が見られますプレビューで確認して必要ならば更に変更を加えます (3) プロジェクトの保存これで完成という段階まで来たら File メニューの中の Save Project As ( プロジェクトを保存 ) を押して適当なプロジェクト名を付けて分かりやすい場所に保存しますこの保存プロジェクトをダブルクリックすると元の編集画面が開くのでここから改めて編集を再開することが出来ますので便利です (4) スライドの出力プロジェクト編集画面のツールバーの Publish ( 公開 ) のボタンを押すと次ページのような Publish the Slider ( スライダーの公開 ) の画面が開きます - 5 -

6 出力されるのは Dataimages ( フォルダー : 大画像とサムネイル画像 ) Sliderengine ( フォルダー : スクリプトファイルなどのスライダーエンジン ) index.html (web ファイル : ダブルクリックするとスライドショーが開始する ) (5) スライドの HP への実装ホームページのメインフォルダーの中に新しいフォルダーを作り適当な名前例えば niwa_hana_1 と名前を付けます (4) で出力された2 個のフォルダーと index.html をその中に入れて index.html を名前を例えば niwa_hana_1.html と変更します基本のページにこの niwa_hana_1.html へのリンクを設定します以上で基本的にはスライドの実装は完了ですが基本のページへの戻るボタンの設置やページタイトルの書込みとか背景画像の適用とかは必要になります - 6 -

7 (6) Custom タブ項目の詳細 --- Basic Settings : 基本設定 --- Slider Width : スライドの横幅 ( ピクセル ) Slider Height : スライドの高さ ( ピクセル ) Image Sizing Type : 画像のフィット方法 Full fill にしないとズーミングされない Full Fill : 素材画像をスライドの横幅に合わせてリサイズする ( 入りきらない部分はカットされる ) Auto Fit : 素材画像をスライドの画面内に収まるようにしてリサイズ Scale : 素材画像をスライドと同じサイズにリサイズする ( 縦横比は無視 ) Responsive : 画像の幅がブラウザーの幅に連動する Yes No Auto Play : スライドショーの自動スタート True : 自動スタートする False : しない Interval for auto play [ ミリ秒 ] : 切り替え時間 1000 で1 秒で 10 秒 Ken Burns Zooming Efect : 画像がズーミングしながら切り替わる : ズーミングする Disable : しない Touch Swipe : 画像をマウスを移動させられる : させる Disable : させない Keyboard Navigation Preloader Settings ---- Template settings ---- Position of Info _Thumb... : サムネイルの表示場所の設定 Top : 上 Bottom : 下 Background Settings : 背景の色画像の設定 Border Settings : スライドの外周の枠線 Border Width : 線の太さピクセル Border Style : スタイル実線点線など Border Radius : 角の丸み Border Color : 色 - 7 -

8 Border Image : 枠線の画像 Shadow Settings Ribbon Settings : 画像の上に表示されるリボンの設定 Ribbon Image : リボン画像の選択 Position : 表示位置 Offset-X Offset-Y Control Settings : スライダーのスタートストップなどのコントロール Disable Previous/Next Button Info Settings : キャプションの設定 : キャプションの表示非表示 : 表示する Disable : 表示しない Title Settings : デフォルトではファイル名 Font Family Font size : 文字サイズ 14~16が適当 Font Weight: 普通または太字 Font Style Font Color : 文字色 Description Settings :Title と同様 Title の下に表示される - 8 -

9 - Navigator Settings: 写真の切り替え案内 - Disable Page Button : 画像の切り替えボタンの設置 : 設置する Disable : 設置しない Scroll with mouse move : 画像をマウスで動かす : 動かす Disable : 動かさない Thumbnail Settings : サムネイルの設定プレビューを見ながら調整する Space Width : サムネイルの間隔ピクセル Thumbnail Width : 幅 Thumbnail Height : 高さ Thumbnail Sizing Mode Thumbnail Mask Color Border Settings Previous / Next Page Settings -- Progress Bar Settings : 進行表示バーの設定 -- : 進行表示バーの表示非表示 : 表示する Disable : 表示しない Height : バーの太さ Color : バーの色 Opacity : 透明度 1.0 で完全不透明 Position : 表示場所邪魔にならない位置を選ぶ ( 上か下 ) Right to : 右から動かす - 9 -

Taro-02_Web_html自習テキストⅡ.

Taro-02_Web_html自習テキストⅡ. 平成 18 年度学校 Web ページ作成研修講座 HTML の基礎 Ⅱ ~ メモ帳で Web ページを作ろう!!~ 今回の勉強内容背景画像の挿入 / 画像の挿入 / BGM の設定 / メールリンクの設定岩手県立総合教育センター情報教育室目次 1 復習 1 2 背景画像の挿入 2 3 画像の挿入 4 4 BGM の挿入 5 5 メールリンクの設定 6 作業フォルダの準備作成したファイルを保存するフォルダとして