ホームページ作成 の 設置関連
2017年08月09日
ホームページ上の画像をクリックすると、その場で拡大表示するように変更
ホームページ上の画像に拡大画像のリンクを張る時は、別のページを開いて単独で表示するようにしていました。
この場合、設定は簡単ですが、表示された画像を閉じる時は画像が表示されたそのページを閉じる必要があります。
今回の設定は、拡大画像のリンクが張られた画像をクリックすると、そのページ上の中央に大きな画像が表示されるようになります。画像を閉じる時は、画像上をタップするだけなので便利です。
参考にさせて頂いたホームページ と ファイルの入手先
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ソース」画面で編集します。
ホームページのリンクをデスクトップに張り付けた時のアイコンや、エクスプローラーのタグに表示されるタイトルの先頭に、小さなアイコンを表示させる方法を調べてみました。
パソコン用は「ファビコン」、スマホ用は「ウェブクリップアイコン」と呼ぶようです。
今までは気になりませんでしたが、スマホの画面に張り付けると殺風景な四角い単色のアイコンだったり、中央にＸマークが付いていたりしてあまり印象が良くありません。
これを解決するために、下記のような簡単な手順でアイコンが表示できるようにしてみました。もっと高度な手順があるようですが私の場合は今まで長い間無かったのでとりあえず表示されればよいという程度で実施しました。
パソコン用とスマホ用では準備する画像が異なります。
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年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 を設定しないとうまく表示できませんでした。
「その他・メモ書き」のメニュー画面のみ現在もうまく対策できていません。
