ガイドグループ世話人の日記

はてなダイアリーガイド

はてなダイアリーガイドの草稿置き場です。この日記へリンクはどこでもご自由にどうぞ。ガイドを作るガイドグループ参加もお気軽に*。グループに入らなくても、ガイドははてなダイアリー市民なら誰でも作成・編集できるものですのでよろしくどうぞ。

※MacOS9でInternetExplorerをお使いの方は、この日記にコメントを書き込もうとすると文字化けすることがあります。対処方法はこちらをご覧ください。

 | 

2004-10-04

ヘッダとフッタと過去日記

退会されたtheoriaさんの、『ヘッダとフッタの使い方と利用例』などの草稿がデッドリンクになっているようです。(http://theoria.bnnm.net/hatenaguide.html

ちょうど改稿案作成を考えていたところでして、参考にしたかったのでもしデータをお持ちの方がいらしたらお寄せ頂けると幸いです。googleキャッシュInternet Archiveで探せませんでした。はてなダイアリーがキャッシュで残ってた!*……この文章をここに置いてガイドの一部にするために修正するより、はやいところ書き直して改稿案にしちゃおうと思います。

かんたんデザイン設定とdiv.hatena-body導入以降、ヘッダとフッタに何かちょっと書くケースが増えたので、スタイルシートに踏み込まない範囲で見栄えを整えるガイドが必要みたいだと考えています。

  • ヘッダ・フッタとは
    • 構造
    • ヘッダとフッタどちらに書くべきか
    • 見栄えを整えるにはタグの知識必要
  • ヘッダ・フッタになにかを入れる
    • 構造(.hatena-body、.main、.sidebar
    • <div class="">〜</div>を使う

過去日記はとりあえずその後に回し。はてなダイアリーガイドブックなどを見ると、基本編でもいいのかもしれません。

theoriaさんの草稿転載

これは何か

id:theoria と「はてなダイアリーガイド」に関する「ガイド」の関係者向けの情報です。

具体的には私が勝手に書いている原稿の進み具合などです。

連絡の方法

ガイドに関係する私への連絡を行う場合はメールを使用して下さい。メールの扱い等は id:theoria:19431208 を参照して下さい。

改善案、利用例等、公にすべき事柄は id:theoria:19440131日記コメント欄にコメントとして書き込んでくださっても構いません。。

なお、私以外の誰かがコメントを書いた場合、私にメールで通知が行われるようになっております。

テーブル

文書として或程度完成してから公開を行っています。

dl dd ul li ul li の文字列のうち、リンクが貼られている場合はその記事が既に書かれたことを示し、貼られていない場合は書かれていないか書いている途中であることを示します。

日記以外にも書けるところの説明

履歴

平成十六年
二月十日
「ガイド」の作成に参加。
「ヘッダとフッタの使い方説明」公開。
「ヘッダとフッタの利用例」公開。
二月十四日
「ヘッダとフッタの使い方説明」一部修正。
二月二十二日
「ヘッダとフッタの使い方説明」一部修正。
「ヘッダとフッタの利用例」一部修正。

ヘッダとフッタの使い方説明

前口上
ヘッダ或はフッタは便利なのですが、私( id:theoria )の私見としてはヘッダ或はフッタ*1はどちらかというと HTMLCSS に関して或程度の*2知識がないと活用できない機能だと思っています。その理由は HTMLCSS に関する或程度の知識がないと、意図した表示の結果を生み出せない為です*3
但し視覚系 UA *4による表示の結果を気にしない人はその限りではないでしょう。
また、この文章には HTMLCSS の専門的な内容*5が含まれていますが、解らなければ飛ばして下さっても差し支えはないと思います。今現在その部分が解らなくとも、 HTMLCSS勉強をしてゆくうちに解るようになる筈です。

ヘッダ或はフッタにはその日記の筆者(管理者)に関する情報を書いたり、読者への御知らせを書いたりと様々な使い方があります。

ヘッダ或はフッタの部分には変更しない限り何も存在していません。

ヘッダ或はフッタを変更するには「設定」*6にアクセスし、ヘッダならばページのヘッダ(HTMLタグ利用可)、フッタならばページのフッタ(HTMLタグ利用可)という見出しの直下にある textarea 要素*7に任意の文字列を記入して下さい。

例えばヘッダ部分に例一のように設定し、 IE *8に表示させた場合、図一のようになります。

例一
<dl>
    <dt>この日記を書いている人の名前</dt>

    <dd>Theoria Laevatain</dd>
    <dt>この日記URI</dt>
    <dd>http://d.hatena.ne.jp/theoria/</dd>

    <dt>趣味</dt>
    <dd>読書</dd>
    <dt>得意なスポーツ</dt>

    <dd>テニス</dd>
</dl>
図一
図一(例一をヘッダに設定し、 IE にレタリングさせた結果の一部)。

しかしこれではテーマ「 hatena 」*9を使用している場合、ヘッダの下にある通常の日記の部分と調和が取れていない、と思う人も少なくないと思います。

何故異なるのかと云うと、はてなダイアリーが出力する HTML のサンプルは例二のようになっており、上記のヘッダのサンプルとは異なる為です*10

例二
<div class="day">

    <h2><a href="./20040209"><span class="date">2004年02月09日</span></a></h2>
    <div class="body">

        <div class="section">
            <dl>
                <dt>この日記を書いている人の名前</dt>
                <dd>Theoria Laevatain</dd>

                <dt>この日記URI</dt>
                <dd>http://d.hatena.ne.jp/theoria/</dd>
                <dt>趣味</dt>

                <dd>読書</dd>
                <dt>得意なスポーツ</dt>
                <dd>水泳</dd>

            </dl>
        </div>
    </div>
</div>

例二は(西暦)二〇〇四年二月九日に例一を入力した時の出力結果です*11

しかし例二を改造してそのままヘッダとして使った場合、次のような不都合が生じます。

  • ヘッダの内容とは無関係な文章(二〇〇四年二月九日の日記。)にリンクが貼られている。
  • h2 要素内に二〇〇四年二月九日というヘッダの内容とは無関係な文字列がある。

更に上記の不都合を解消しようと、例三のように h2 要素内を変更しても、図二のように h2 要素の文字列が黒色にレタリングされてしまいます*12

例三
<h2>ヘッダ部分</h2>
図二
図二(例二の h2 要素を例三に変更したものをヘッダに設定し、 IE にレタリングさせた結果の一部)。

なぜこのようになるかというと、テーマ「 hatena 」には次のように書かれているからです。

h2 {
    font-size: 100%;
    background-color: #5279e7;
    padding: 3px 0px 2px 10px;
    margin: 5px 0 0 0;
}
h2 span.date {
    color: #ffffff;
    font-size: 100%;
    font-style: normal;
    margin-left: 2px;
    margin-right: 2px;
}

御覧の通り、 h2 にはプロパティ「 background-color*13が設定されているものの、プロパティ「 color 」*14が設定されていません。ですから body の color:Black; が継承され、 h2 要素の直下の文字列が黒色にレタリングされるのです。

ですが、 h2 要素内の date 属性を持つ span 要素*15はプロパティ「 color 」の値が #ffffff *16になっているので、例四のように h2 要素を変更すればこの問題は解決します。

例四
<h2><span class="date">ヘッダ部分</span></h2>

また、「設定」画面の「スタイルシート」という見出しの下にある textarea に以下のように書き込むことによっても解決出来ます。

h2{
    color:#ffffff;
    background-color: #5279e7;
}

ヘッダとフッタの利用例

私の場合、ヘッダには目立たせる必要のある情報、フッタにはヘッダ程目立つ必要のない情報を掲載しています。

また直ぐに最新の日記が見れるように、ヘッダ部分に載せる情報は少なくし、多くなる場合はフッタに移しています。

ヘッダの利用例

メニュー
後述する「過去日記」などに書いた自己紹介等へのリンク。カテゴリ別の記事へのリンクなど。
読者への御知らせ
その日記の管理者から読者への連絡事項。
例えば「 X 日まで更新を停止する」など。
告知
何らかのイベントの告知等。
メモ
自分の為のメモ。ヘッダが h1 の直後に来ることを利用して絶対忘れてはならないことを書いておく。
私はよく、ヘッダをメモとして使っている。例えば「マリア様がみてる」の放送時間など。
読者にとっては鬱陶しいだけである。

フッタの利用例

address 要素

「聯絡先」は、address要素として明示できます。ただし、address要素に記述された「聯絡先」が必ずそのHTML文書の制作者の聯絡先である、とは、仕樣上、断定できません。

HTMLの要素・文章記述者の聯絡先( address )HTMLの要素・文章記述者の聯絡先( address )
仕様を守ろうとする限り、はてなダイアリーに於いては meta や link による連絡先の明示は利用できません。
過去の文章へのリンク
「過去の文章へのリンク」を作成しておくと、過去の文章を読みたい人にとっては有益です。
各種の calendar モジュールを利用する方法もあります。詳しくははてなダイアリーのヘルプやガイドの他の記事を参照して下さい。
巡廻の為のリンク
巡廻先の一覧を書いておくと便利かもしれません。
antenna モジュールを利用する方法もあります。詳しくははてなダイアリーのヘルプやガイドの他の記事を参照して下さい。
利用してるテーマ等によっては sidebar 属性を持つ div 要素でマークアップすると上手く纏まります。 sidebar に就いてはキーワード「 sidebar 」などを参照して下さい。
その他のモジュールの利用
余りやりすぎると鬱陶しいだけです。

ヘッダとフッタのサンプル

sidebar を利用して段組を行う場合の例。

ヘッダのサンプル
<div class="main"><!-- div.sidebar と対になっている。 -->
    <div class="day">

        <h2><span class="date">告知</span></h2>
        <div class="body">
            <div class="section">

                <p>X 月 X 日に XX をやります。参加者募集中です。詳しくは管理者にメールを送ってください。</p>
            </div><!-- div.section に対する終了タグ。 -->
        </div><!-- div.body に対する終了タグ。 -->
    </div><!-- div.day に対する終了タグ。 -->
フッタのサンプル
</div><!-- div.main に対する終了タグ(日記の本文は div.main 内)。 -->
<div class="sidebar"><!-- sidebar 属性を持つ div 要素とはこのことである。 -->

    <hatena name="calendar2photo"><!-- calendar2photo モジュール。 -->
    <hatena name="antenna" listlimit="10"><!-- antenna モジュール -->

    <dl>
        <dt>書いている人</dt>
        <dd>YOUR-NAME</dd>
        <dt>連絡先</dt>

        <dd><a href="mailto:YOUR-NAME&#64;foo.ne.jp">YOUR-NAME&#64;foo.ne.jp</a></dd>
    </dl>
</div>

<address>Copyright &copy; 2004 , YOUR-NAME ( mailto:YOUR-NAME&#64;foo.ne.jp ) All Rights Reserved.</address>

*1:特にヘッダ。

*2:一般的に云うところの「個人サイト」が作れるぐらい。

*3:私は兎も角、多くの人は表示の結果を重視するでしょう

*4IE や NN 、MozillaOpera などの一般的に云うところの「ブラウザ」。ウェブサイトを閲覧する際に多くの人が使うソフトウェアIE が何か解らない人の多くが IE を使っていると思われる。

*5一般的に云うところの「個人サイト」が作れるぐらいの知識があればよい。

*6:id が YOUR-ID の場合 http://d.hatena.ne.jp/YOUR-ID/config となる。

*7:複数行の文章が書き込める部分。

*8デフォルトの状態の Internet Explorer

*9デフォルトで設定されているテーマ

*10:厳密に言うと上のヘッダのサンプルにはない各種の div をセレクタとしてスタイルシートが記述されているからです。

*11:但しインデントや改行等は修正されている。

*12:意図する色は白。

*13:背景の色。

*14:文字色

*15:h2 span.date のこと。

*16:完全な白色のこと。

 | 

ホームページ制作