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

ホームページ作成 の 設置関連

2017年09月20日
 スマホの画面でも文字が見えるように、
    CSSとホームページの編集を開始

結果・・・残念ながら、色々なスマホのタイプや、Android、iPhone、ブラウザの種類により見え方がばらばらで、私の知識では改善できませんでした。
完全に作り直せば可能ですが、元気も時間もありませんので、この内容は検討のみで実施しておりません。

出先で自分のホームページを見ると、画面の文字が小さく、その都度画面を拡大しながら見ています。

スマートフォンで読めないぐらい文字が小さいのを、せめて読めるぐらいの文字で表示できるように編集を開始。

2017年9月20日から編集を開始したが、何年かかるか不明・・・


素人が我流で作成したホームページを何度も改造して現在に至っています。作業工数を考えると今回も既存のホームページを部分的に我流で改造することにしました。


編集内容

●スマホで見る時は基本的に横画面で見るように編集しているが、縦画面でも文字が読めるようにする。

●CSSの内容変更と、ホームページの内容変更は同時に行う必要がある為、変更したCSSファイルは名前を変えて同じ場所に保存して使用するようにする。

●CSSファイル内で、表示されているデバイスがパソコン画面かスマホ画面かを判断し条件分岐するようにする。

●ホームページ内の表の各行の横幅を%設定しておく。

●画像にも横幅を%設定しておく。(表示領域に対しての%設定になります)

●ホームページを編集した後、使用するCSSファイルの指定を変更する。


具体的な編集作業(下記の 1.~4.は万能ではなく、うまく機能しませんでした)

1.CSSファイルの、画面幅設定を条件分岐にする


条件分岐 使用例--------------------------------------------------------

#top-ichi-radicon {
position: relative;   /* 位置決めは 相対的 にしておくこと */
margin-left: auto;
margin-right: auto;
width: auto;      /* テーブルの幅をauto指定 */
}

/* パソコンの時はwidth: 950pxに変更する */
@media only screen and (min-width: 850px) {
#top-ichi-radicon { width: 950px; }   /* テーブルの幅をpxで指定 */
}

-------------------------------------------------------------------------

width: 950px にしておくと、スマホの画面にパソコンの画面通りに縮尺されて表示するので、文字が見えないほど小さくなる。

width: auto にすると、表示が崩れてしまうが読める程度に大きくなる。

分岐条件を850pxにしておくと、タブレットを縦にするとスマホ用になり、横にするとパソコンと同じ表示になりました。


2.CSSファイルの条件分岐で、一部のタイトル(h2)の色設定をパソコン時は 青、スマホ時は 赤 にして、動作確認をわかりやすくしておく。全て完了した時点でこの条件は無くすが、全て終わることは無いと思う。


3.CSSファイルのの条件分岐で、画面が狭くなり上部選択メニュが画面をはみ出した時、折り返し表示するように設定をする。

はみ出さないように文字を小さくすると、読めないぐらい小さくなってしまうため。

-------------------------------------------------------------------------

#hpb-nav {
clear: both;
position: absolute;
top: 232px;
height: 41px;
overflow: visible;   /* 上部の横長メインメニューが下に折り返される */
text-align: left;
background-image: url(../image-top/mainmenuBg_11V.png);
background-position: left top;
background-repeat: no-repeat;
font-size: 75%;
width: auto;
}

----------------------------------------------------------------------------


4.CSSファイルの条件分岐で、上部タイトルの background画像を切り替える。

スマホの時画面が狭くなり文字と重なって見ずらいので、スマホ用を作った。

----------------------------------------------------------------------------------------------------

background: url(../image-top/top-radicon-img02.png) right top no-repeat;

/* パソコンの時は */
@media only screen and (min-width: 850px) {
 #top-menu { background: url(../image-top/top-radicon-img01.png) righ t top no-repeat;
       }   /* 上部タイトルのバックの画像を変更する */
}

----------------------------------------------------------------------------------------------------


5.ホームページで使用している表の列に、横幅の比率を指定する。

  横幅を 20% 30% 50%等


6.画像のサイズ設定pxを解除し、横幅を%設定に変更する。


7.YouTube の動画も画像と同様に、スマホ画面からはみ出さないように調整する。

2017年08月09日
 ホームページ上の画像をクリックすると、
    その場で拡大表示するように変更(JavaScript & CSS)

ホームページ上の画像に拡大画像のリンクを張る時は、別のページを開いて単独で表示するようにしていました。

この場合、設定は簡単ですが、表示された画像を閉じる時は画像が表示されたそのページを閉じる必要があります。

今回の設定は、拡大画像のリンクが張られた画像をクリックすると、そのページ上の中央に大きな画像が表示されるようになります。画像を閉じる時は、画像上をタップするだけなので便利です。


参考にさせて頂いたホームページ と ファイルの入手先

  Lightbox+ ・・・ http://serennz.sakura.ne.jp/toybox/lightbox/?ja

  「ダウンロード」をクリックし lightbox_sample.zip をダウンロードします。


設定手順

サーバーのホームページを設置しているルート上に サブフォルダ「lightbox」を作成。

このサブフォルダの中に lightbox_sample.zip に含まれる resourceフォルダの中身 を全てコピーします。
(厳密にいうと、jojo.css と sample.css は不要です)


●画像拡大機能を使用したいページの <head>・・・</head>内 に下記の2行を追加します。

<link rel="stylesheet" type="text/css" href="/lightbox/lightbox.css" media="screen,tv" />

<script type="text/javascript" charset="UTF-8" src="/lightbox/lightbox_plus.js"></script>


●拡大画像を表示させたい画像リンクに、下記の青色文字の部分を書き加えます。

<a href="(拡大画像)" rel="lightbox"><img src="(小画像)" ...></a>


使用例

普段、私が別画面に画像の拡大表示をする時の記述は

  <a href="../image/bebop/bebop-battery.jpg" target="_blank"><img src=・・・

target="_blank" を rel="lightbox" のように変更しました。

  <a href="../image/bebop/bebop-battery.jpg" rel="lightbox"><img src=・・・

2017年01月30日
 パソコンやスマホ画面にホームページを張り付けた時
     表示するアイコンの記述方法と作成方法


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

ホームページのリンクをデスクトップに張り付けた時のアイコンや、エクスプローラーのタグに表示されるタイトルの先頭に、小さなアイコンを表示させる方法を調べてみました。

パソコン用は「ファビコン」、スマホ用は「ウェブクリップアイコン」と呼ぶようです。

今までは気になりませんでしたが、スマホの画面に張り付けると殺風景な四角い単色のアイコンだったり、中央にXマークが付いていたりしてあまり印象が良くありません。

これを解決するために、下記のような簡単な手順でアイコンが表示できるようにしてみました。もっと高度な手順があるようですが私の場合は今まで長い間無かったのでとりあえず表示されればよいという程度で実施しました。

パソコン用とスマホ用では準備する画像が異なります。


1.表示させるアイコンを作成する

作成した画像は でパソコン用とスマホ用でサイズを変更しました。「しゅみのぺーじ」の頭文字を使用。

パソコン用の場合は、ブラウザで使う 16 × 16 とデスクトップやエクスプローラーで使う 32 × 32 、48 × 48 のアイコンを作りマルチアイコンにすればよいようです。表示する場所に必要な大きさに近い画像を自動的に選択して拡大・縮小してくれるようです。しかし面倒なので、48 × 48px のアイコンのみpng形式で作りました。

画像フォーマットは PNG , GIF , JPG(JPEG) , BMP が使用できます。ファイル名は後で変換しますのでなんでもよいです。

1個しか作成していない場合は、必要な大きさに自動的に拡大・縮小してくれるようです。単純な画像なので縮小してもつぶれません。

作成したアイコンの柄が複雑な時は縮小すると柄がつぶれてしまうので、それぞれのサイズで作成した方が良いと思います。

スマホ用の場合は、144 x 144px のアイコンをpng形式で作りました。iPhone用とAndroid用の区別は有りません。

スマホ用のアイコンのファイル名は、「apple-touch-icon.png」とすれば良いようです。


2.パソコン用に作成した画像のみ favicon.ico に変換する

変換用アプリを使わず、下記のホームページで変換させていただきました。

  https://ao-system.net/favicon/index.php

それぞれの大きさの画像を指定して、作成をクリックするだけです。作成が完了したら favicon.ico をダウンロードします。

1個でもマルチでも作成してくれます。


3.表示させる画像ファイルを サーバーにアップロードします

●ホームページを設置しているサーバーの最上階であるルートディレクトリに配置します。

パソコン と iPhone では単純にこれだけで全てのページで機能します。


●Androidスマホではうまく表示してもらえないことが多いので下記のようなリンクを書き加えた方が良いようです。

<head>~</head>の間に以下のように ファイルの場所を指示した記述をすればOKです。

   <link rel="apple-touch-icon" href="http://www.サーバー.ne.jp/apple-touch-icon.png" />

   但し、アイコンを表示したい全てのページにこの記述が必要です。

しかし最近のAndroidスマホやタブレットでテストするとこの記述が無くても表示できましたので、必要ないかもしれません。


●ルートディレクトリに配置できない場合や、違う画像を表示させたいページには、

<head>~</head>の間に以下のように ファイルの場所を指示した記述をすればOKです。

<link rel="shortcut icon" href="http://www.サーバー.ne.jp/syumi/image/favicon.ico" />

<link rel="apple-touch-icon" href="http://www.サーバー.ne.jp/syumi/image/apple-touch-icon.png" />

但し、アイコンを表示したい全てのページにこの記述が必要です。


4.設置後の動作確認と注意事項

ホームページ作成ソフト(パソコン上)では機能しないので、必ずサーバーにアップロードして確認します。

うまく動作すると、Internet Explorerのタグに表示されるホームページのタイトルの頭や、デスクトップにショートカットを作成した時にこのアイコンが表示されます。

設置後に確認してもうまく機能していないように見えることがあります。

原因の一つは、パソコンのExplorerのキャッシュに古いデータが残っており、設定された更新時期が来るまで、又は閲覧の履歴を削除するまで新しいアイコンは表示されません。

例えばInternet Explorerの場合は、初期値では20日ごとに更新されているようです。

自分のパソコンですぐ確認したい時は、「F5」キーを押して表示ページを更新するか、Internet Explorerの場合は、インターネットオプションの「閲覧の履歴」を削除すれば新しいデータを読み込みます。

別の原因は、設置場所を間違っている場合です。サーバーによってはルートディレクトリにファイルをコピーできない場合があります。

例では、http://www.example.ne.jp/~syumi/ の下にホームページが設定されている場合、

http://www.example.ne.jp/ の下には配置させてもらえ無いことがあります。~syumi/ の下はルートディレクトリにはなりません。

2016年11月30日
 ホームページ の メニュー構成を変更

左端の縦長メニューが長くなりすぎて見づらくなったので、削除しました。


●変更前の問題点

各メニュー項目を追加し列記していくうちに長くなり、下の方が見づらくなった。

この左端の縦長メニューの幅の分だけ中央の表示部分の幅が狭くなり画像を多用すると画像を小さくしないと収まらない。

必要なメニューの項目を見落としてしまう。

●変更点

タイトルの画像を無くし、更新履歴は必要な各項目に移動。

左端の縦長メニューを無くし、中央部分を広くして、全体を見渡しやすくしました。

サイトマップを作り、全体のメニュー一覧を設置。

変更前(2016年)
左側に縦長メニューと中央に更新履歴を表示
変更後(2018年)
左側の縦長メニューを無くし全体を見渡しやすく

2016年06月03日
 ホームページをスマートフォンで見ると
  文字の大きさが変わってしまう不具合を修正

PC向けに作った Web サイトをスマートフォンでみると、「 意図せず部分的に文字が大きくなる 」といった不具合を修正。


実際の表示例では、同じページ内で同じ大きさの文字が表示場所によって大きな文字や小さな文字となって表示されてしまっていました。これはスマートフォン等のデバイスが文字を読みやすくする為に自動的に文字の大きさを変えている為だそうです。


まず CSS の body の中に下記の行を追加します
body {
    :
    :
  -webkit-text-size-adjust: 100%; ←この行を追加する
}


理由は、-webkit-text-size-adjust という、モバイル版ブラウザでのみ有効なプロパティがあるようです。
このプロパティが、デフォルトでは auto になっているため、文字が自動的に調整されて大きくなってしまいます。
これを追加することでiOS(iPhoneやiPad)は正常に表示するようになりました。


しかし、Android では -webkit-text-size-adjust プロパティを指定しただけでは、反映されないようです

反映させる為には ViewPort の scale 指定 をします。


scale の指定には、以下の3つの種類があります。
・initial-scale ... 初期拡大倍率
・minimum-scale ... 最小拡大倍率
・maximum-scale ... 最大拡大倍率


このうち initial-scale または maximum-scale を含めることで、Android でも -webkit-text-size-adjust の設定が反映されるようになります。

ただし initial-scale を指定してしまうと、画面の横幅ピッタリにページ全体が表示されなくなってしまいます。

したがって maximum-scale を指定するようにします。

指定方法は、面倒ですが 各htmlファイルの <head>・・・</head> の中に下記の1行を追加します。


リキッドレイアウトの場合(横幅がブラウザサイズに追随するレイアウト)

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, maximum-scale=1.0, user-scalable=yes" />


ソリッドレイアウトの場合(横幅を固定しているレイアウト)

<meta name="viewport" content="target-densitydpi=device-dpi, width=960, maximum-scale=1.0, user-scalable=yes" />

このホームページの場合は、「HOME」の画面のみソリッドレイアウトとなっています。


ソリッドレイアウト(横幅を固定しているレイアウト)の場合は、ViewPort の width は絶対指定しておいたほうが良い。
例えばメインコンテンツは横幅 960px 固定で、ヘッダやフッタだけブラウザの横幅いっぱいに背景画像を表示させる場合、 width に device-width を指定してしまうとそのデバイスの横幅で背景画像が途切れてしまいます。
理由は、その背景画像のエレメントに CSS で指定された width: 100% が、device-width からの相対値として計算されるためです。device-width が 360px であれば、 360px で途切れてしまうのです。

width=960 のように、「最低限表示させたい横幅」を指定することで、960px のうちの 100%、つまり 960px の幅だけ背景画像が表示されるようになります。


以上で、iPhone や iPad ではPCと同じ表示になりました。

Androidのみ一部不具合が出るページがあります。この対策として、

「我が家の愛犬達」のメニュー画面にも width=960 を設定しないとうまく表示できませんでした。

「その他・メモ書き」のメニュー画面のみ現在もうまく対策できていません。

2015年09月01日
  無料サーバーXdomain にホームページを全て移動

(2015年09月01日 から 2018年09月11日まで3年間 使用、現在はスタードメインに移動)

FC2の無料ホームページは常に転送速度や表示速度が遅いので、無料サーバーXdomain にホームページ全て移動することにしました。

実際のページが表示される時間(レスポンス時間)を測定してくれるホームページを利用させていただき調べてみました。午後9時ごろに測定。

「鉢植えの果物」の先頭ページを表示する時間を測定(5回測定した平均)

KCN 近鉄ケーブル FC2 無料サーバー Xdomain 無料サーバー
(無料スペース 50MB) (無料スペース 1GB) (無料スペース 1GB)
0.041秒 0.362秒 0.031秒


測定の結果、体感速度と同じような結果となりました。

ホームページ作成後の転送時間も、KCN近鉄ケーブルとXdomain無料サーバーは気になるほど時間がかかりませんが、FC2無料サーバーは非常に時間がかかります。

Xdomain無料サーバーは、ホームページの設置に関しては画面にPRが表示されません。

問題点は、どちらの無料サーバーもCGIが使用できません。

現在は各ページでCGIを使用していますので、CGIのプログラムをKCN近鉄ケーブルに置いておき、設置したホームページから呼び出す方法をとっています。

2014年03月03日 無料サーバーFC2を使用した感想と変更点

★転送速度が少し遅いようです

作成したホームページをFC2へ転送する時の転送速度が思ったより遅く、現在のKCNと比較し20倍ほど時間がかかっています。

★FC2のアクセス解析の利用を中止しました

解析用のタグを設置するとページを開く都度FC2へアクセスすることになるので、ページの表示完了までの時間も当然余計にかかってしまいます。

さらに現在まで使用していたアクセス解析より表示内容が少ないので、FC2のアクセス解析を使用するメリットがなくなりましたので解析の利用を中止しました。

★設置スペースが大きいので楽

ホームページの構成変更や追加のテストを行っても容量的には全く問題なく、趣味のホームページでは充分なスペース。今までの苦労はなんだったんだろうという感じ。

2014年02月14日
 ホームページ設置スペースが不足してきたので、
 一部のみ無料サーバーFC2へ移動しました

ホームページを 1999年1月 に開設してから15年経ちました。

当初から近鉄ケーブルネットワーク(KCN)と契約し、インターネット・テレビ放送・光電話を利用している。

通信環境や金額等不満は無いのだが、無料のホームページ設置スペースが50MBと少ない。

今までは出来るだけ画像を小さくしたり枚数を減らしたりと色々工夫してきましたが、限界に近づき今日現在数字上では44MBとなっています。

近鉄ケーブルの利用条件と世間の状況は、


女房から 無料レンタルサーバー FC2 が使いやすそうと聞いた。友達がブログをやっているらしく評判も良いようだ。

無料で1GBまで使用できるので、現在の20倍の容量になる。一度試してみることにした。

ホームページの中身は相対位置指定となっているので、CGI以外は手直しせずに全てコピーすれば動作する。


設置時に下記の点の確認が必要

以上の内容を検討し、自分なりに判断してFC2に設置した。

現在のホームページの一部をKCNに設置したままにすると、FC2でもCGIが使用できることがわかったので全く手直し無しでコピーした。

現在のCGIで作った訪問カウンターやアクセス解析はそのまま使用し、FC2で提供しているアクセス解析を追加してみた。


まだ数日なので導入時の感想としては・・・・・

2014年01月 CSSを使用してホームページのリフォームを始めた

使用しているホームページビルダーのバージョンを16にしたので、この機会にCSSを使用してみることにした。

バージョン17や18の特徴であるWordPress (ワードプレス) は必要ないので手頃な16にした。

今まではフレームを使用して作成していたが、今後はフレームは流行らないようなので少し頭を切り替えてみた。

参考までに色々なホームページを訪問してみたが、フレームを使用しているホームページは見当たらない。

しかしフレームもいいところがあり、左側のメニュー部分を固定した状態で右のメイン画面を上下に移動させながら表示できる。

これはCSSでは実現できず、左のメニューと右のメイン画面が一緒に上下される。

フレームを使うとタイトルとメニューはそのままにして、メイン部分だけ簡単に入れ替えが出来るのでページの追加が楽というメリットもありました。

今回のリフォームでファイルを書き換えた為、CGIを使って更新日を表示するとファイルの更新日が表示され、内容の更新日とずれてしまいました。私の能力では対処方法がわからないので、「更新 と コメント」の欄を作りここで補足しました。