この記事の概要
Plain Ver0.2で記事を書くときに関係する、いくつかのマークアップ(タグ)についての解説です。custom.css の後半部に書かれているスタイル記述が関係します(これもっと早く書くべきでしたね)。
このへんについてはまだまだ洗練されてないところがありますが、という言い訳をしつつ・・・説明はつづきます。
Plain Ver0.2 では、記事(アイテム)記述用に次のスタイルを割り当てています。
- h4~h6
- .center
- blockquote
- cite
- pre
- samp
- div.note
- div.postit
- a.ico
<h4> ~ <h6> タグ
ヘディング(見出し)用のマークアップです。記事を書くときは、hタグは h4 から h6 まで使えます。 なぜ h1 から h3 までの使用を想定してないかというと、スキンの構造上、 h1 にはブログのタイトル、h2 には日付ブロックやコメントブロックなどの見出し、h3 には記事の題名がそれぞれ割り当てられてるからです。
小見出しの例 (h5)
この「小見出しの例」は、h5 です。 上の「<h4> ~ <h6> タグ」は、h4 です。
小見出しの例 (h6)
h6 はこのスキンで定義はしていませんが(デフォルト状態にまかせてますが)、使えます。 ヘディングのスタイルは、記事内に決め打ちせずに広く定義してありますが、とくに意味がないので記事内のみに影響するよう変更予定。
.center スタイル
センター寄せ用。投稿画面にセンターボタンがあるのでこれは記事の記述用としてはちょっと冗長かもしれない。削除予定。
<blockquote> タグ(ブロック要素)
ひとかたまりの文章を引用するときのマークアップです。記事内に <blockquote>~</blockquote> とタグで挟まれた部分に適用されます。
スタイルシートでは、div.itembody blockquote がこれに対応する定義です。
右端にちっちゃいアイコンを表示させてますが、なんかイマイチなので変更予定。
引用の例:
シンプルなスキンです。カスタマイズの土台にどうぞ。 標準添付の grey スキンよりもいじりやすくなってると思います。このサイトも Plain スキンをベースにしています(10月5日現在)・・・
<cite> タグ(インライン要素)
引用元を明記するときのマークアップです。
<cite>~</cite> とタグで挟まれた部分に適用されます。
スタイルシートでは、div.itembody cite がこれに対応する定義です。ブロック要素と勘違いしてスタイル記述にマージンなど割り当ててるので修正予定。
引用元の例:
引用元:[dtk] Plain Ver0.2 - Nucleusだとか
・・・トラックバック・プラグイン必須。その他のプラグインについても一部対応しています。 ※EUC-JP版も用意しました
<pre> タグ(ブロック要素)
このスキンでは、pre をソースコードを掲示するときのマークアップとして使います。
<pre>~</pre> とタグで挟まれた部分に適用されます。
実際には、code タグと組み合わせて、<pre><code>~</code></pre> と記述することを想定しています。
スタイルシートでは、div.itembody pre がこれに対応する定義です。
右端にちっちゃいアイコンを表示させてますが、なんかイマイチなので変更予定。
ソースコードの例
if (!function_exists('sql_table')){
function sql_table($name) {
return 'nucleus_' . $name;
}
}
<samp> タグ(インライン要素)
短いコード記述用のマークアップです。pre のスタイルに合わせるようにしています。
<samp>~</samp> とタグで挟まれた部分に適用されます。
スタイルシートでは、div.itembody samp がこれに対応する定義です。
短いコード記述の例
要するに、<samp>~</samp> ←ここの部分です。
<div class="note"> タグ(ブロック要素)
補足メモ用のスタイルです。
<div class="note">~</div> とタグで挟まれた部分に適用されます。
スタイルシートでは、div.itembody note がこれに対応する定義です。
補足メモ・スタイルの例:
<div class="postit"> タグ(ブロック要素)
ポストイットのようなスタイルです。
<div class="postit">~</div> とタグで挟まれた部分に適用されます。
スタイルシートでは、div.itembody postit がこれに対応する定義です。
ポストイット・スタイルの例:
<a class="ico"> タグ(インライン要素)
リンクにアイコンをつけたいときのスタイルです。
<a class="ico" href="...">~<a> とタグで挟まれた部分に適用されます。
スタイルシートでは、div.itembody a.ico がこれに対応する定義です。
リンクアイコンの例:
ねこが好きなら ねこだとか
その他のタグ
このスキンではとくにスタイルを定義してませんが、<b> <i> <em> <strong> <del> <ins> などが使えます。
それぞれのスタイルは、太字、イタリック、強調、さらに強調、削除、挿入 です。
投稿画面では、<b> <i> 用のボタンが用意されてます。マークアップ的には「意味付け」になっている <em> <strong> のほうがいいとか言われますが、そのへんは好みでもよいかと。
以上の解説を参考に、スタイルシートを自分好みにカスタマイズしてみてください。
yu: