a{height:48px;width:48px}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}#search-menu-input:checked~#search-menu-content{-webkit-transform:translateY(20%);transform:translateY(20%)}.search-menu-content{padding-top:40px}WordPress初心者がブログ運営する上で必要なバックアップ方法。CSS・HTMLの基礎がわかるステップを丁寧に説明。運営者情報ホームWordPressステータスコード関連エラーが出ても復活する。Unavailableは、サーバーの503ページが表示されるけど、自分でエラーページを作成・編集して設置することも可能です。(HTMLはひな形として作成、ダウンロードできるページも追加しました。)なぜ503が表示されるのか原因の説明WordPress初心者がエラーページ画面を簡単に設置・作成する工程contact-form-7お問い合わせ画面の簡単設置方法おまけ。Errorページの作成方法これら4つを初心者向けにご紹介します。Unavailableの原因など知っておきたいトコロです。503とは何かと言えばhttpステータスコード。ページを表示するサーバーにはネット上のデータが保存し、リクエスト(アクセス)されたページを表示しようとすると同時に、どのように表示したかもブラウザ画面に返します。ページ表示しようと行った処理『こんな事をして今の画面を表示したよ!』という結果を3ケタの数字であらわしたのが、ステータスコード(3ケタの数字)です。数字の意味は、ちゃんと表示した、リダイレクト転送して表示した、表示できなかった。それぞれ違った意味を持ちます。LINKヤバイ!初心者向けで凄い解るHTTPステータスコード301.403.404.500等の意味ポイント500番台はサーバー内部のエラー。503番は、サーバー内で負荷がかかったとき、メンテナンスのときに表示される。Errorとして扱われることも。Unavailable・PCビューサーバーの503ページは一般的な内容なので、運営者の言葉として伝えることができませんよね。はみ出さないようレスポンシブ対応させて作りました。以降レスポンシブ対応のCSSコードの意味、記載内容は割愛します。Unavailableページ・スマホビューなぜ503エラーが表示されたか、内容やメッセージを載せるページに訪れたユーザーは503エラーの意味が理解できない場合も多々いるはず...。そこでユーザーさんに伝えたい内容と説明次につながるメッセージ、503ページに記載する内容を考えます。このページが表示されたか運営者の気持ちを伝えるコンタクトフォームまたは、コンタクトが取れる手段を乗せる書いた内容は下記。サービスを利用できませんアクセス急増のため規制がかかりぺージが表示できません。Unavailableを表示しています。お手数かけて申し訳ございません。サーバーは、ブログやサイトにアクセスがあれば表示させる場所です。一般的な共有サーバーを使っているため、共有する他サイトに迷惑がならないよう、制限がかかってる状態です。ビバ★りずむphpファイルに書き込むコード普通に書いてもそっけないので、phpファイルにhtmlタグを書いて装飾し表示させれば、多少...見やすくなります。phpファイルに書く内容は、下記コードのbody内のコードをWordPressの投稿より、テキストエディタにコピペして、ビジュアルエディタで好きなように編集すれば、段落・改行以外のタグは自動で挿入してくれるので、初心者でも簡単に編集できます。最後にWordPressのテキストエディタのコードをコピーして、アップするエディタにペーストし、段落だけタグを追記すれば編集が完了です。class="error-1"><p>アクセス急増のため規制がかかり</br>ぺージが表示できません。Unavailableを表示しています。</p><p>お手数かけて申し訳ございません。</p><p>サーバーは、ブログやサイトにアクセスがあれば表示させる場所です。一般的な共有サーバーを使っているため、共有する他サイトに迷惑がならないよう、制限がかかってる状態です。ビバ★りずむ</footer></body></html>やたら長いのはCSSを見やすく成形してるから。WordPressテキストエディタで本文を編集したい場合、87行目~96行目をコピペして貼り付け編集してください。スタイルを変更したい場合は、head内のstyleにまとめてるので、変更してください。9~20行目は横幅500pxまでのスタイル。23~82行目は全体のスタイルにしてます。コンタクトフォームを使用しない場合は97・98行目を削除してください。こんな感じになるので、その対策みたいなもの。7のお問い合わせを付けたい場合、入力欄や送信ボタンの幅が狭いので、高さを足してレスポンシブにしました。使わない場合はこの記載を消してOKです。強制的にエラーを出している場合は送信できる。–>を消してそこに、あなたの設置しているコンタクトフォームをいれてください。7|WordPressプラグインを導入している人用です。PCでアクセスして、コンタクトフォームのIDや設置ページのpost(ページ投稿したときの番号)などをコピーする方法で、あなたが設定した『問い合わせ画面』よりそのままコードをコピペするので、超簡単!Chromeなどで要素の検証F12キーをクリックしてください。elementをクリック。これでフォーム全体のHTMLがコピーできました。文字コードのUTF-8bomなしを選択できるテキストエディタがを準備してください。Windowsで使えるTeraPadが便利なので、それを使って説明しますね。index.phpをデスクトップなどにダウンロード。パス:/domain.com/public_html/wp-content/themes/親テーマフォルダ内/適当なPHPファイルファイルを開いて全て消したら、上述コードを貼り付ける置き換えたい文字があるので、それを置換します。あなたのサイト名すべて置換をクリックすべてをクリックこれを下記の4通りしてください。ビバ★りずむ(サイト名)かうたっく(ブログの名前など)kautakku(ツイッターのアカウント)2015(あなたが始めた年)または探して削除して書き換えてください^^body内の上記4つを書き換え、保存。大事なのは、ファイル名503と拡張子.phpにして保存することです。503.phpファイルより名前を付けて保存を選択。phpが選べない場合・文字コードはUFT-8しかないので触らない!Winメモ帳:503.txt・文字コードは触らないFTPソフトでアップするとき、503.txtを右クリックして名前を503.phpに変更してアップすればOK!文字コードは自動で変換されてShift_JISになる。Shift_JISのとき文字化けするので、サーバーのWeb上にあるFTPからUTF-8に文字コードを変更し保存すればOK!FTPソフトの設定を一時的にutf-bomなし(n)に変更しても良いですね❦LINKロリポップFTPの使い方サーバー:Web上のFTPが分からない場合は、文字コードをUTF-8n(Bomなし)が選択できるテキストエディタを持ってると、便利です。WordPressを運営してると使えますよ!503.phpを設置する場所WordPressを入れているフォルダ内、wp-adminがある場所と同じディレクトリ(階層)です。該当のブログ内にあるWordPressファイルこの階層に作ったファイルを入れてください。独自ドメインの場合は下記を参考にしてください。サブドメインなどは割愛します。エックスサーバーの場合、public_htmlフォルダ内domain.com/public_html/503.phpロリポップの場合、domain.comフォルダ内domain.com/503.php次、同じ階層にある.htaccessファイルに追記します。.htaccessに503が出たら自作画面を表示するコード503番が出たら自作の503.phpを表示するよう、追記します。場所は上述通り、設置するブログの503.phpを入れた階層の.htaccessファイル。変な数字が入らないよう、下記コードのみ貼り付けてください。Unavailableが出たら503.phpファイルの内容が表示されます。カスタマイズしたページを確認したいとき、あなたのURL/503.phpで確認できます。私の場合は、https://bibabosi-rizumu.com/503.phpとなります。上記コードに加えて、下記ようにコードを追加すれば、503ページを強制的に出力できます。Unavailableエラーページに画像を入れたい503画面にどうしても画像を入れたい場合、サブドメインなど使って画像を入れると表示されます。サブドメインに入れるのかは、下記。該当ドメインdomain.comのディレクトリ(階層)以下は503が表示するため。別のドメイン・サブドメインなど503が出ていないディレクトリの画像を使えば表示される表示される環境でなければ表示されない。画像を入れたサブドメインを誰にも見せない設定にしてると、もちろん見えない。100%;">http://sub.domain.com/画像のパス/503.pngの部分に別ディレクトリのサブドメインなどの画像のパスを入れてください。内容:500エラーの原因・なぜ500エラーが出たかを書くファイル名を500.phpにするファイルをアップする場所は、上述の503.phpと同じです^^ファイルをアップし終わったら、.htaccessファイルの一番下にでも追記してください。/500.php上記の503の自作と同時に500エラーも作りたい場合。/503.phpテスト環境で、全ページ500エラーにして表示を確認したい場合。内部サーバーエラーただ今、運営者かうたっくの操作ミスによりページが表示されていません。Error(内部サーバーエラー)と言う意味でサーバー内部で起こったエラーです。運営者のファイル操作ミスが原因で、お手数かけます><500?ステータスコード?この意味はステータスコードは、運営者が契約している情報を表示する場所:サーバーから、あなたの画面に『情報を表示するとき』同時に、『サーバーはこんな処理をして表示したよ。』と送っているコードです。正常に表示している場合、コードが送られているのに気付きません。不具合があればエラー画面を表示して、今の状況を訪問してくれたあなたにお知らせします。運営者がエラーに気付いていれば、もうエラーが解除されてるはず!初心者向け・凄い解るHTTPステータスコードとはを見てみる。内部サーバーエラーの原因を見てみる。target="_blank">かうたっく</a>の操作ミスにより</br>ページが表示されていません。Error(内部サーバーエラー)と言う意味で</br>サーバー内部で起こったエラーです。<li>500?ステータスコード?この意味は</li></ul><p>ステータスコードは、運営者が契約している情報を表示する場所:サーバーから、あなたの画面に『情報を表示するとき』同時に、『サーバーはこんな処理をして表示したよ。』と送っているコードです。</p><p>正常に表示している場合、コードが送られているのに気付きません。不具合があればエラー画面を表示して、今の状況を訪問してくれたあなたにお知らせします。target="_blank">初心者向け・凄い解るHTTPステータスコードとは</a>を見てみる。内部サーバーエラーの原因</a>を見てみる。ビバ★りずむ</footer></body></html>phpファイルの本文編集・ポイント500エラーと503ページの基本の装飾CSS、骨組みになるHTMLは同じです。Error画面503.phpからの変更点と、内容文面を書くエリアを参考まで書いておきますね。class=”error”>//この下から枠で囲まれる。class=”error”に囲まれた上記は枠で囲まれる仕様。class=”error-4′′>ちょっと大きな文字</p><p>テキストエディタで書いた内容に段落<p></p>で囲いコピペ</p>ココに好きな事書く<ul><li>リストタグol・ul・liは段落のタグ<p></p>で囲わなくてOK!</li></ul>最後フッター前の下記divの閉じタグ</div>は消さない</div>後は上述どおり、503エラーページと同じ作りです^^難しい!503.phpのひな形が欲しい難しいけど、誰でも簡単に設置できるひな形が欲しい場合。一切503.php・500.phpを触りたくないバージョンをダウンロードできます。自分専用ではないので、かなりシンプルに状況を伝えた文章です。LINK3分で完了!WordPreesの自作500・503エラー画面、PHPファイルのダウンロード・設置テキストエディタを持っていて、簡単な変更ができる人用に503.phpひな形が欲しい場合は、下記に内容を乗せています。下記リンクでダウンロードして編集してください。この投稿を超簡単に説明したのは、上記リンクです。Unavailableエラー自作PHPファイルのダウンロードさいごに503が出るのは膨大なアクセスが押し寄せてキャパオーバー!コレが大きな原因の1つですよね。一定のファイルxmlrpc.phpだったような?への攻撃で負荷がかかる場合もあるとどこかで見ましたよ。細かい部分に目をやると、ページの読み込みが異様に多いとかあるかも知れませんよね。リダイレクトするときも転送回数には気を付けたかったり。あるでしょうけど、503で悩まれてるなら、サーバーの変更が一番良いのかなぁ...とか思います。膨大なアクセスは経験したことないので、具体的な内容は書けませんが❦エラーページ作りなら404ページも、チェックしてみてはいかがでしょうか^^LINKWordPressで404エラーページをカスタマイズ!超簡単に工夫して作る方法それでは、かうたっくでした!スポンサーリンクスポンサーリンクこの記事が気に入ったらいいね!しよう最新情報をお届けします。Forbiddenの原因はWAF!対処し解決する方法!:ロリポップ、さくら、ヘテムルのサーバー403エラーForbiddenの意味とは、閲覧を禁止されたページです。ブログ運営者が管理画面から出したとき大半の原因はWAFで、セキュリティにWAFを導入してるロリポップ、さくら、へテムルのサ...2015.03.29ステータスコード関連WordPressでトップページが404ページになった時の対処WordPressでブログのトップ(フロント)ページが404になったとき、確認することを紹介します。初めに404ページとはページが存在しないことを表すステータスコードです。Forbidden!WAFの誤認を初心者向けに、ストーリーにして説明WordPresで投稿画面やphpなど更新しただけなのに、指定されたページへのアクセスは禁止されています。Forbiddenが出てしまった。初心者用に「ステータスコードとは何か」を説明します。詳しい説明みると、何のことかさっぱり・・。ウィキの説明が理解できるように『知識の底上げ』として書いてます。ERRORさらに404のエラー三昧メモ。Pluginの設定のWAFチューニングサポートがあります。Error)の意味とは?「500エラー」は、CGI「ウェブサーバ上でユーザプログラムを動作させるための仕組み上のエラー」とwikiであり、何の事だか難しい...。Forbiddenを出した行動をWAFチューニングサポートのルールに追加し誤認を減らす・なくす方法をご紹介。TemporarilyエラーでURLが無限ループ!原因は、WordPressのプラグインの競合だったWordPressにログインした時、302エラーが出てURLがリダイレクトループを起こしたときの初めに試す対処法です。ページが一時的に別の場所に移動してしまった302エラーは、元に戻さない限りhttp...2016.03.24ステータスコード関連3分で完了!WordPreesの自作500・503エラー画面、PHPファイルのダウンロード・設置WordPressを運営して思いもよらずエラー画面を表示する場合があります。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。個人情報の取り扱いについてはリンク先をご確認ください。他社からエックスドメインへの移管申請。エックスサーバー側の全工程2020.01.22ムームードメインから.comなど.jp以外のドメイン移管、全工程をブログで説明。Cacheの設定を変更すればOK2018.10.30タニタの体組成計が、体重しか表示されなくなったとき試すこと2018.10.26Cocoonテーマのアップロード方法!インストールなど失敗する原因・対処方法付き。他社からエックスドメインへの移管申請。エックスサーバー側の全工程2020.01.22ムームードメインから.comなど.jp以外のドメイン移管、全工程をブログで説明。Cacheの設定を変更すればOK2018.10.30タニタの体組成計が、体重しか表示されなくなったとき試すこと2018.10.26Cocoonテーマのアップロード方法!インストールなど失敗する原因・対処方法付き。レンタルサーバー『エックスサーバー』エンジニア特化型Q&Aサイト【teratail(テラテイル)】無料会員登録カンタン&お得に可愛くなれる♪Rcawaii─登録30秒、カワイイ洋服借り放題!プロのおしゃれテクも学べて月額9,980円タイトルとURLをコピーしました。