Hi Slider

Hi Slider の概要や使い方を紹介しています

Hi Slider を紹介しているページです
 はてなブックマークに追加  Twitter でつぶやく  Facebook でシェア  mixi でつぶやく  google+ で共有  Pocket に登録

jQuery で動くモダンなスライドショーを、簡単に作れる!「Hi Slider」。

Hi Slider

● Hi Slider

jQuery を利用したモダンなスライドショーを、手軽に作成することができるソフト。
ドラッグ&ドロップで登録した画像ファイル、あるいはYouTube / Vimeo といったWeb サービスの動画を使い、モダンでスタイリッシュなスライドショーを簡単に作成することができます。
素材と素材が切り替わる場面にトランジション効果を挿入する機能や、素材画像をクリックした時にURL を開いたり、JavaScript を実行させたりする機能... 等々が付いています。

「Hi Slider」は、シンプルでありながらも柔軟性に富んだスライドショーメーカーです。
 スライドショーのサンプル
ドラッグ&ドロップで登録した画像ファイルを元に、jQuery で動くモダンなスライドショーを作成することができる... というスライドショーメーカーで、シンプルながらもそこそこ自由度が高いところが最大の特徴。
基本的に、素材画像を選択したり、作成するスライドショーの大きさ / スタイル 等を指定したりするだけで使えるようになっていますが、一方で

  • スライドに付ける “ 枠 ” の太さや角の丸み
  • 素材間のトランジション効果 (素材切り換え時のエフェクト効果)
  • 素材画像をクリックした時のアクション内容※1
  • サムネイルのサイズや透明度
  • 素材画像の上に表示する “ キャプション ” に関するオプション
  • 再生コントロールボタンに関するオプション
  • プログレスバーに関するオプション
等々も自由に設定できるようになっています。
※1 何もしない、URL を開く、JavaScript を実行する、Lightbox 風にポップアップさせる の中から選べる。
作業は、実際の動作内容をプレビューしながら行うことができ、必要であれば Firefox / IE / Opera にスライドを (編集途中で) 仮出力させることもできたりします。
尚、作成したスライドは、WordPress のプラグインとして、あるいはJoomla / Drupal のモジュールとして出力することも可能となっています。

使い方は以下のとおり。

  1. 「HiSlider.exe」を実行します。
  2. スタート画面 が表示されるので、「Create New」ボタンをクリック※2
    ※2 保存したプロジェクトを読み込む時は、左側にある「Open」というリンクをクリックし、目的のプロジェクトファイルを選択する
  3. 「New Project」という画面 が表示されます。
    最初に、画面上部の「Slider options」という枠の中で、
    • Width
      スライドの横幅
    • Height
      スライドの高さ
    • Make images fullly fill the silder
      素材画像を、スライドの横幅に合わせてリサイズする(入りきらない部分はカットされる)
    • Make the images automatically fit to the slider
      素材画像を、スライドの画面内に収まるようにしてリサイズ
    • Scale the image
      素材画像を、スライドと同じサイズにリサイズする(縦横比は無視)
    • Support Responsive web design
      レスポンシブWeb デザインを使う
    • Enable Ken Burns Zooming Effect
      Ken Burns エフェクト を使う
    といったオプションの設定を行っておきます。
  4. 左下の「Drag and drop images here or click here to add images」という部分に、素材として使う画像ファイルをドラッグ&ドロップします。
    ちなみに、ツールバー上の YouTube ボタンをクリックすることでYouTube の動画を、 Vimeo ボタンをクリックすることで、Vimeo の動画を追加できるようにもなっているようです。
  5. 必要であれば、右下のパネル内で選択素材の
    • Title - タイトル(素材画像の上に、キャプションとして表示される)
    • Description - 説明
    を設定しておきます。
    加えて、「Transition Effect」タブ を開くことで素材の切り替え効果を、「Action Info」タブ を開くことで、素材画像をクリックした時の挙動内容を設定できたりします。
    切り替え効果の設定を行う時は、「Transition Effect」タブ内の「Random」ボタンをクリック → 「Effect options」という画面 が表示されるので、目的とする切り替え効果を選択すればOK※3
    ※3 「3DHorizontal」「3DVertical」を選択すると、「Sorry, the effect you selected is not ~ 」という警告が表示されるが、「はい」ボタンを押してよい。
    「3DHorizontal」「3DVertical」は、編集画面内でプレビューすることができないが、ブラウザ上では正常に動作する。

    素材画像をクリックした時の挙動内容を変更したい時は、「Action Info」タブを開き、目的とするアクション内容を選択すればOK です※4
    (URL やJS を開く時は、パスも指定する)
    ※4 全ての素材に同じアクションを設定する時は、「Apply to all」ボタンを押す。
  6. 設定が終わったら、右下の「OK」ボタンをクリック。
  7. スライドの詳細設定画面 が表示されます。
    まず、左上の「Template」タブ内で、スライドに適用するテンプレートを選択します。
    (任意のテンプレートを、ダブルクリックする)
  8. 続いて 「Skin」タブ を開き、スライドに適用するスキンを選択します。
  9. 基本的にはここまで設定すればOK ですが、「Custom」タブ を開くことで、
    • Slider Width - スライドの横幅
    • Slider Height - スライドの高さ
    • Image Sizing Type - 画像のフィット方法
    • Preloader Settings - プリロード(読み込み中)画面の画像
    • Background color - 背景色
    • Border - スライドに付ける枠線の設定
      • Width - 枠線の太さ
      • Radius -(枠線の)角の丸み
      • Style - 枠線のスタイル
    • Thumbnail Settings - サムネイルに関する設定
      • Show Thumbnail - サムネイルを表示するかどうか
      • Spacing - サムネイルとサムネイルの間に空けるスペース
      • Width - サムネイルの横幅
      • Height - サムネイルの高さ
      • Opacity - 非アクティブなサムネイルの透明度
      • Page Button Image - ページ切り替えボタンの画像
    • Caption Settings - キャプションに関する設定
      • Show Caption - キャプションを表示するかどうか
      • Show Caption Frame - キャプションを枠で囲む
      • Width - キャプションの横幅
      • Position - キャプションを表示させる位置
    等々のオプションも設定できるようになっています。
    (オプション変更を行ったら、ツールバー上の Refresh ボタンをクリックする)

  10. スライドのプレビュー
  11. 現在編集中のスライドは、Firefox / IE / Opera でプレビューしてみることもできます。
    プレビューする時は、ツールバー上の「Preview」ボタン右にある ▼ をクリック → スライドを仮出力するブラウザを選択すればOK です。

  12. プロジェクトの保存
  13. 現在の作業状態は、プロジェクトファイルとして保存しておくことができます。
    作業状態をファイルとして保存する場合は、メニューバー上の「File」から「Save Project As」を選択し、ファイルの保存を行っておきます。

  14. スライドの出力
  15. ツールバー上の「Publish」ボタンをクリック。
  16. 「Publish the slider」という画面 が表示されます。
    基本的には、右上にある「Browse」ボタンをクリックし、スライドの出力先フォルダを選択 → 「Publish」ボタンをクリックすればOK です。
    ( index ファイルと、2 つのフォルダが生成される)
    WordPress のプラグインとして、あるいはJoomla / Drupal のモジュールとして出力したい時は、左側の「Publish as」欄で目的の出力形式を選択 →「Publish」ボタンをクリックします。
  17. 少し待ち、「Published successfully」というウインドウ が表示されたら出力完了です。
    WordPress 等のモジュールとして出力した時は、「Successfully published, open ~ ?」というダイアログが表示されます。
    ここで「はい」ボタンをクリックすると、ファイルの出力先フォルダを開くことができます。

 はてなブックマークに追加  Twitter でつぶやく  Facebook でシェア  mixi でつぶやく  google+ で共有  Pocket に登録
Hi Slider TOPへ
スポンサード リンク
 おすすめフリーソフト
 Orchis

シンプルで使いやすいランチャー

 WinToFlash Lite

Windows のインストールディスク / イメージ を元に、ブートUSB を作成

 CCCP

定番のコーデックパック

 Avira Free Antivirus

常駐監視型のシンプルなアンチウイルス

 Microsoft Windows and Office ISO Download Tool

Windows & Office の ISO イメージファイル入手を支援

 Recuva

高機能なファイル復元ソフト

 Google-Context-Menu-Edge

選択中のテキストを、右クリックメニューから Google 検索にかけられるようにする Microsoft Edge 拡張

 Wise Reminder

シンプルで使いやすいリマインダー

 LeptonGUI

JPEG 形式の画像ファイルを、無劣化で 22% 程度圧縮することができるソフト

 終活ソフト

自分が死んでしまった後に、ログインパスワードをログオン画面上に開示できるようにするソフト

 Windows10 設定変更ツール

Windows Update / 自動メンテナンス / Cortana の設定を、手軽に変更できるようにするソフト

 SmoothVideo Project (SVP)

各種動画ファイルを、フレーム補完して 60fps で再生できるようにするソフト

 おすすめフリーソフト
 TakeOwnershipPro

アクセスが拒否されて開けないフォルダを、開けるようにする

 FloatingButton

任意のホットキーと同じ動作をするボタンを、デスクトップ上に配置する

 Fy Memo ~お手軽付箋メモ~

超シンプルで使いやすい付箋ツール

 WOW64Menu

64 bit 版のエクスプローラ上で、32 bit 用の右クリックメニューを使えるようにする

スポンサードリンク

Hi Slider を紹介しているページです