本文へジャンプする
カテゴリー選択 »
全てを表示
Tips
その他
スキン
ピックアップ
プラグイン
レビュー
スキンのタグ一覧 »
一覧を開閉する
Plain
CSS
2カラム
アイコン
« Plain Ver0.2 いじりのヒント - プラグイン編

ブログツール、NucleusCMSに関する情報を掲載

[引っ越しました] 過去記事を datoka.jp/old にまとめてます。
ブログだとか
Nucleusだとか
制作物だとか

この記事の概要

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:

注意:12/3よりこのサイトに変更を加えてますので、実際のスキンの見た目とこの記事の解説にギャップが出てしまっています。ここらへんどうにかしないと・・。

トラックバック一覧

[Trackback] 提供

この番組は、御覧のスポンサーでお送りしました。 は?ってね。 このページのスキン(外観)を頂いたサイトへのトラックバックなり。

[Trackback] アイコンつきのリンク

懸賞のページに直接リンクする場合に、アイコンをつけてみました。 ←のついたリンクがそれです。こればTOPへ行きますが。 トップページや、その他のページへのリンクと、懸賞のページへのリンクの区別が付きやすく...

関連がありそうな記事一覧

ページの先頭に戻る