パソコンお勉強TOP
ホームページ勉強記録ホームページ作成勉強

 パソコンを学ぶhomeパソコンを学ぶhome  フォットモーション
（スライドショー作成）		  フォットモーション
（カルーセル作成）		   ■文字の背景に色付けする
 ■リンクに背景・文字色変更 ■FC2カウンタが表示されない ■メニューバーのリセット  
       
       
 大工さんの修行  自作パソコン作ろう  Gmsil  Yahooジャパン
 上TOP・横幅自動にいっぱい
にページをページを設定するタグ		  参照画像←（設定方法は画像）  

<body>

<img src="https://s.yimg.jp/images/ks/official/nt/grd/prf_48.png" border="0" style="border-top-width : 0px;border-left-width : 0px;border-right-width : 0px;border-bottom-width : 0px; width:calc(100vw - 16px);" height="239"><br> </body>
 特定のHTMLページに
簡易passwordを設置する		  HTMLタグ
ソースを見られたらバレバレ		  

<html> <head> <title>日吉</title> <script type = "text/javascript"> <!-- function matchPass() { var inpass = document.forms[ "pass" ].elements[ "inpass" ].value; var validpass = "パスワード!"; if( inpass == validpass ) location.href = "リンク先URL"; else alert( "パスワードが間違っています。" ); } </script> </head> <body> <form name = "pass"> <div> <input type = "text" value = "" name = "inpass"> <input type = "button" value = "認証" onclick = "matchPass();"> </div> </form> </body> </html>
 イメージアップの編集
1枚の画像の一部分にで複数のリンクを貼る方法
イメージマップ
   ホームページ挿入画像1枚に複数箇所のリンクを貼る方法
画像の一部分に四角や○等囲み指定して複数のリンクを掛けることができます
イメージアップの編集を開くには
リンクをかけたい画像を選択「右クリック」し→「画像の編集」ポイントする、右に「イメージアップの編集」のメニュークリックします「イメージマップ エディター」ダイアログボックスが表示されます。

このページは主にホームページビルダーでの作成した覚えです。
我流勉強なので設定する遠回りや間違いもあるかもです。

フォットモーションフォットモーション作成種類には「スライドショー」・「ギャラりー」・「カルーセル」・「ズーム」等があるが作成方法は、ほぼ同じなので
まずはスライドーを詳しく勉強しま。
※フォットモーションーは各、ページに1個、複数は作成できません
フォットモーションスライドショー作成
 スライドショー作成画面←スタート拡大画面スライドショー設定作成←設定拡大画面ホームページビルダー画像編集ソフト←「Webart」拡大画面

★・まずはフォットモーション（スライドショー）作製用の画像を用意する画像加工ソフト「Webart」アプリで編集します、今回600ピクセル×450ピクセルで3枚加工してみました。（トップページに乗せる場合は600×450位に5枚程度作ると見栄えが良い。）
保存はホットモーション専用のフォルダーを作ると解りやすいです今回「fotomo-syon」）のフォルダーを作成した。
※画像は素材集からでも画像は簡単に出せるが任意向きではない。
★ホームページビルダー作成画面の左記画像のようにフォットモーション作成画面から始める。
フォットモーション（スライドショー）とはホームページビルダーで比較的大きな動く画像を作成する事ができるのでページの見栄えが良くなる。

以下・左記の画像参照で作成する。
画像①・・・左画像のフォットモーション（スライドショー）クリックして作成する画像を選ぶ（必要枚数を何度も同じ工程で）次へ進む
画像②・・・作成するの画像の枚数確認（画像を次ぎ、次ぎ選択していきます。並べ位置変えの移動はスライドする）次へすすむ
画像③・・・今回はノーマル設定にして・・・下のカスタム設定ボタンクリック・・・次へ進む
画像④・・・表示画像の大きさや切り替わり作動時間のなどを設定する・・・次へ進むと動画の作成画面が表示る。戻って編集可能。
保存する
左記に作成した「fotomo-syon」フォルダーを確認して、複数ファイルを全て指定して保存ボタンでフォットモーション（スライドショー）は終了
★転送前に出来栄えと動きをプレビューやプラザ確認（ビルダーで確認で来る）を試してから転送すると失敗がない。
★ファイル転送は「fotomo-syon」（スライドショー保存したフォルダー）と、これを作成したHTMLページをサーバーに転送します。
★作成の表画面は非表示にしています。（表の枠を赤にしたら、左クリック「表の枠を非表示」タップします。）
 スライドショーの出来上がり 400×350の3枚画像で作成しました。
 横にスライドするカルーセルカルーセル（テッカー作動）このプログラムがないと動かない
このカルーセルには2通りの動かし方がある。①スライドショー（指定した枚数を自動的にスライドさせる）
②テッカー（スライドショーと同じだが画像が流れるようにスライドしていく。）
作成順は上のフォットモーション（スライドショー）と、ほぼ同じ工程なので説明は省く。
★挿入作成画像の大きさが違っていても大丈夫、保存時調整されます。
保存する
左記に作成した「karuseru」フォルダーを確認して、複数ファイルを全て指定して保存ボタンでフォットモーション（カルセール）は終了
★ファイル転送はkaruseru」フォルダーと、これを作成したHTMLファイルを転送します。.
その他に「ギャラリー」や「ズーム」の作成もできるが私のホームページではお勧めでない。
■アクセスカウンタが表示されない
ホームページビルダーの転送ファイルで転送すると、」FC2のカウンターが表示されない問題の取り合えず解決法を
考えました。以下の画像参照。
FC2ホームページの場合y→FC2ホームページカウンターFC2ホームページLiteの場合→FC2ホームページLiteカウンター表示もっと簡単な方法があるかもしれないが今のところ無いので「FC2のサーバー」のファイルマネージャーから転送方法を使ってカンター表示させています。
■ホームページ作成文字に蛍光ペンのようにマーカーを塗る＆文字に色を付ける
塗りたい文字列をドラッグして選択する→メニューの挿入→その他→HTMLタグ→[タグ挿入画面]でタグ：SPANを選択→[挿入]ボタンをクリック→[スタイルの設定]→[色と背景タブ]→背景色：黄色（例）を選択→[OK]→[タグ挿入画面]を[閉じる]
以下はテストで色付けしてみました。（こんなプログラムを取り入れて文章を目立たせたい箇所にアピールできます。）
★背景にマーカーで塗ったいぇうなサンプル・・・
テスト（1）で背景色を黄色設定するとこんな感じです
★背景色と文字色を選択した例・・・
テスト（2）で背景色を緑の設定し文字色を白色に設定するとこんな感じです
■リンク文字に背景色やリンク文字の色を変える（リンクのあるところにマウスを当てた時）
まず設定場所にリンク挿入→表示タブから「スタイルシートマネージャー」→表示タブから「スタイルシートマネージャー」→追加タブ→下のスタイル→画像A、Bを設定し→色と追加タブ→画面右側が背景/左側が文字色の設定したら全てOKで閉じ、作動確認後上書き保存保存します。
※その他、マウスオーバー時、タグ候補を変えてリンク下線を消したり太文字、斜体文字にできみたいだが、ちょっと難しい。
 ■ホームページビルダー・メニューバーをリセットするには・・・
「標準モード」「どこでも配置モード」のツールバーのリセットする。
タスクバー右クリック→ユーザー定義の設定→メニューバーのリセットタブ・・・画像参照
※タスクバーに異常があったり編になった時に行う。
 
 
TOP