• 2014年7月2日

hpb18 徹底解説 ! HPをちょっとリッチにする方法【LightBox風】

hpb18 徹底解説 ! HPをちょっとリッチにする方法【LightBox風】

hpb18 徹底解説 ! HPをちょっとリッチにする方法【LightBox風】

640 430 パソコン生活サポート Pasonal

さて、今までホームページビルダー18(略:hpb18)の導入から、使い方までをいくつか記事にしてきました。しかし、hpb18はテンプレートなので、ちょっとデザイン的に欠けています。そこで今回はテンプレートのHPをちょっとリッチにするために、カスタマイズに挑んでみます。

が…、テンプレートの構成は千差万別なので、HTMLとCSSの知識が少し必要になります。なるべく初心者の方でも出来るように記事を書きたいと思います。

  • ※カスタマイズする前に必ず既存のファイルをバックアップしてください!
  • ※hpb18の現在の作業データは「スタートメニュー > ドキュメント > mysite○○」です。(○○は番号)

 

画像をLighBox風に拡大縮小させる

画像をクリックで拡大・縮小させるコードを実装します。

サンプル

※画面下の方にある画像をクリックしてみてください。拡大された画像を再度クリックすると元に戻ります。

 

準備するもの

「hpb18-store-sample-custam.zip」ファイルを下記からダウンロードしてください。

[sdm-download id=”1762″ fancy=”0″]

 

index.htmlファイルに以下のコードを挿入

head内にコードを記述します。

 

画像の用意と拡大・縮小コードの記述

  1. 「hpb18-store-sample-custam.zip」を解凍し、中のフォルダ全てをFFFTP等でindex.htmlがある階層にアップロードします
  2. 拡大・縮小したい画像を用意します。(後述:◆hpb18内に用意されている画像から拡大・縮小用の画像を探す方法)
  3. 上記の画像のファイル名を分かりやすい名前に変更します。(例:apple_big.jpg)
  4. 名前を変更した画像を「imagesフォルダ」内にアップロードします。
  5. 画像を囲んでいる<div>に「id=”images_area”」を付けます。(下記コード参照)
  6. <a href=”images/画像名”><img src=”images/画像名” width=”196″ height=”196″></a>で記述します。(下記参照)
  7. <img>タグには必ず「width」と「height」を付け、値を指定します。(下記コード参照)

 

hpb18内に用意されている画像から拡大・縮小用の画像を探す方法

  • ※「インストールしたドライブ/hpbiluder18/sample/image/photo/その画像があるカテゴリフォルダ(f_foods)」から同じ画像を探します。
  • ※普通にhpb18をインストールしたのなら、「インストールしたドライブ」は「C:\」となっているハズです。 
  • ※その場合は、スタートボタン > コンピューター > Cドライブ > Program Files (x86) > hpbiluder18….となります。
  • ※今回の画像は「リンゴ」なので、「f_foods」フォルダになります。フォルダはカテゴリごとに分かれているので、確認してください。
  • ※例えば…人だったら、「g_people」フォルダ。建物の画像だったら、「d_buildings」フォルダといった感じです。
ページ内の画像を確認します

 

※「リンゴの画像」を覚えておいてください。

 

hpb18の素材から画像を探します

 

デスクトップへコピーする

 

※見つかったらデスクトップ等にコピーしておきます。

 

画像をimagesフォルダにアッロード

 

  • ※この時、画像のファイル名を分かりやすい名前にするといいでしょう。(例:big_apple.jpg) 
  • ※FFFTP等でサーバーにアクセスし、「imagesフォルダ」にアップロードします。

返信を残す