レンタルサーバーでDNSが引ける前にページの確認

レンタルサーバーにて、引っ越しをする前に、まだDNSが引けてない前に、移動先での動作確認をしたいものだ。
レンタルサーバー屋に質問したら、自分のPCのhostsってファイルを修正すれば見れるらしい。

今回はWindows10

C:\Windows\System32\drivers\etc

の中に、hosts というファイルがあるので、ディスクトップにでも移動して、そこに下記を付け加えればOK
管理者権限が必要なので注意が必要。

「IPアドレス+半角スペース+ドメイン名」

つまり、具体的に記載するなら、

555.444.333.222 hogehoge.co.jp
555.444.333.222 www.hogehoge.co.jp

を記載して、もとの場所に戻せば見れるようになり、旧サーバーでのサイトは見れなくなる。
つまり、自分のPCだけで見れている状態ってことです。

ホームページ カレンダー機能 datetimepicker

ホームページでカレンダー機能でフリーのdatetimepickerの使い方。

#######入力用HTML#######

<dt>希望日<span>Day</span></dt>
			<dd><input type="text" id="希望日" name="希望日" value="" readonly="readonly" /></dd>

#####################

###入力用JAVAスクリプト設定####

<script type="text/javascript" src="js/jquery.datetimepicker.js"></script>
<script>
	$(function(){
		$('#希望日').datetimepicker({
		timepicker:false,  ←この部分がオプションで、時計表示しない設定
		format:'Y.m.d'   ←この部分がオプションで、2017/03/30 表示に整形
		});
	});
</script>

#####################

HTML テーブルの線を消す

ホームページを作成していて、写真と文字を合わせるためにテーブルを使う時がある。その時にテーブルの枠線を透明にしたい場合もある。その方法。
<table style=”border-style: none;” border=”1″>

<tbody>
<tr>
<td style=”border-style: none;”>テスト</td>
<td style=”border-style: none;”>テスト</td>
<td style=”border-style: none;”>テスト</td>
<td style=”border-style: none;”>テスト</td>
</tr>
</tbody>
</table>

 

つまりは、

style=”border-style: none;”

style=”border-style: none;”

を突っ込めばいいようだ。

IPhone safariブラウザでの文字化け

パソコンやアンドロイド系(chrome)なら問題なく表示しているサイトが、IPhoneでは文字化け。困ったものです。

HTMLないで、下記の宣言をしてあげたら直った。

括弧meta http-equiv=”Content-Type” content=”text/html; charset=shift_jis”括弧
括弧html lang=”ja”括弧

※括弧ってかいてあるところは、<>の意味です。ワードプレスが勝手に表示させなくしてしまうのを回避しています。

指定改行コードは、shift_jis 改行コードは CR+LF

これで問題なく表示された。

ホームページビルダー設定

ホームページビルダーを使っていると、保存するのに激重だったり、勝手にエラー修正されて取り返しのつかないことになったりする。そこで、設定をすることで改善されるようだ。

まずは、保存のスピードの改善

●ツール → オプション → 編集 → 再編集 → 再編集用データを生成するをOFF

再編集用のデータを作成するので2倍の時間がかかるのなか~~~

●ツール → オプション → ビジュアルサイトビュー

展開レベル⇒エラーあるページまで展開のチェックを外す。

サムネイル表示⇒表示しないにチェック。

全体図表示⇒表示しないにチェック。

 

次に勝手に修正を防ぐ方法

●ツール → オプション → 一般 ⇒ HTML構文エラーを自動修正する のチェックを外す。

※エラーの表示方法が、ドロップダウンででているので設定できるようだ。

CGIが動かない時

簡単なCGIさえも動かない状況でサーバーを疑って、htaccessを設定しなおしてみたりいろいろとやってみてもダメ。

原因が分からない場合。今回は、転送モードでした。FFFTPの転送モードがバイナリモードになっていたためのエラーでした。

 

ファイルによる自動選択にしておけば問題ないのだが、何かの拍子に押してしまったのだろう。この為に、3時間を損した。

前にも同じ状況があったので、この備忘録に残しておく。

ホームページの高速化

ホームページが重い。重すぎる。

下記のサイトで調べる事ができる。

https://developers.google.com/speed/pagespeed/insights/

 

ということで、こんな方法があるようだ。

mod_deflateはコンテンツを圧縮して、転送量を減らすことで高速表示を可能にするモジュールです。転送量が減る反面、CPUの処理は増えるため、ボトルネックがCPUの処理能力の場合は逆にレスポンスが低下する。

そのため導入後のリソースの監視と速度測定が必要になるが、最近の高速なCPUであればどちらかと言えば回線がボトルネックになるため、多くの場合はmod_deflateの導入によって高速化されるようだ。

サーバの設定を変更することができる場合はモジュールの読み込みを「httpd.conf」に記述するが、レンタルサーバで「.htaccess」に記述する方法もある。
<IfModule mod_deflate.c>
     SetOutputFilter DEFLATE
     AddOutputFilterByType DEFLATE <type>
</IfModule>

 

CSS レイアウト

33このレイアウトをCSSで作成する。

CSSには、下記を記述。

header」が上段、「left」が左、「middle」が真ん中、「right」が右、「footer」が下段を意味しています。 「my_body」で2段目全体の幅を設定しています。 3列のレイアウトは、2列のレイアウトよりも条件が厳しいらしく、 幅の長さをきちんと設定しないと、ブラウザによっては、サイドバーが下に落ちたり、ずれたりするいわゆる「カラム落ち」をする。

<style type=”text/css”>
#my_body {
width : 600px ;
}

#header {
width : 100% ;
background-color: #ff8c00;
}

#left {
width: 200px;
float: left;
background-color: #7fff00;
}

#middle {
width: 200px;
float: left;
background-color: #cccccc;
}

#right {
width: 200px;
float: left;
background-color: #00bfff;
}

#footer {
background-color: #b22222;
width : 100% ;

clear: both;
}

</style>

 

HTMLの方には、

<body>と</body>の間に、 以下の記述

<div id=”header”>
本文『上、幅100%色ff8c00』
</div>

<div id=”my_body”>

<div id=”left”>
本文『左、幅200px色7fff00』
</div>

<div id=”middle”>
本文『中、幅200px色cccccc』
</div>

<div id=”right”>
本文『右、幅200px色00bfff』
</div>

</div>

<div id=”footer”>
本文『下、幅100%色b22222』
</div>

 

 

HTTPDヘッダーの環境変数

SERVER_NAME CGIスクリプトを実行しているホストのホスト名またはIPアドレス(URLのホスト部)
SERVER_SOFTWARE CGIスクリプトを起動したサーバの種別。例えばCERN/3.0とかApach/1.3など。
GATEWAY_INTERFACE サーバが実行しているCGIのバージョン。UNIXで動いているサーバの場合、CGI/1.1のはずである。
SERVER_PROTOCOL サーバが実行しているHTTPプロトコルのバージョン。HTTP/1.0やHTTP/1.1など。
SERVER_ROOT サーバが使用してるTCPポート番号。Webサーバの場合、通常は80番。
REQUEST_METHOD フォームの提出方式(POSTまたはGET)。
HTTP_ACCEPT ブラウザが直接表示できるContent-typeの一覧(HTTPのAcceptヘッダーの情報)。
HTTP_USER_AGENT フォーム情報を提出してきたブラウザの情報。通常はブラウザ名、バージョン番号、およびプラットフォームや追加機能を表す付加情報から成る。下の情報は、現在見ているブラウザの情報である。
HTTP_REFERER このフォームを生成したWebドキュメントのURL。必ずしもすべてのブラウザがこの値を送ってくれるわけではない。
PATH_INFO GETによる問い合わせにおいて、スクリプトのURLの後ろに付加されているパスの情報。
PATH_TRANSLATED ATH_INFOに入っている情報をシステム固有のパス名に変換したもの。
SCRIPT_NAME このCGIスクリプトの名前(URLに現れるもの)。
QUERY_STRING GETによる問い合わせにおける引数情報。URLで「?」の後ろにあるものすべて。
REMOTE_HOST スクリプトを提出してきたホストのホスト名。この値は正しく設定されない場合もあるので注意。
REMOTE_ADDR スクリプトを提出してきたホストのIPアドレス。
REMOTE_USER スクリプトを提出してきたユーザのユーザ名。この値はサーバ認証機構が使われている場合のみ設定される。
REMOTE_IDENT Webサーバとスクリプトを提出してきたシステムがともにidentプロトコル(ユーザの同定確認を行うプロトコル)を実行している場合、identプロトコルによって同定された値が入っている。
CONTENT_TYPE POSTによってフォームが提出されてくる場合、通常はapplication/x-www-form-unlecodedという値になっているはずである。
CONTENT_LENGTH POSTによってフォームが提出してくる場合、標準入力から読み込む必要のあるバイト数。
HTTP_COOKIE このURLが保持している個人認証ID(Cookie)。ブラウザが保持している。
DOCUMENT_NAME このページのファイル名
DATE_LOCAL このページに来た時間
LAST_MODIFIED このページの最終更新時間
AUTH_TYPE 認証方式

ホームページに戻るボタンを設置

縦長のホームページの場合、戻るボタンが右下に付いてきてくれると非常に助かる。手でスクロールしまくるのはちょっと辛い。ということで、設置できます。

(1)まずは、htmlの内にjavascriptを設置します。

(2)次に、内の一番下の方に、

<p id=”page-top”><a href=”#”>PAGE TOP</a>
※<>は大文字全角をつかっているのでコピペで使用しない様にしてくださいね。

【】内を記述してね

(3)CSSに下記を追加すれば、スクロールが出現するようになる。微調整や、ボタンの変更などは、誰かのページをみれば乗っています。

#page-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 77%;
}
#page-top a {
background: #666;
text-decoration: none;
color: #fff;
width: 100px;
padding: 30px 0;
text-align: center;
display: block;
border-radius: 5px;
}
#page-top a:hover {
text-decoration: none;
background: #999;
}