• 2017年9月22日

ホームページビルダー21 sp で高品質なスライダーを実装する方法

ホームページビルダー21 sp で高品質なスライダーを実装する方法

ホームページビルダー21 sp で高品質なスライダーを実装する方法 700 433 パソコン生活サポート Pasonal

ホームページビルダー21spは簡単にドラッグ&ドロップで部品を組み込めるアプリケーションですが、独自にカスタマイズしようとすると、ちょっとしたコツが必要になります。

今回は、「ホームページビルダー21 sp で高品質なスライダーを実装する方法」を記事にしたいと思います。

 

必要なアプリケーション

必要なアプリケーションは以下の通りです。それぞれのアプリケーションを用意しておきましょう。

  • slider-pro(商用・私用ともに可 / 無料)
  • ホームページビルダー21 sp
  • Terapad

 

サンプル

下記のページはホームページビルダー21 spのテンプレートにslider-proを組み込んだものです。あくまでもサンプルページなので、全然作り込んでいません。トップページのみにスライダーを設置しています。動作確認の参考にしてください。

サンプルページ

 

始める前に

ホームページビルダー21 spにスライダを組み込む前に、一読しておきましょう。

  • テンプレートはどんなものを使用してもOK。
  • slider-proはこちらからダウンロード
  • ローカルで構築・動作確認後、アップロードすること。
  • 必要な日本語の文章は後で修正可能。
  • ホームページビルダー21 spでサイトを予め完成させておくこと。
  • Terapadはこちらからダウンロード

 

slider-proのダウンロードの仕方

GitHubの公式サイトにある「Clone or download」の緑色のボタンをクリックすると、ダウンロードが開始されます。デスクトップ上に解凍してください。

slider-proのダウンロードの仕方

 

高品質スライダー組み込みまでの手順

  1. slider-proダウンロード&解凍
  2. ホームページビルダー21 sp HTML書き出し(or すでにさーばーにあるindex.htmlを使用してもOK)
  3. index.htmlにコードを記述
  4. slider-proのカスタマイズ
  5. ローカルでの動作確認
  6. 必要なファイルをアップロードする

 

slider-proをダウンロード&解凍し、リネーム

ファイルをダウロードし解凍します。ファイル名を「slider-pro」にリネームします。リネームはファイルを選択し、F2キーを押すことでファイル名を変更することができます。

slider-proをダウンロード&解凍し、リネーム

 

HTMLの書き出し( or サーバーからindex.htmlダウンロード)

ここではHTMLの書き出しを解説します。すでにサーバーにホームページがある人は、サーバーからindex.htmlのファイルをダウンロードして使用してもOKです。

 

書き出しをする とは?

書き出し」とは、ホームページのコードを外部に生成することです。spではクラシック版のような、細かいカスタマイズが出来ないので、一度「HTMLの書き出し」をしてから必要なコードを挿入する必要があります。

書き出しをすると、index.htmlなどのファイル群が生成されます。これらはホームページビルダー21 spで作成した自分のサイトです。これらのファイルをアップロードすると、サーバー上でホームページが閲覧できるようになります。

HTMLの書き出し

 

HTMLの書き出し

上部メニューの「サイト > サイトのHTML書き出し」を選択します。

HTMLの書き出し

 

Desktop」を選び、「新しいフォルダーの作成」から新規フォルダーをデスクトップ上に作成します。フォルダ名は何でも構いませんが、ここでは「hpb書き出し」としています。

ファイルをリネームする

 

slider-proのフォルダを入れる

slider-proのフォルダを「hpb書き出し フォルダ」の中に入れます。

slider-proのフォルダを入れる

 

indexにコードを記述

ここからindex.htmlに必要なコードを記述していきます。すべてコピー&ペーストでOKなので、挿入する位置を間違えようにしていきましょう。

 

Terapadにドラッグ&ドロップ

index.htmlファイルをTerapadのアイコンの上に「ドラッグ&ドロップ」します。こうすると、index.htmlのコードがぎっしり詰まったファイルが登場します。

Terapadにドラッグ&ドロップ

 

header内に記述するコード

下記のコードを「<head>~</head>」内に記述します。2行目の「jquery.min.js」はテンプレートによって、あったりなかったりします。2重で記述しないように、注意してください。

 

body内に記述するコード

<!– ここからがスライダープロ –>~<!—スライダーここまで->のコードをコピーして、body内に貼り付けます。ただし、貼り付ける場所が重要です。

 

body内のどこに貼り付けるのか?

大抵の場合、<ul>タグ囲まれた「ナビゲーションメニュー」のコードがあります。下記の赤枠の中がそうです。ここはグローバルメニュー(ナビゲーションメニュー)と呼ばれる場所で、サイトの上部に表示されるボタンの場所になります。

そのすぐ下に「container(コンテナ)」と呼ばれる記述があります。<div>タグで始まっている下記の画像の58行目の位置のコードです。そのコードは、サイトのメインコンテンツの始まりのコードです。

今回のスライダーのコードはその直下に記述します。どのテンプレートもだいたい同じような作りになっていると思うので、まずはナビゲーションメニューの場所を探してみてください。

body内のどこに貼り付けるのか?

 

</body>前に記述するコード

</body>タグの直前に下記のコード「<script src=”slider-pro/dist/js/jquery.sliderPro.min.js”></script>」を記述します。

 

ローカルでの動作確認

それではローカル上で起動させてみましょう。index.htmlファイルをダブルクリックで起動してください。下記のように、メニューバーの下にスライダーが設置されていますか?キチンとスライドしていれば、問題ありません。

ローカルでの動作確認

 

デザインが崩れてるけど、どうしたらいいの?

デザインが崩れる or 表示されない場合は下記の原因が考えられます。これらのケースを想定して、原因の箇所を探してみてください。

  • <div>タグが足りない。
  • <div>タグが多い。
  • head内で<jquery.min.js>を読み込んでいない。
  • 逆に<jquery.min.js>が2つ存在している。
  • ブラウザのJavascriptをoffに設定している。

もし、これでも上手くいかない場合は、現在のぐちゃぐちゃになったindex.htmlを破棄して、もう一度最初からトライしてみてください。案外、高確率ですんなりいくかもしれません。

 

slider-proのカスタマイズ

slider-proは高品質・高機能なスライダーです。さらに、モジュール(追加機能)を使うことによって、スライダーの制御を細かく設定できます。詳細は公式サイトの解説をお読みください。ここでは一部分を紹介していきます。

※英語で記載されています。

 

基本のカタチ

下記はslider-proを動かすためのjqueryです。これが基本的なカタチになります。例えば、widthは横幅を、heightは高さを表します。それぞれはカンマで区切って使用し、「項目:設定値」と記述します。

 

モジュールサンプル:レスポンシブに対応させる

例えば、レスポンシブに対応させためには、以下のように記述します。

「responsive: ture」と記述することで、画面サイズに合わせて縮尺されます。これはwidthとheightを設定していても有効です。

 

その他の設定値

その他の設定値です。使い方や設定する値は、公式サイトを参照してください。

項目 設定値 解説
responsive ture / false レスポンシブ化にする
startSlide ture / false スタートするスライドを決める
orientation horizontal / vertical スライドを水平 or 垂直に並べる
forceSize fullWidth / fullWindow / none フルウィドス、全画面表示ができる
loop ture / false ループさせる
slideDistance 数値 / Default value: 10 スライド間の距離
slideAnimationDuration 数値 / Default value: 700 アニメーションの間隔
rightToLeft ture / false 左右を逆転させる
breakepoint 公式サイト参照 ページサイズ変更時に、タイプを変える

slide-pro公式モジュール解説(英語)

 

必要なファイルをアップロードする

あとは、すべての必要なファイルをアップロードしましょう。下記の例では、ファイル名を「hpb書き出し」から「hpbSliderSample」にリネームしています。今度はサーバー側で動作確認をしてみましょう。正しく動けばOKです。

必要なファイルをアップロードする

 

まとめ

ここまでのまとめです。

  • テンプレートはどんなものを使用してもOK。
  • slider-proはこちらからダウンロード
  • ローカルで構築・動作確認後、アップロードすること。
  • 必要な日本語の文章は後で修正可能。
  • ホームページビルダー21 spでサイトを予め完成させておくこと。
  • 【手順】slider-proダウンロード&解凍
  • 【手順】ホームページビルダー21 sp HTML書き出し(or すでにさーばーにあるindex.htmlを使用してもOK)
  • 【手順】index.htmlにコードを記述
  • 【手順】slider-proのカスタマイズ
  • 【手順】ローカルでの動作確認
  • 【手順】必要なファイルをアップロードする

今回のslider-proの組み込みはさほど難しいものではありません。コードをコピーするだけで簡単に実装できるので、ホームページの質を上げたい場合に有効です。ただし、英語の部分や実際の画像は、こちらで用意したのものに差し替える必要があります。

そこらへんは各自でカスタマイズしてください。

 

その他のホームページビルダーの記事

ぱそなる の最新の更新を
プッシュ通知で購読しよう

よかったらシェアしてください

返信を残す

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)