Articles(Comments) / Total amount of posts:456
PC（記述・ブログ・OS）
前回、XHTML1.1での記述について書き、その中でＩＥの問題点に触れた。
ブラウザによって見え方が違う、レイアウトが一様ではないという問題があり、その多くはＩＥのバグによる原因から、主にＩＥで発生しているということは、多くの方が指摘している。
その一つについて、「CSSによる段組（マルチカラム）レイアウト講座」に述べてあったので紹介したい（文章も一部、引用させて頂きました）。
前回書いた記述の順序・・
XHTMLで書かれる内容の最初の１行目には、XML宣言文が来なければならない。
２行目には、XHTMLを示す、DOCTYPE宣言がくる（例はXHTML1.0）。
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
所が、比較的新しいブラウザには「DOCTYPEスイッチ」という機能があり、DOCTYPE宣言の有無や、書き方によって表示モードを切り替える。
これは、CSSを正しく解釈できるブラウザにも、アバウトな解釈をする古いブラウザに合わせた表示をさせることができるというものである。
普通に規則にのっとり、DOCTYPE宣言した文章であれば、Standardsモードになる。つまり、仕様どおりに書かれたものをそのまま解釈する。
DOCTYPE宣言のない文書等はQuirksモードとなり、アバウトな解釈に合わせる。ただし、この場合、仕様どおりに書かれたCSSが、制作者の意図どおりに機能しない場合がある。
繰り返すが、XHTMLでは冒頭にXML宣言を記述するようになっている。しかし、WinIE6ではDOCTYPE宣言より前に何か文字列があると、Quirksモードになってしまう。これでは正しく表示されない。
特にボックスモデルでは、解釈が違うため、表示が崩れる。
この対策として、古いHTMLで記述するか、先頭にあるXML宣言を書かないということも考えられるが、それはできない。
そうなると、Quirksモードになっても表示が崩れないようなCSSを書く他ない。
ここではTipを書くつもりはないが、参考までにボックスモデルバグの対処法を同サイトから引用する。
widthを指定した要素には左右のpaddingとborderは指定しない。同様に、heightを指定した要素には上下のpaddingとborderは指定しない。
paddingまたはborderを指定した要素にはwidthやheightを指定しない。
この方法なら、StandardsモードとQuirksモードの違いによるボックスのサイズに違いは生じない。
結局、シェア9割前後（？）を占めるＩＥいやＩＥファミリーで正しく表示されれば他のブラウザがどうあれ、意に返す必要はないし、Ｗ３Ｃの勧告も大した問題ではないのだ。
昔、ＩＥしか知らなかった時代、私の記述はいい加減だったから、ＩＥにはよく馴染んだ。Ｗ３Ｃの勧告に近づけるようになってからも、まだネットスケープの表示がおかしいななどと、ＩＥ側から見た評価をしていた。
今は、普通のことが普通でない状況に驚いている。
恥ずかしい話だが、今頃になって、サイトデザインについて、実に様々な問題があることが分ってきた。自分自身への理解を含め、その一部を述べてみたい。
ウェブサイトをデザイン（制作）する場合、文法にのっとって記述する。そして、それがどの程度正しいかチェックするサイトがある。
Ｗ３Ｃは書式の標準化を目指す非営利団体で、これまでにもいくつかの標準書式を勧告してきた。それが、HTML4.01やXHTML1.0などである。
その、Ｗ３Ｃも記述のチェックサービスを行なっている一つで、承認されると認証マークを貼り付けることが許される。日本で有名な検証サービスサイトでは、「Another HTML-lint gateway」（以下:lint）がある。
だから、チェックで合格することは励みになるし、記述の理解を高めることになる。
今回、サイトの記述のリデザインを行なうにあたり、どうせなら、最新バージョンのXHTML1.1にのっとろうとした。
所が、世の中の大半の方が使っているマイクロソフト社のインターネットエキスプローラー（通称ＩＥ）という、ブラウザの仕様は、勧告された記述ではうまく動作しないし、ＩＥに合わせると承認を得る事ができないということが分った。
例えば、XHTML1.1で書かれる内容の最初の１行目には、XML宣言文が来なければならない。
<?xml version="1.0" encoding="Shift_JIS"?>
続いて２行目には、XHTMLを示す、DOCTYPE宣言がくる。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
先頭の!DOCTYPEとは、ドキュメントタイプ（Document Type）のことで、DTDとは、文書型の宣言（Document Type Declaration）をしている。
問題は<head>の中に記述する以下の行。
<meta http-equiv="content-type"
content="application/xhtml+xml; charset=shift_jis" />
これを、「lint」でチェックすると、「XHTML1.1では<?meta http-equiv>を記述すべきではありません」というエラーメッセージをもらう。
対策として、.htaccess（注１）を使って直接メディアタイプを指定するという方法がある（つまり、「meta http-equiv」の記述を省く手法）。
.htaccessの内容を「AddType "application/xhtml+xml; charset=shift_jis" .html」と記述し（注２）、サーバーにアップする。
「lint」では見事に合格するが、ＩＥは、XHTML文書として扱わずにダウンロードファイルとなる。
結局、「AddType "text/html; charset=shift_jis" .html」でなければ、ＩＥでは見られないということになり、取りも直さずXHTMLの推薦値ではなくなるため、「lint」では合格しない。
こんなことにエネルギーを費やしている事が、実にバカバカしくなってきた。ＩＥ対策を施してXHTML1.1の認証を受けることへの興味を失った。
大きなシェアをしめるＩＥを考慮すると、個人的には（自分の能力も含め）、XHTML1.0 strictで記述するのが妥当ではないかと思っている。
注１：設定、テキストファイル。自分のサーバーのディレクトリーにアップして使用する。Webサーバの動作をディレクトリ単位で設定するためのファイル。このファイルを設置したディレクトリ以下、全てのページに有効となる。
注２：XHTML1.1文書のMIMEタイプの指定は「application/xhtml+xml」が推薦（Should）。「application/xml,text/xml」が可能（May）であり、「text/html」は禁止（Must not）ではないが、非推薦（Should not）となっている。
現在、Ｗ３ＣのＸＨＴＭＬ１．０という文法にのっとってサイト（ホームページ）を書き直している。
以前からＸＨＴＭＬ１．０で書いており、検証の結果、承認を得たこともある。その後、サイトの作成と文法チェックはエディターの機能を使っているせいもあって割りと安心していた。
しかし、閲覧してくださる方を考慮したとはいえない部分も多々あり、エディターでのチェックは最低限のもので、利用を考慮したとはいえないものだった。
訪問者の意志を尊重するサイト作りの一例を挙げる。
私は老眼鏡を離せなくなっているが、意匠優先で文字の小さなサイトは多く、うっかり持ち合わせていない場合、読むのに往生する。ブラウザの機能で大きくさせればいいのだが、絶対単位を用いて設計してあると、文字は固定されていて動かない。かく言う私のサイトも然りだ。
ブラウザに左右されず、閲覧者に優しい、訪問者の方々の意志を尊重するサイト作りの大切さを感じ、サイトを運営する者の責任として、改善していかなければならないと改めて考えたのである。
この作業は、私には至難である。ＸＨＴＭＬの文法にしても、系統だった正しい認識を持ち合わせておらず、その場しのぎでＣＳＳ（カスケードスタイルシート：デザイン、レイアウト等を制御する命令）をいじってきたため、記述はいい加減でシンプルではない。
完全にということは難しいと思うが、今より多少は改善されたサイトを目指している。時間はかかりそうであるが・・。
ようやくＨＰとブログサイトの各部寸法を含めた同一化が終了しました。これで完全にシームレスな感覚で相互を横断的に見ることができると、自己満足しています（アイデンティティの統一でどこのサイトにいるか明瞭になる）。
ＨＰトップは従来から３カラムでしたが、ＨＰ記事本文は擬似３カラムでした。これをきちんとした３カラムにしました。本文のサイズは図などがあるため、従来通りとしました（トップページよりも広めです）。
また、トップタイトルが左寄りで、他のコメント行との統一感がありませんでしたのでセンターに移動しました。
ブログサイトの扱いは、以前設けていたデイリートークからの移行です。どちらかといえばジェネラルな話題を中心に、家具インテリア、日曜大工、手作り全般をモチーフにしています。これらのテーマに関心がある方に広く読んでいただければ良いと思っていますが、マイナーなページですので訪問者は伸びませんネ。
テーマごとに振り分けてくれること、アップロードが簡単なことはブログのメリットです。
ブログをスタートさせてからＨＰとブログサイトのデザインを統一して、双方をシームレスな感覚で利用できたらいいなと思っていました。
双方のデザインを完全に一致させることも可能ですが、私の能力を超えますので、最小限の手間で同じような色調、レイアウトにアレンジしました。
このように、いつも小手先でのアレンジを行っていますので、暫くしては気に喰わなくなり、しじゅう変えては余計な時間を割くという繰り返しが実にばかばかしいと思いつつ・・。
時間とエネルギーをかけて統一感を出した所で何か意味があるのかと考える方もいるかもしれません。別に違っていてもそれはそれで目先が変わって面白いわけです。それより内容の充実が先決。ごもっともです。
ともあれ、アレンジしたファイルのアップロードが終了しました。
またＨＰのコラム欄には、マレーシアにシニアボランティアとして住んでいた時代にサイトに掲載していた「マレーシア通信」を抜粋して再掲しました。
余談：永くサイトを運営していながら今頃何を言っているのかと言われそうでが、Internet Explorerの鷹揚さに慣れていると、Mozilla Firefox（ブラウザ）で正しく表示させるのは大変です（曖昧なHTML表現では受け付けてくれません）。エディターで文法チェックをしていますから、文法はOKでも表示が乱れる場合があり、原因がわからず四苦八苦するのです。
アレンジしてある場合は違いますが、ブログ本文の終わりには、コメントやトラックバック等、幾つかのリンクが張ってあり、次に区切りのライン、日付、タイトルと続きます。そのため記事の区切りが判りにくいと感じていました。
そこでバックグラウンドカラーをライン代わりに、その上に日付とタイトルを表示させればシンプルになるのではないかと考えたのですが、実現させるにはかなり苦労をしました。タイトルと日付がきちんと１行に並ばないのです。とりわけ、IEとMozilla（Firefox）では位置がずれ、うまく表示させるために大変苦労をしました。現在ネットスケープはインストールしていませんが、Mozillaと近い（？）と思います。マックは全くわかりません。
CSSと、トップページのHTMLを載せます。参考にして下さい、というよりも笑ってやって下さいという感じです。
タイトルは、「float:left;」で左に流し。日付は右詰めで表示させています。位置を合わせるコツは「margin:0 auto;」でした。このコマンドは日付（.date）、タイトル（.tt h2）の両方に入れないとダメでした。バックはリピート画像でもいいのですがべた張りです。難しい質問にはおそらく答えられません。以下、CSSです。
.tt{
margin:0 0 12px;
background-image: url(http://image.blog.livedoor.jp/****/imgs/****.gif);
}
.tt h2{
float:left;
margin:0 auto;
color:#3f5f3f;
font-size:14px;
font-weight:bold;
text-align:left;
padding-left:20px;
}
.date{
margin:0 auto;
color:#003;
font-size:10px;
font-weight:normal;
text-align:right;
padding-right:20px;
}
トップページのHTML部分です。
<div class="tt">
<h2><$ArticleTitle ESCAPE$></h2>
<IfDateChanged><p class="date"><$ArticleDate$></p>
</IfDateChanged>
</div>
トップページの各記事に行くにはスクロールしなければなりません。これは結構手間です。
ところが「にじ魂」さんのページに「タイトル一覧でブログを読み易くしよう」という記事を見つけて利用させて頂きました。元々は、「弱小エンジニアの小言」さんの「月別アーカイブにタイトルリストをつける」からの改造だそうです。
個別記事へのリンクではなく、同じページ内の各記事へのジャンプですので、瞬間的に移動ができてたいへん便利です。また、コメントの数も表示されます。今回は、これに投稿日を加えて表示させました。
各記事の下には、ページトップへのリンク（Pege Top）を設けましたから、トップへ戻るのも簡単です。
記述は、トップページや月刊アーカイブ等設置したいページのHTMLテンプレートに書き込んで保存し、再構築します。
注意点は、<IndexArticlesLoop>より前に設置します。そうしないと各記事ごとに「タイトル一覧」が表示されてしまいます。
記述位置ですが、私の場合は、
<div id="blog">
この（↑）記述の下に、
<ol>
<IndexArticlesLoop>
<li><$ArticleDate$>: <a href="#<$ArticleId$>"><$ArticleTitle ESCAPE$></a> (<$ArticleCommentCount$>)</li>
</IndexArticlesLoop>
</ol>
上記（↑）、HTMLを書き込みました。
<ol><li>～</ol></li>は数字リスト表示です。
また、スタイルシート（CSS）テンプレートの任意の位置に、
ol{
margin:0 0 20px 40px;
font-size:10px;
color:#03a;
line-height:110%;
}
li{}
を書き込みます。ここの設定は各自の好みによりますよね。
このジャンプ機能を付けた後、個別記事のプラグインを取り外しました。以前から感じていたのですが、ブログには左右のカラムに同じようなリンクがあったりして惑うわけですね。カレンダーも同様・・いえ、こちらは思うようにアレンジできずに取っ払いました。
私も初心者です。簡単できて便利な改造を紹介しました。おかしな点は御助力を頂ければ実に幸いです。
ブログは簡単。と聞いていたから高をくくっていたら、結構大変です。
先ず、手こずったのが、ＶＡＬＵＥ-ＤＯＭＡＩＮ（ドメイン登録）、、ＸＲＥＡ.ＣＯＭ（レンタルサーバー）での手続き。手順が何だかよく判らないのです。レンタルサーバーを借りることはほとんど無いので慣れていませんし、サポートフォーラムは、内容が高度で初歩的な質問に答えてくれるのかなという心配があるのですね。関連ブログでも皆さんの苦労が書かれていますので、私だけが苦労しているわけではなさそうですから、手続き方法のデザインに問題があるのではないかと思っています。手順をもう少し整理して欲しい所ですが。
しかし、ＶＡＬＵＥ-ＤＯＭＡＩＮでは、年間９９０円（全費用￥1054）からドメインを取得できますし、ＸＲＥＡでは、年間２４００円（広告無 1000MB）でサーバーを借りることができます。各種サービスも充実していて驚きです。他のレジストラ（ドメイン登録代行業者）は真っ青（！？）。
次は、ライブドアでオリジナルドメインを使うためのセッティングです。これがまたよく分かりません。いちいち分からないのですね。セッティングはサーバー側とライブドア側の両方で行う必要があります。この点については、各ブログで丁寧に解説されていますので、ここでは簡単に述べます。
先ず、ＶＡＬＵＥ-ＤＯＭＡＩＮトップページからログインし、「DNSレコード/URL転送の変更」をクリックします。次にＤＮＳ情報を以下のように変更します。ターゲットの最後のドットを忘れないようにしなければいけません。ライブドア側のセッティングは簡単です。
要するに、オリジナルドメインを使えるということは、自分のドメインを経由してライブドアのドメイン（サーバー）に転送するということなのですね。
ＤＮＳ情報変更
ホスト名 / ターゲット / タイプ /
www / blog-01.livedoor.jp. / CNAME /
@ / blog-01.livedoor.jp. / CNAME /
（MX設定は無記入でも可）
所で、ＸＲＥＡ.ＣＯＭには設定の、解説ページがあったのです。密かに置かれていて分かりにくいのですが、何かの拍子に出現したのです。再び探そうとしてもどこにあったのか分かりませんし、現在もおそらく探せません。ただし、私の場合、これを読んでも十分理解はできませんでしたが・・。
ようやく独自ドメインでの運用ができるようになったのですが、次に、画面デザインのカスタマイズと記事作成投稿でかなり苦労します。
記事作成で特に感じたことは、画像の貼り付け方が直感的に分からないことです。ヘルプも実にジェネラルで読んでもわかりません（書いていない）。
使用したい画像は、先ず最初にライブドアのサーバーにアップロードしなければなりません。次に、アップした画像欄右の「投稿する」というボタンをクリックすると、画像情報が文章作成欄にＨＴＭＬで貼り付けられます。「投稿する」というボタンの呼び方も誤解を招きますね。どこに投稿するの？って感じです。「貼り付け」のほうが分かりやすいのではないでしょうか。文章を投稿すると、実際のブログ画面には画像が目出度く貼り付けられていました。
貼り付け位置は「左」に固定されています。ＨＴＭＬを知らない方はアレンジが面倒です。画像は使用頻度も高いものですし、画面の貼り付け方法の解説はビギナーのためにもヘルプで行ってもらいたいと感じました。たいした部分ではないのかもしれませんが、些細な所だからこそ、分かりやすくサクサク進める配慮が欲しいものです。
ＦＴＰソフトを用いるとライブドアーのサーバーからブログファイルを自分のＰＣにダウンロードできます。バックアップに良いかと思います（ただしlivedoor Blog PROのみ）。セッティングは以下の通りです。
ホスト名 : ftp.blog.livedoor.com
ユーザー名 : livedoorのID
パスワード : livedoorのパスワード
ホストの初期ホルダー: / （”/” だけです）
ライブドアの用意したデザインサンプルをシンプルにアレンジしただけですが、かなり苦労しました。まだ、途中段階で、おかしな部分が出てくる可能性はあります。
この際ですので、ＨＰもアレンジして両サイトのデザインを同じ雰囲気にしました。その結果、ＨＰトップはますます地味になってしまいました。日本のサイトはカラフルでにぎやかです。寂しい感じが際立って、ちょっとまずいかなと思っています。
« PREV
NEXT »