＊以下は先代のhtmlサイトで2012年11月ごろに公開したものであり、内容は非常に古いままです。申し訳ございません。
蜘蛛の巣と私 ～ワールド・ワイド・ウェブとの格闘～
サイトを立ち上げようと決めてからHTMLやCSS(スタイルシート)と格闘しています。細い蜘蛛の糸にしがみつくカンダタのように右往左往している素人ですが、サイト作成でお世話になったツールなどを紹介します。
ウェブ作成環境とお役立ちツール
テキストエディタ
テキストエディタでタグを打ち込むというプリミティブなやり方でサイトをつくっています。
エディタには Crescent Eve を使用。シンプルだけど必要十分。UTF-8への変換も簡単確実、入力補助も秀逸です。
実は、ホームページビルダーを購入しましたが、性に合いませんでした。ビルダーの使い方を憶える暇があればタグを手打ちした方が早いし細かいことができるような気がします。
文法チェック
サイトをつくるからには正しい文法で書きたい。そんな生意気なことを考えるのは素人ゆえの浅はかさ。タグを自分で打っていくというスタイルで避けられないのが文法のチェックです。
Crescent Eveにも文法チェック機能がついていて便利ですが、どうせチェックするなら本家本元の The W3C Markup Validation Service です。W3CというのはWorld Wide Web ConsortiumのことでHTMLやCSSやらの規格を定めている標準化団体。チェックをパスすると特に御利益はありませんがW3Cのロゴをサイトに貼れます。ただ、ちょっとアレなのがこちらのサイトはすべて英語なこと。間違いをご指摘いただいても内容を理解するのに一手間必要です。そこでオススメなのが（皆知ってるけど） Another HTML-lint でございます。ここは本家W3Cより厳密ですし、何故ダメなのか（日本語で）詳しい解説つきです。こちらで満点とれればW3Cも確実にパスできます。ありがたや。
CSSについてもW3Cの チェックサイト がありますので利用しています。こちらは日本語対応です。
いうまでもなく文法満点でも何も良いことはありません。むしろ「それがどーした」の世界です。まぁ間違ってるよりはイイよねぐらいの気持ちでやってます。
サイトデザイン
デザインで大切なこと、それは感じること。
では何を感じるのか。私が感じたのは自分にセンスがないということ。
つまり「汝自身を知れ」「下手な考え休むに似たり」がデザインコンセプト。余計な策は弄さずにシンプルにシンプルに。背景なんかも考え出したらキリがないので、今回は画像を使用せず色づかいだけでレイアウトすることに。
そんな当サイトの作成で重宝したのが 原色大辞典 です。ブラウザで見栄えが異なってしまうようなことは避けたかったので、原色（ブラウザで色名が定義されている色）とwebセーフカラーの中から配色を選ぶことにしました。原色大辞典では色を並べたり文字の映え具合の確認もできるのでとても便利ですね。
検討の末、空と海をイメージした”青”を基調カラーにサイトデザインを統一することに。見やすさや目の負担も考慮したつもりです。
フォントへのこだわりも捨て、見出しもCSSで変化をつけた程度の地味なページになりましたが、まあこんなもの。デザインに凝り出すとジンジャー死ぬまでサイト完成しそうにありませんので勘弁してください。
ファビコン
サイトを公開しはじめてすぐのこと。サーバーから毎日送られてくるログウォッチを見ると favicon.ico というファイルにアクセスが。そんなファイルありませんのでサーバーは404 not foundのエラーを返していました。
調べてみるとfavicon.icoとは、「お気に入り」やブラウザのタブに表示されるアイコンのファイルとのこと。ご丁寧にもブラウザによってはfavicon.icoファイルを探しに来る仕様になっているようです。
ということで早速ファビコンをつくることに。手抜きのドット絵を作成して ファビコンを作ろう！ さんのサイトでマルチアイコンファイルにしてもらいました。
できたファイルをルートディレクトリにおき、headのなかにlink要素を書き込んで終わりです。なお、もともとlinkの記載は不要でしたが書いた方がいいみたいです。それも２行。詳しいことは調べてみてください。
ブラウザ・チェック
サイトづくりはブラウザでのチェックが欠かせません。特に厄介なのが Internet Explorer です。私は IE Tester を使わせてもらいました。１台のＰＣに複数バージョンのＩＥ環境をつくるのは難しいですがIE Testerなら各バージョンのチェックが１台でできますので便利です。ただし、ちょっとバグがあったり突然フリーズするのが難点。なお、ＩＥ８以降は標準でついている「開発者ツール」を使うとよいようです。私はもっぱらTesterですが。
また、 サーバー監視/ネットワーク監視サービス のページで各種ブラウザごとにキャプチャが可能です。Windows版ですがSafariもチェックできます。自分のPCに今さらSafariいれる気になりませんので助かりました。なお、Safariによるチェックはここのキャプチャと自分のipod touchで行っているだけです。
リンク切れチェック
ウェブ上で簡単にサイト全体のリンク切れをチェックできるのが dead-link-checker.com です。ほんの少し時間はかかりますがURLを入力するだけで内部リンク・外部リンク両方をチェックしてくれるので便利です。
サイトマップの作成
グーグル様にお友達になっていただくには、XMLで作成したサイトマップを送る必要があります。このマップづくりでお世話になっているのがXML-Sitemaps.com です。英語のページですが、URLを入力してSTARTボタンを押せばXMLのサイトマップを簡単に作ってくれます。できたマップをメールで送ってもらうことも可能です。
その他諸々のテクニック
ウェブを徘徊し様々なサイトを参考にしながらピコピコとサイト作成を進めています。そのなかでもよく参考にさせてもらったのが、 All Aboutのホームページ作成 です。基礎的なことから細かいテクニックまで情報豊富で勉強になりました。
サイト立ち上げのちょっとした工夫
Internet Explorer対応
最も頭を悩ませたのはＩＥへの対応。ＩＥ６のシェアはごく僅かですが、数％とはいえ実人員にしたら相当なもの。実は自分の職場も未だにＩＥ６だったりします。
凝ったデザインでもない自己満足サイトが最初から偉そうに「ＩＥ６の方は見ないでください」というのはいかがなものか。てなことでＩＥ６以上はきちんと見られるようにしないといけないかなと素人は思ってしまったわけです。
言うは易いがけっこうこれが大変でした。簡単に言うと（難しくは言えない）ＩＥ６君は、まともにCSSを解釈してくれない。マージンやパディングの設定がずれ、レイアウトが崩れまくる。
解決するにはＩＥ用のCSSハック（一種の裏技）を使うわけですが、ハックによってはＷ３ＣのCSSチェックで文句を言われます。結局私は、ＩＥ独自拡張による条件式コメントをhtmlファイルに書き込み、ＩＥ６にはそれ専用のスタイルシートを読み込ませるやり方を採用しました。
- やり方 html側に条件式を書き込み別ファイルを読み込ませる
-
<!–[if IE 6 ]>
<link rel=”stylesheet” href=”ie6用cssファイル.css” type=”text/css”>
<![endif]–>
一応、これでうまくいってはいるのですが、１つのHTMLファイルにつき２つのCSSファイルを管理せねばならず非常に面倒です。こまったもんですねＩＥは。
余白・空きスペースの確保
要素と要素の間にちょっと余白、スペースが欲しいときが結構ありますが、brを連続させるとHTML-lintに怒られます。実際に複数のbrを無視してしまうブラウザもあるようです。
同様に<div></div>とか<p></p>など要素の内容をカラにしてしまうのもだめ。減点対象です。
最初は背景色と同色にしたhrを使うことで（太さやマージンを変えて）スペースを確保しようと考えました。hrはみるからに”区切り”でしょうから論理構造的にもよかろうと。しかし、これは失敗。なんとＩＥ６では透明の線が引けないことを後から知りました。また、hrは単なる装飾目的の水平線でセクションの区切りといった意味はないというのもどこかで読みました。
現状での解決策は<div><br></div>というように間にbrをいれること。これだと減点されません。
それぞれ必要な余白が確保できるようclassセレクタでいくつかのパターンを用意。clear:bothを行ったりbrにidセレクタをつけてページ内リンクのアンカーに使ったりしてます。
brも邪魔なときは背景色と同じ極小の画像を用意してそれを埋め込む、あるいは display: none で隠してしまうといったやり方も考えられますが、読者に見えないもの、意味のないものを埋め込むのは好ましくないので(brも問題だけど)使わないようにしています。
404 not found ページの作成
ユーザビリティ上も役に立つようですので、オリジナルの404エラーページを設置しました。ページをつくってマイサーバーに設定。Apacheに「ErrorDocument 404 (/404ページのパス)」を記載すればＯＫです。ここでパスを間違えるとApacheはまた404エラーを返しますので、無限ループに陥ってしまいます。気をつけましょう。ちなみに調べれば分かりますが一部のIEがやけに親切な仕様のため、ファイルは512kB以上で作成します。
設定を終え試してみたのですが上手くいかない。CSSや画像が読み込まれません。HTMLファイルにきちんと記述しているのにダメ。どうやら404ページについては絶対パス(http://～)で指定しないといけない模様。絶対パスに書き換えたら成功しました。なお、実際には大した量でないのでhead内にstyleタグでCSSを書き込んじゃいました。
グーグル アドセンス
サイトで小遣い稼ぎをしようとは全く考えておりません。それ以前にこんな支離滅裂で薄っぺらいサイト、大したアクセスも見込めません。しかし、個人的・技術的興味からグーグル・アドセンスを導入してしまいました。
アドセンス申込み・一次審査
暫定オープンしたもののいっこうに進まないサイト作成。早くも飽きて挫折しちゃいそうな感じ。この停滞感解消のためか、何を思ったかアドセンスに申し込んでみることにしました。
未完成のページばかりですが、ページ数にしたら２０ページぐらい、字数にしたら４万字以上はあるだろうから何とかなるかなという軽い気持ちです。
コンテンツ完成してないくせにプライバシーポリシーのページはしっかり作成。また内部のリンク切れを潰してから申し込みました。
二次審査
申し込んでから２時間もかからずに一次審査通過のメールが来ました。ずいぶんあっさりですね。
お次は二次審査です。さっそくページに広告コードを貼りつけ。しかしページ上には何も表示されません。今更ながらヘルプをよく見ると二次審査中は何も表示してくれないみたいです。さらによく読むと「広告の表示回数が特定のインプレッションを超えた時点で 二次審査が開始されます」とあります。ということはページへのアクセスがそれなりにないと審査してくれないということか？
こいつは失敗。まだ未完成で被リンクが１本もないサイトです。アクセスなんてありません。面倒だからアドセンスは中止。明日にでもコード撤去しレイアウト変更だなと思っていたところ、翌日には二次審査通過したようで広告の表示がはじまってました。当サイトへのアクセスなんて１～２件しかなかったはずですが特定のインプレッションとは何なのでしょう。不思議です。
コメント