その他

ホームページ作成とサーバー関連

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

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

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

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

HTMLのタグを書かなくても、WordPressの場合はタグを自動生成してくれる
- 私の場合、HTMLのタグを書くことも楽しいし、ホームページビルダーでの編集は楽です
デザインの変更はWordPressの場合、テーマを入れ替えるだけですむが、HTMLの場合は、関係するすべてのページに対し変更の必要がある
- 個人のページなので大幅なデザインの変更は少なく、CSSである程度カバーできる
  同じデザインの部分については「共通部分の同期」を利用している
WordPressの場合はフォルダ構造は仮想なので、実際にフォルダ別けしなくても、設定によって構造を作ることができるが、HTMLの場合は、ファイルが実体として存在するので、ファイルをフォルダに分けてホームページの構造を作ります
- 企業ではなく個人で管理している場合は、フォルダ分けした方がわかりやすい。
  私の場合大きなフォルダは約9、小さなフォルダは約50、ファイル数(HTML+画像)約4,150個
WordPressの場合、全ページ共通の文章の差し替えをする場合、１か所を修正するだけでOKだが、HTMLの場合は、すべてのページの更新が必要です
- ホームページビルダーで「共通部分の同期」機能を使えば、関係するすべてのページの更新をしてくれる
WordPressの場合、ページの作成や修正はブラウザだけですべてができるが、HTMLの場合、パソコンなどを使ってページの作成や修正をし、ファイルをFTPで転送する必要がある
- 出先でホームページの更新をする必要性が無い。ホームページビルダーのお陰で操作は簡単
  ブログ的な使い方をしている人には必要かもしれませんが・・・
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()">
マウスをボタンの上に乗せた時、
マウスカーソルを変化させたい時は cursor:pointer を追加
（例）・・・ onclick="cursor:pointer;history.back()">

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

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

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

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

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

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

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

2018年04月27日
ホームページや CSS を更新した時に、キャッシュを使用せずにWEBに読み込ませる方法

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

●「クエリー(Query)」を使う

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

その結果、更新したホームページが表示されなかったり、HTMLとCSSがうまく合わずレイアウトが崩れる場合があります。

これを防ぐ簡単な方法は、ホームページ内から .html や .css をリンク指定して呼び出すときに .html や .css の後ろに ?0815 のような「クエリー(Query)」を付けて呼び出します。

　<a href="syumi3.com/index.html?0815">趣味のページ</a>

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

変化があれば新しいファイルだと判断してキャッシュを使わずに読み込んでくれるようです。

更新した時の日付を付けると後でわかりやすいのですが、ファイル内文字列検索を使って削除や置換する時のために、桁数を合わせておくと便利です。

検索する時「正規表現検索」で

　　html¥?....

とすれば日付が違っても検索可能となります。

●ページ内リンク（ジャンプ）も指定する時

ページ内リンクの指定は「クエリー(Query)」の後ろに記入します。

通常は、

　　turi.html#turiba

のように記入しますが

「クエリー(Query)」を付けた場合はその後ろに追加記入します。

　　turi.html?0815#turiba

のように記入します。

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

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

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

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

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

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

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」に指定。

Windowsでは太さも指定、"Yu Gothic Medium", "游ゴシック Medium"
Macではフォント名が違う、YuGothic, "游ゴシック体"

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

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

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 に変換することにしました。

手順は

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

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

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

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

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

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

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

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

ホームページ作成 と サーバー関連

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

2018年05月09日 「戻る」「進む」「更新」ボタンの設置方法を整理

2018年04月27日 ホームページ や CSS を更新した時に、キャッシュを使用せずにWEBに読み込ませる方法