• 2014年7月2日

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

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

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

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

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

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

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

 

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

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

サンプル

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

 

 

 

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フォルダ」にアップロードします。
特集記事
フィルター
Post Page
徹底解説 ホームページビルダー ホームページビルダー18 WordPress SEO対策 こんぴゅーた テクニック・トラブル レビュー(評価) パソコン Jimdo / Goope アプリケーション webビルダー ホームページ グーペ Strikingly
ソート
hpb18 徹底解説 !

hpb18 徹底解説 ! HPをちょっとリッチにする方法【スクロールバナー】

今回はスクロールバナーを作成してみました。スクロールバナーとはマウスのホイールに追随して移動する広告のことです。こうすることで、常に広告がユーザーの目にとまるようになり、クリック率の増加が期待できます。 また、作成方法も「css」と「jQuery」をほんの少し追加してあげるだけです。 スポンサードリンク
2014-09-05

18

hpb18 徹底解説 !

hpb18 徹底解説 ! HPをちょっとリッチにする方法【リッチメニュー】

前回はホームページビルダー18のサイトの画像を「LightBox風」にアレンジしました。今回は、グローバルメニューをちょっとリッチにカスタマイズしたいと思います。 ※カスタマイズする前に必ず既存のファイルをバックアップしてください!
2014-07-05

18

WordPress テンプレート の効果を高める5つの方法+30テーマ

WordPress テンプレート の効果を高める5つの方法+30テーマ

デザインに特化したテンプレートから、ユニークな演出のテンプレートまで、世の中にはじつに色々なWordPress テンプレートが豊富にあります。迷いますよね。WordPressをこれから始める人も、どのテンプレ
2017-08-08

8

ホームページを作りたいけど、どんな方法があるの? お試し7選

ホームページ作成ソフトを試してみよう!楽々作成+お試し7選

会社からホームページを作れ!」と上司から言われて、困っている人もいるでしょう。「店舗サイト
2017-07-27

8

Strikinglyで作るホームページ! 店舗サイト【フラワーショップ】Part.3

Strikinglyで作るホームページ! 店舗サイト【フラワーショップ】Part.3

Strikinglyで作るホームページ! 店舗サイト【フラワーショップ】Part.3~アッという間のチュートリアル記事です。Strikingly を利用して、フラワーショップのホームページを構築したいと思います。ウェブビルダーであるStrikinglyを使えば、お手軽に高品質なサイトを作成することができます。 こ
2017-07-26

8

Strikinglyで作るホームページ! 店舗サイト【フラワーショップ】Part.2

Strikinglyで作るホームページ! 店舗サイト【フラワーショップ】Part.2

Strikinglyで作るホームページ! 店舗サイト【フラワーショップ】Part.2~アッという間のチュートリアル記事です。Strikingly を利用して、フラワーショップのホームページを構築したいと思います。ウェブビルダーであるStrikinglyを使えば、お手軽に高品質なサイトを作成することができます。
2017-07-26

8

返信を残す