パソコンの有効活用で、ホームページの作成を始めました。
自作パソコンや周辺機器、スマホの買換えなども整理しました。
特殊なアプリや部品交換等の改造もメモしています。
電子機器として、ブルーレイやドライブレコーダー・・等々。
   

ホームページ の 設置関連

ホームページ作成ソフトは「ホームページ・ビルダー21」を使用しています 。

Webサーバーは、スタードメインの無料レンタルサーバー を使用しています。

目 次

ホームページ作成 の 資料

  1. スターサーバー で サブドメイン を使用する方法
  2. FlexBox と position sticky でサイドメニューをスクロール途中で固定
  3. スタードメインと契約し 無料レンタルサーバーへ移動しました
  4. .htaccess ファイル の 設定例(新しいページに自動的に転送、キャッシュ期間の設定 等)
  5. faviconの設定で、画面上に自分用のアイコンを表示させる方法
  6. ホームページビルダーで 共通部分の同期 を使用する方法
  7. 「戻る」「進む」「更新」ボタンの設置方法 (使用例・・・
  8. ルート相対パスの メリット と デメリット
更新記録
 
2018/12/07
スターサーバー で サブドメイン を使用する方法
2018/11/12
FlexBox と position sticky でサイドメニューをスクロール途中で固定
2018/09/11
スタードメイン の 無料レンタルサーバーホームページを全て移動
.htaccess を利用して、旧サーバーから新サーバーへ自動的に誘導する方法
2018/06/29
Wordpressへの移行を検討してみました(検討の結果は移行しない)
2018/05/11
ホームページ作成ソフトを「ホームページビルダー17 から 21」に変更
(理由は、CSS3で設定したrem等が編集画面に反映されないため)
2018/05/09
新たに編集したページを表示させるために、「表示更新」ボタンを上部メニューに追加
ついでに「戻る」「進む」「更新」ボタンの設置方法も整理しました
2018/04/27
ホームページやCSSを更新した時に、キャッシュを使用せずにWEBに読み込ませる方法
(futomi's アクセス解析使用時に、上記対策の影響を無くす設定も追記 )
2018/04/16
ホームページの 読み込みサイズ と 読み込まれるタイミング も解析
ホームページの 読み込み時間を計測する Javascript を検討
2018/04/10
使用する表示フォントを再検討してみた
2018/04/03
各タイトルメ総合ニューで 表(table)を止め、float に変更して読み込み速度UP
2018/03/30
少しでも軽量にするため、各ページを大幅に書き換え
Android の Chrome で文字の一部が拡大表示されるバグ対策を実施
2018/02/14
CSS と ホームページ(全ファイル)を Shift-JIS から UTF-8 に書き換え
-------------
------- 別のページにジャンプします -----------------------------------------
2017/09/20
スマホの画面でも文字が見えるように、CSSとホームページの編集を開始
2017/08/09
画像をクリックすると、その場で拡大表示するように変更(JavaScript & CSS)
2017/01/30
パソコンやスマホ画面に自分のホームページを張り付けた時に
表示するアイコン(favicon.ico
2016/11/30
ホームページ の メニュー構成を変更 (縦長メニューを削除)
2016/10/27
.htaccess を利用して、削除やリネームしたページを、正式なページに自動的に誘導する
2016/10/27
ドローン用メイン画面のサイドメニューを短く、その他は無くして、説明の表示幅を広げた
2016/06/03
このホームページをスマートフォンで見ると文字の大きさが変わってしまう不具合を修正
2015/09/01
無料サーバー Xdomain にホームページを全て移動
2014/10/22
FC2 の表示速度が遅いので対策として.htaccess ファイル設置
2014/03/03
ホームページビルダーの 共通部分の同期 を利用すると非常に便利
2014/03/03
無料サーバー FC2 を使用した感想と変更点
2014/02/14
ホームページ設置スペースが不足してきたので、一部のみ無料サーバーFC2へ移動
2014/01/
CSSを使用してホームページのリフォームを始めた。

2018年09月11日
  ルート相対パス の メリット と デメリット

WEBサイト制作において、ルート相対パスは大変便利です。

絶対パス、相対パス、ルート相対パス を比較してみました。

2018年06月29日
  Wordpressへの移行を検討してみました(結果は移行しない)

世界中の25%以上のホームページがWordPressで作られているようです(2018年6月)。

HTMLサイトをWordPressに移行する記事をよく見るので検討してみました。


●WordPressのメリット(青い文字は私の現在の環境と考え方

  1. HTMLのタグを書かなくても、WordPressの場合はタグを自動生成してくれる
    • 私の場合、HTMLのタグを書くことも楽しいし、ホームページビルダーでの編集は楽です
  2. デザインの変更はWordPressの場合、テーマを入れ替えるだけですむが、HTMLの場合は、関係するすべてのページに対し変更の必要がある
    • 個人のページなので大幅なデザインの変更は少なく、CSSである程度カバーできる
      同じデザインの部分については「共通部分の同期」を利用している
  3. WordPressの場合はフォルダ構造は仮想なので、実際にフォルダ別けしなくても、設定によって構造を作ることができるが、HTMLの場合は、ファイルが実体として存在するので、ファイルをフォルダに分けてホームページの構造を作ります
    • 企業ではなく個人で管理している場合は、フォルダ分けした方がわかりやすい。
      私の場合大きなフォルダは約9、小さなフォルダは約50、ファイル数(HTML+画像)約4,150個
  4. WordPressの場合、全ページ共通の文章の差し替えをする場合、1か所を修正するだけでOKだが、HTMLの場合は、すべてのページの更新が必要です
    • ホームページビルダーで「共通部分の同期」機能を使えば、関係するすべてのページの更新をしてくれる
  5. WordPressの場合、ページの作成や修正はブラウザだけですべてができるが、HTMLの場合、パソコンなどを使ってページの作成や修正をし、ファイルをFTPで転送する必要がある
    • 出先でホームページの更新をする必要性が無い。ホームページビルダーのお陰で操作は簡単
      ブログ的な使い方をしている人には必要かもしれませんが・・・
  6. WordPressのテーマは、ほぼすべてがスマホ対応していまが、HTMLの場合、コードやCSSを書き換えての対応は結構大変
    • スマホ対応のメリットについては、WordPressの効果は大きいと思う
      ホームページビルダーでもフルCSSテンプレートを使用すれば簡単にスマホ対応できる
      しかしいずれにしても、スマホ対応のためには全ページの書き換えが必要


●現在の私の環境での結論

スマホ対応については現在も気になるので検討中ですが、現在のホームページを全て書き換えるのは困難。

もしスマホ対応を実施するとしても、既存のページはそのままで、新たに作成するページにのみ対応すると思います。

このように混在する場合は当然、WordPressではなくフルCSSテンプレートを使用すると思います。

企業のように見栄えの良いページを作成し利益につながる効果を出すのであれば費用対効果の期待があるが、趣味で開設している私の場合は、大きな労力と時間をかけてWordPressへ移行するメリットが見当たらない。

結論としてWordPressへの移行はしないことにしました。

2018年05月09日
 ・「表示更新」ボタンを上部メニューに追加
 ・「戻る」「進む」「更新」ボタンの設置方法も整理


この機能を使う時は、「標準モード」を使用し、「ページ編集」画面で確認しながら。「HTMLソース」画面で編集します。

リンク設定で思い通りにジャンプできるかの確認は「プレビュー」画面で行います。

編集した最新のホームペーを読み込んでもらうために、上部メニューに「表示更新」ボタンを追加しました。

ついでに、「戻る」「進む」「更新」ボタンの設置方法も整理しました。

このページで使用しているボタンも下記の方法で設置しています。


ボタン形式で設置する場合の例・・・(使用例 

  • <INPUT type="button" value="更新" onclick="location.reload(true)">
      (true) の場合は、Webサーバーから再読み込みします
      (false) の場合は、ブラウザのキャッシュから再読み込みします
  • <INPUT type="button" value="戻る" onclick="history.back()">
  • <INPUT type="button" value="進む" onclick="history.forward()">


リンク形式で設置する場合の例・・・(使用例 戻る

  • <a href="javascript:location.reload(true)">更新</a>
  • <a href="javascript:history.back()">戻る</a>
  • <a href="javascript:history.forward()">進む</a>


●ボタンの大きさや色等を変更する時は(ホームページビルダーでの手順です)

  1. ボタン上を右クリック>属性の変更
  2. 「スタイル」をクリック>「サイズ」を変更
    「単位」を「予約語」にすると、やや大きい や 大きい 等を選択できます
  3. 例えばサイズを大きいに変更した時は下記のように style= が追加されました
    <input type="button" value="戻る" onclick="history.back()" style="font-size : x-large;">


●ホームページビルダーで「戻る」ボタンを配置して設定する時は

  1. 「挿入メニュー」→「フォームと入力部品」→「プッシュボタン」→「一般ボタン」
  2. ダイアログにて「ボタンに表示するラベル」に「戻る」と入力→「イベント」をクリック
  3. OnClickを選択→アクション欄のページの+をクリック
  4. 「前の履歴のページを表示します」をクリック→下の登録ボタンをクリック
  5. イベントとアクションが表示されますので、OK→「属性」でOK で終了です

注意・・・表(table)の中にこの手順でボタンを挿入した場合、フォームが同時に挿入されるため、プレビューすると表の高さが倍になります。ソースを開いて<FORM>と</FORM>を削除すれば元の高さに戻ります。

2018年04月27日
 ・ホームページ や CSS を更新した時に、
     キャッシュを使用せずにWEBに読み込ませる方法
 ・アクセス解析への対策

ホームページやCSSを更新した時に、ローカルのキャッシュを使用せずにWEBに読み込んでもらえる方法を色々検索し、有効な方法を見つけた。

ホームページやCSSを更新しても、短い期間で同じページを表示させた場合、HTMLやCSS・JavaScript・画像等の各ファイルは、サーバからはダウンロードされず、ローカルのキャッシュ領域に保存されたデータを読みこみます。
その結果、更新したホームページが表示されなかったり、HTMLとCSSがうまく合わずレイアウトが崩れる場合があります。

これを防ぐ簡単な方法は、.html や .css の後ろに ?20180427 のような「クエリー(Query)」を付けます。

  turi.html?20180427

更新した時の日付を付けると後でわかりやすいし、変化があれば新しいファイルだと判断してキャッシュを使わずに読み込んでくれるようです。

動作上は全く影響有りません。


●futomi's 高機能アクセス解析 CGI Professional 版 への影響を無くす設定

futomi's アクセス解析CGI を使用して分析していますが、上記「クエリー(Query)」を使用すると、解析結果に別のページとしてカウントされてしまうため、設定で下記のように変更しました。

アクセス解析で訪問されたHTMLのインプレッション数を表示する時

turi.html と turi.html?20180427 は同じ扱いにする必要があるので

「設定情報」>「CGI設定」>「アクセスページ URL の扱い」を「?以降は無視する」に設定する

2018年04月16日
 ホームページの 読み込みサイズ と 読み込まれるタイミング も解析

ホームページを表示させる時間の計測は別項目で実施したので、今回は表示するために読み込むサイズの計測をしてみた。

html本体ファイルや画像ファイル等を全てを読み込むと、どのぐらいのサイズになるのか適当に考えていました。

表示速度やサイズだけでなく、いろいろ解析してくれるWebサービスを利用させていただき調べてみました。

2018年04月16日
 ホームページの読み込み時間を計測する Javascript を検討

ホームページの読み込み速度が遅いとか、読み込みに時間がかかるという記事やブログを見かける。

調べると以前から結構話題にはなっているようです。

せっかく通信環境が整い通信速度が上がったが、画像や動画、表(Table)を多用し、さらにホームページのサイズが大きくなったため、読込みに時間がかかてしまう。

画像を圧縮したり、表(Table)の使用を減らしたり、Javascriptの読み込みをページの最後の</body>の直前に持ってきたりして試行錯誤しているが、実際にどの程度に時間がかかっているか計測してみたくなった。

全てのページを測定するのではなく、ページサイズが大きく結構画像表(Table)を使用したりYoutubeの動画の画面を張り付けている場合の影響もページの読み込み時間を計測すれば、大体の感覚がつかめると判断してテストしてみました。

使用するのは簡単なJavascriptです。大まかな時間を測定します。

  1. まず<head>内に記入しておく部分です
    <script language="Javascript">
    <!--
    mydate = new Date();
    starttime = mydate.getTime();  /* 開始時刻を取得 */
    // -->
    </script>
  2. <body>に追加記入します
    <body onload="calc_time()"> 他の記述があれば最後尾にスペースをあけて追加します
  3. 計測したデータをページ内の表示させたい場所に記入
    <FORM NAME="myFORM1">読み込み時間 <INPUT TYPE="TEXT" NAME="mytime">
    </FORM>
  4. </body>の直前に記入します
    <script language="Javascript">
    <!--
    function calc_time()       /* 時間を測定する関数 */
    {
    mydate = new Date();
    endtime = mydate.getTime();  /* 終了時刻を取得 */
    difference = (endtime - starttime)/1000;
    document.myFORM1.mytime.value = difference + " 秒";
    }
    // -->
    </script>

ここで表示される読込み時間には、サーバーが応答するまでの時間は含まれていませんので、込み合っている時間帯や処理が遅いサーバーの場合、表示にはさらに時間がかかります。

2018年04月10日 使用する表示フォントを再検討してみた

色々なデバイスでこのホームページを見ると、どうしてもデザインが変わってしまいます。
特に、スマホの縦画面では文字を大きくするとレイアウトが完全に崩れ、パソコンとスマホのどちらでも綺麗に見れるように作成する「レスポンシブ・ウェブデザイン」を採用するには、大幅に作り直す必要があり素人が趣味でやっているレベルではカバーしきれないのが正直な状況です。

せめて読み取りやすい文字を使用して表示させる努力が精一杯です。


2018年04月10日現在は、読み取りやすさを優先し、ヒラギノとメイリオを設定している。

WindowsとiOS(Mac,iPhone,iPad)とAndroid の画面表示を確認すると、大きなレイアウトの違いは無いようです。(但しスマホは横画面で・・・)

CSSで ヒラギノ角ゴシックとメイリオを設定した書式、
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, sans-serif;

左側から順に検索され、最初にヒットしたものがつかわれる。英語のみのフォントの場合は、文中に日本語が出た時点で日本語を含むフォントを再検索するようです。


●最近は、MacとWindows10に標準でハンドルされている共通の游ゴシックがあるので設定して試してみたがどうもしっくりこない。書体はきれいなのだが慣れていないせい?・・・。
注意点は、閲覧者の12%を占めるWindows7にはハンドルされていないので、フォントの違いによるレイアウトの確認が必要になります。

CSSで 游ゴシックを設定した書式、
font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;

游ゴシックを設定する時はMacとWindowsでフォント名が異なるので注意が必要。さらに文字の太さも違うのでWindowsでは太さを「Medium」に指定。


●試した結果、今回は現在のまま ヒラギノとメイリオ を設定したままとしました。

●MacとWindowsで画面表示の違いを確認する時は iPad を使用していますので、その他の iOS系の画面表示がつかめていません。

2018年04月03日
 各タイトル総合メニューで 表(table) の使用を止め、
   float に変更して読み込み速度UP

表(table)を多用するとホームページの表示開始が遅くなる。

理由は、tableを全て読み込み終わるまで画面の表示をしてくれないので、回線が込み合っている時など応答していないと勘違いしてしまう。

自分自身わかっていても、イラっとする時があるので、訪問してくださった方は画面表示まで待ってくれないかもしれません。

まずタイトルのメニュー画面から変更を開始。

float: left; と float: right; を使って簡単に変更してみました。

改造後偶然、夕方の込み合っている時間帯に、ページの外観と文字が表示され、画像が後から表示されるという現象が確認できました。
今までは全て読み込まれるまで待たされてから全体が一気に表示されていました。

2018年03月30日
 少しでも軽量にするため、各ページを大幅に書き換え

時々読込みが遅く、スムーズな閲覧ができない時がある。

●全体の容量を小さくしたり、読み込み効率を上げるため、下記のような書き換えを実施、ほぼ完了。

どの程度の効果が出るかわからないが、分割したページは多少読込みが早くなった気がする。


●Android の Chromeで文字の一部が拡大表示されるバグ対策を実施。

  CSSファイル内に p { max-height: 100%; } を追加。

私の場合は、表の左右で表示される文字の大きさが変わるバグが出ていましたが、一部改善されました。
しかし、完全ではなくまだ文字が大きく表示されるところがあります。

2018年02月14日
 CSS と HTML(438ファイル)を
       Shift-JIS から UTF-8 に書き換えました

スマホでこのホームページを閲覧し、メニューなどからリンク先にジャンプしようとしてもジャンプできない事がありました。

最近 iPad Air を女房から譲り受け色々使っていて気が付きました。

理由は、リンク先のラベルを日本語にした場所で発生しており、Shift-JIS と UTF-8 に関連しているようです。

一部のページを UTF-8 に書き換えると問題が収まりましたので、思い切って全てのCSS と HTMLファイルを一番よく使われている UTF-8 に変換することにしました。


手順は

  1. CSS と HTML ファイルを UTF-8 に変換します。全部で438ファイル有りました。
  2. HTMLに記入されている <meta charset="Shift-JIS"> を <meta charset="UTF-8"> に書き換える
  3. CSSファイルの先頭に記入されている @charset "Shift-JIS"; を @charset "UTF-8"; に書き換える


この作業を簡単に実施できる無料アプリを使用させていただきました。


●選択した全ファイルの文字コードを一瞬で変換してくれる「KanjiTranslator

  1. 変換先文字コードを指定 例(UTF-8N BOM無し)
      WebページのHTMLファイルの場合は、BOM無しが良い
  2. 変換したいファイルやファイルを含むフォルダをエクスプローラ等からドラッグ・アンド・ドロップします
  3. 変換ボタンを押すと、ほぼ一瞬で全ファイルの変換が完了します


●選択した全ファイル内から指定した文字列を見つけ出し、他の文字列に一瞬で置換してくれる「Devas

  1. 対象ファイル/フォルダを指定します(サブフォルダ内も検索するか指定できます)
  2. 対象ファイルの条件(*.htm *.html 等)を指定
  3. 検索し変換する文字列を指定 例(<meta charset="Shift-JIS">)
  4. その他のオプションを設定して「検索」実効
  5. 指定した文字列を含むファイルの一覧が表示されます
  6. 置換したい文字列を指定 例(<meta charset="UTF-8">)
  7. 置換ボタンを押すと、ほぼ一瞬で置換が完了します


今回は、アプリのダウンロードや、使い方の確認、一連の作業を含め約30分ぐらいで完了しました。

UTF-8に変換後、リンク先にジャンプしないという症状は出なくなりました。