2017年8月8日さて、今までホームページビルダー18(略:hpb18)の導入から、使い方までをいくつか記事にしてきました。hpb18はテンプレートなので、ちょっとデザイン的に欠けています。そこで今回はテンプレートのHPをちょっとリッチにするために、カスタマイズに挑んでみます。...、テンプレートの構成は千差万別なので、HTMLとCSSの知識が少し必要になります。初心者の方でも出来るように記事を書きたいと思います。mysite○○」です。画像をLighBox風に拡大縮小させる画像をクリックで拡大・縮小させるコードを実装します。サンプル※画面下の方にある画像をクリックしてみてください。拡大された画像を再度クリックすると元に戻ります。type="text/javascript">jQuery(function(){jQuery("#images_area").imageZoom({speed:500,hideClicked:1,imageMargin:30});});</script>head内にコードを記述します。<p>シンプルで使いやすいと大人気!今、注目の商品です。ここに紹介が入ります。ここに紹介が入ります。<p>シンプルで使いやすいと大人気!今、注目の商品です。ここに紹介が入ります。ここに紹介が入ります。</h4><h5>0,000円[税込]</h5><p>シンプルで使いやすいと大人気!今、注目の商品です。ここに紹介が入ります。ここに紹介が入ります。</h4><h5>0,000円[税込]</h5><p>シンプルで使いやすいと大人気!今、注目の商品です。ここに紹介が入ります。ここに紹介が入ります。</p></div></div></div>「hpb18-store-sample-custam.zip」を解凍し、中のフォルダ全てをFFFTP等でindex.htmlがある階層にアップロードします。拡大・縮小したい画像を用意します。(後述:◆hpb18内に用意されている画像から拡大・縮小用の画像を探す方法)上記の画像のファイル名を分かりやすい名前に変更します。(例:apple_big.jpg)名前を変更した画像を「imagesフォルダ」内にアップロードします。画像を囲んでいる<div>に「id=”images_area”」を付けます。height=”196′′></a>で記述します。(下記参照)<img>タグには必ず「width」と「height」を付け、値を指定します。※「インストールしたドライブ/hpbiluder18/sample/image/photo/その画像があるカテゴリフォルダ(f_foods)」から同じ画像を探します。※普通にhpb18をインストールしたのなら、「インストールしたドライブ」は「C:\」となっているハズです。hpbiluder18....となります。※今回の画像は「リンゴ」なので、「f_foods」フォルダになります。フォルダはカテゴリごとに分かれているので、確認してください。※例えば...人だったら、「g_people」フォルダ。建物の画像だったら、「d_buildings」フォルダといった感じです。※「リンゴの画像」を覚えておいてください。※見つかったらデスクトップ等にコピーしておきます。※この時、画像のファイル名を分かりやすい名前にするといいでしょう。(例:big_apple.jpg)※FFFTP等でサーバーにアクセスし、「imagesフォルダ」にアップロードします。Windows7は1月14に終了へ。実践的なチュートリアルで、Photoshopの基本的な操作・テクニック・レタッチ・合成のポイント・応用まで幅広く学ぶことができます。Windows7は1月14に終了へ。講座について講師依頼についてパソコンの修理・保守についてその他について確認画面は表示されません。送信する前にお間違いがないかどうかご確認ください。講座について講師依頼についてパソコンの修理・保守についてその他について確認画面は表示されません。送信する前にお間違いがないかどうかご確認ください。PluginClose。