サイト制作中または更新中に、フロントエンドの公開を停止する設定「サイトオフライン」を“はい”にしてる時に表示されるページ「サイトオフラインページ」
不正なURLが入力された時、またはサイト内でリンク切れが発生している時などの「404エラー」や、アクセス権限が問題の「403エラー」。これらのエラーが発生した時に表示される「エラーページ」。
これらは、できることなら「あまり見せたくない」ページです。
ですが、サイトオフライン状態で作業しなければならない時もあったりするでしょうし、うっかりリンク切れで404がでちゃう事だってたまにはしょうがないでしょ(;.;) まあ、基本的に見せたくないものなので、あえていじる必要もないかもしれませんが、『“404エラーページ”、“サイトオフライン”ページをカスタマイズ!?」の巻です。
ちなみに
「Google Webmaster Central」のウェブマスターツールに「拡張された 404 ページ」という項目があり、そこには…
ユーザーがリンクをクリックして、サイト内の存在しないページにアクセスすると、サーバーから 404 (ページが見つかりません) エラーが返されます。このような一般的なメッセージは利便性が低いため、独自の 404 ページを作成して、サイトに関する有益な情報を提供することをおすすめします。
とあります。
つまり、404ページが出てしまった為にユーザーがそのままサイトから離脱してしまったら「×」
404ページが出ないのが一番良いのでしょうが、出てしまってもサイトの有効なページに導く事ができれば「△」
「△」を経て、ユーザーが求める情報を提供できれば…結果的に「○」にする事ができるかもしれません。
データはどこにあるのか？
まずは、これらのページ（の元となるデータ)がどこにあるのか。どちらのページも
の中にあります。サイトオフラインページは「offline.php」。エラーページは「error.php」です。このデータを修正すれば、「404エラーページ」や「サイトオフラインページ」をカスタマイズできます。が、phpって…。わからない人はちょっといじるの怖い気がしませんか？ 私も怖いです。エラーページがエラーになって、エラーページのエラーページが表示されちゃうなんて（。ﾍ°） エラーのエラーっていったどんなだよ！って感じですよね〜(^^ゞ
っつ〜ことで、またしてもあんまりむつかしい事はやらない事にして…、消しちゃいけないコードを間違って消しちゃったりしないように…あたりさわりの無い部分だけいじりましょう！
「offline.php、error.php、offline.css、error.css」これらのデータは、Joomla!から（ブラウザで管理画面から）修正することはできません。FTPでサーバーからダウンロードして、PC上で修正、またFTPでアップロードって感じです。
オフラインページを“ちょっとだけ”カスタマイズ
このサイトは今のところ、ほとんどオフラインにする機会も無いのですが、ちょっといじってみました。
いじったのは3カ所
- offline.phpソースの28行目あたりにある、Joomla!ロゴイメージを当サイトのタイトルイメージに変更
- 上記のタイトルイメージの幅が大きすぎて、ワクからはみ出したので、27行目当りにある<div class="outline" id="frame">に対するcss（offline.css）内#frameのwidthを400pxから600pxに変更
- 29行目あたりにある、サイトタイトル<h1>が大きすぎるのでちょっとcss（offline.css）に<h1>タグに対する指定を追記。
イメージ画像（Joomla!ロゴ）を変更する
offline.phpソースの28行目あたりにある
<img src="/images/joomla_logo_black.jpg" alt="Joomla! Logo"
align="middle" />
を変更します。
当サイトの場合は「stories」内に「siteimages」というフォルダを作成し、その中にある「joomla-sitetitle2.png」を表示するようにしたので、ソースは
<img src="/images/stories/siteimages/joomla-sitetitle2.png"
alt="Joomla!の参考書" align="middle" />
としました。altは画像にあわせて適当な文言に変更しましょう。
css（offline.css）をプチカスタマイズ
オフラインページ（offline.php）の見栄えは、offline.cssに手を加える事で変えられます。offline.cssは
にあります。まず、罫線（<div class="outline" id="frame">のボーダー）で囲まれた「箱」の幅を広げます。
“class="outline"”か“id="frame"”を設定している部分をいじるとなんとかなりそう。offline.cssの「#frame」か、23行目あたりに「#frame」ってのがあります。見てみると
#frame {
margin: 20px auto;
width: 400px;
padding: 20px;
}
の「width: 400px;」あたりをいじると箱の幅を変更できそうですね。「width: 600px;」にしてみました。
#frame {
margin: 20px auto;
width: 600px;/*デフォルト設定はwidth: 400px;でした*/
padding: 20px;
}
サイト名が<h1>に設定されています。もうちょっと文字サイズを小さく見せたいので、小さくします。「offline.php」の<h1>を<h2>等に変更しちゃっても良いのですが、今回はCSSにh1の表示設定を加えてみます。
/*<h1>をもうちょっと小さく見せたい*/
h1 {
font-size: 150%;
}
と書き足しました。
サイトオフライン時に表示される画面ってのは、お店のシャッターみたいな感じですかね〜。店の中に入れない。店の中を見せない。これができれば何も書いてない鉄色むき出しのままのシャッターでも良いわけです。
でも、営業時間外とはいえ、せっかく来てくれたお客さんです。このお店の名前とか営業時間・定休日ぐらいはシャッターに書いておいて、「またのご来店をお待ちしております!!」って気持ちを見せたいじゃないっすか。 サイトオフライン画面のカスタマイズはそんな「ノリ」ですかね。
エラーページのカスタマイズについては、後日あらためて「404ページとオフラインページ（2）」でご紹介します。
| < 前 | 次 > |
|---|
