2005年07月30日 - フリーエリアと見出しタグ

フリーエリア


　移転元のはてな上にあるLucablogから、幾つか推奨したいものにリンク貼るに当たり、昨日わざわざ面倒な操作をしていたのだが。
　「ブログの設定/管理」より開くプラグインの追加より、「上級者向けプラグイン」に登録されているフリーエリアなるものを利用すれば、右カラムに自由に書ける場所を作製できると今更ながら知る。

文法チェック


　Another HTML-lint gatewayにてテストページを診断。


http://blog.lucanian.net/archives/50022497.html を HTML4.01 Transitional としてチェックしました。
52個のエラーがありました。このHTMLは -44点です。


　まずはmetaタグとlinkの末尾のスラッシュを除く。
　doctype宣言をつける。

ブログのタイトルが日付だけなのは困る


　このようにしてみる。
<h2 class="date"><$ArticleDate$><$ArticleTitle ESCAPE$></h2>
　上記にて、タイトルをh2に入れた

　これで日付だけではなく記事のタイトルも表示されるようになった。
　トップページ・個別記事ページいずれでもそれぞれ設定し、反映された。

見出しとタグ


　ブログのタイトルを<h1></h1>タグで囲ったらば、こんな表示になった。



　道のりは遠いような気がする。
　とりあえずブログ投稿時に、タイトルにタグを入れるのは危険なようだ。

トップページの見出し設定など


<h1 class="blogtitle">ブログのタイトル(Semplice)</h1>
<h2 class="description">説明</h2>
<h2 class="date">日付・カスタマイズし表示させた個別日記のタイトル</h2>
<h3 class="title">日記投稿時のタイトルが自動挿入</h3>
<h3>手動で書き込んだ、本文中のタグ</H3>

　とりあえず最終的にこのように設定した。

<h1 class="blogtitle"><a href="<$BlogUrl$>" accesskey="1"><$BlogTitle ESCAPE$></a></h1>
<h2 class="description"><$BlogDescription$></h2>
</div>
<!-- 上記にてdivをh2に変更した -->

<div class="guide1">
<div class="guide2">
<a href="http://d.hatena.ne.jp/LucaLuca/">はてなのLucablog</a>より移転テスト中。
</div>
<div class="guide2">
<strong>
Luca日記推奨</strong>
<br>
個別のどこかのページへのリンク
</div>
</div>

<!-- HEADER -->

<div id="content">
<div class="blog">

<!-- Loop Start -->
<IndexArticlesLoop>

<$TrackBackAutoDiscovery$>
<IfDateChanged><h2 class="date"><$ArticleDate$> - <$ArticleTitle ESCAPE$></h2></IfDateChanged>
<!-- 上記にて日付の直後にタイトルを並べるためh2に入れた -->

<div class="blogbody">
<a name="<$ArticleId$>"></a>
<!-- 本文中にh3タグを表示させるためにやったものの、中止
<h3 class="title"><$ArticleTitle ESCAPE$></h3>
-->
<div class="main">


個別記事ページの見出し設定


　また個別記事の設定にて

<h1 class="blogtitle"><a href="<$BlogUrl$>" accesskey="1"><$BlogTitle ESCAPE$></a></h1>

　このようにして変更。

<h1 class="blogtitle"><a href="<$BlogUrl$>" accesskey="1"><$BlogTitle ESCAPE$></a> - <$ArticleTitle ESCAPE$></h1>

　これで個別記事の<h1>（つまり個別記事を開き左上に表示されるSemplice）の直後に、その日のブログのタイトルが表示されるようになった。

　現在の個別記事では、このようになっている。

<div id="banner">
<h1 class="blogtitle"><a href="<$BlogUrl$>" accesskey="1"><$BlogTitle ESCAPE$></a> - <$ArticleTitle ESCAPE$></h1>
<div class="description"><$BlogDescription$></div>
</div>
<h2 class="date"><$ArticleDate$> - <$ArticleTitle ESCAPE$></h2>
<h3>本文中の見出し</h3>本文中に手動で書いたh3見出しタグ
↑　↑　↑
必要に応じ、ブログを投稿する際に本文にh3タグを書き込むようにする。


月別アーカイブとカテゴリでの、個別のタイトル


　日付のみがh2では都合が悪いので、個別の日付のタイトルを一緒に表示させるように設定した。
　ついでなので、それぞれにアンカーを設定してブログのタイトルを押せば個別の日付のブログが表示されるようにした。

元々はこんな感じ。


<div class="blog">
<MonthlyArticlesLoop>
<$TrackBackAutoDiscovery$>
<IfDateChanged><h2 class="date"><$ArticleDate$></h2><a name="<$ArticleDateTag$>"></a></IfDateChanged>
<div class="blogbody">
<a name="<$ArticleId$>"></a>
<h3 class="title"><$ArticleTitle ESCAPE$></h3>
<div class="main"><$ArticleBody$>&nbsp;&nbsp;<IfArticleBodyMore><span class="main-continues"><a class="acontinues" href="<$ArticlePermalink$>">続きを読む</a></span></IfArticleBodyMore><br clear="all"></div>


このように改変した。


<div class="blog">
<MonthlyArticlesLoop>
<$TrackBackAutoDiscovery$>
<IfDateChanged><h2 class="date"><a class="aposted2" href="<$ArticlePermalink$>"><$ArticleDate$> - <$ArticleTitle ESCAPE$></a></h2><a name="<$ArticleDateTag$>"></a></IfDateChanged>
<div class="blogbody">
<a name="<$ArticleId$>"></a>
<!--
本文中に記載すればいいので、以下のh3は消した
<h3 class="title"><$ArticleTitle ESCAPE$></h3>
-->
<div class="main"><$ArticleBody$>&nbsp;&nbsp;<IfArticleBodyMore><span class="main-continues"><a class="acontinues" href="<$ArticlePermalink$>">続きを読む</a></span></IfArticleBodyMore><br clear="all"></div>


　なお元々のスタイルシートでは、これによりリンクのアンカーの色は、指定されていたのだが。

a.aposted{color:#57546c;}
a.aposted:link{color:#57546c;}
a.aposted:visited{color:#57546c;}
a.aposted:active{}
a.aposted:hover{color:#40338d;}

　それに更に、このようなスタイルシートを追加した。

a.aposted2{color:#ffffff;}
a.aposted2:link{color:#ffffff;}
a.aposted2:visited{color:#ffffff;}
a.aposted2:active{}
a.aposted2:hover{color:#ffffff;}


課題


　あれ、おかしいな。
　トップページと個別記事ページでは、descriptionがそれぞれh2とdivで違うではないですか。
　後でじっくり考えてみよう。
　h3 class="title"なんだけど、本文中にh2を入れては文法的におかしいんだろうか。
　とりあえずは暫くは、h3にしておく。

下線付き見出し


　スタイルシートのこの部分を探し
h1,h2,h3{margin:0;padding:0;}

　このように変更する。
h1,h2,h3{margin:0;padding:0;}

.border{
color:#79778f;
font-size:16pt;
margin:15px 0px;
padding:10px 10px;
border-left:4px solid #79778f;
border-bottom:1px solid #79778f;
}


　本文投稿時には、以下のようにする。
　<h3 class="border">blockquot - 引用タグ利用時のサイドバー</h3>


Posted by Luca at 10:44 │ │ │ 前の記事 │ 次の記事
Sempliceのトップへ ＞ livedoor カテゴリ ＞この記事への固定リンク
このページの上へ▲