Lekumo ブログOEM マニュアル

カスタムCSSについて

カスタム CSS を利用すると、上級者向けテンプレートに変換しなくても、ブログの外見や雰囲気、レイアウト、およびデザインをカスタマイズすることができます。
※ カスタム CSS を簡単に利用するためのサンプル CSS などは以下のページで紹介しています。このページとあわせてご確認ください。

カスタム　CSS　を使う理由

上級者向けテンプレートを使うためデザインを変換すると、ページの HTML に直接変更を加えられる機能が利用できます。ただし、特定のブログデザインや設定機能を利用できなくなります。ブログデザインを変更するのにカスタム CSS を使うと、こうした機能をすべて維持でき、 Lekumo ブログOEM のデザイン機能やその他の機能をすべて使えるので便利です。

カスタム CSS の使い方

カスタム CSS 機能を使うには、「ホーム」 > 「ブログ」 > 「（ブログの名前）」 > 「デザイン」 > 「カスタム CSS を編集」ページを開きます。

Lekumo ブログOEM の CSS スタイルとクラスレファレンス

上級者向けテンプレートで独自にページを作成していない場合、 Lekumo ブログOEM のブログは、すべてのページで同じ HTML 構造を共有しています。ブログのページ構造について、詳細は「」を参照してください。

ページ構造の概要

ブログの各 HTML ページはすべて同じ構造で、使用しているや階層のパターンも同一です。ブログのページ構造は、以下のいずれかの形式で表示できます。

内側と外側の Div

ほとんどすべてのページ要素は、外側のコンテナに内側のコンテナがある 2 重構造になっています。この構造には以下の利点があります。

外側のコンテナは要素の寸法を指定し、内側コンテナではバディングや枠線の値を指定します。この方法によってこうした値を、種々の不可解な CSS トリックを使うことなく、指定できるので便利です。
ブログ内の部分的な背景の差し替えが簡単に行えます。また、表示位置によって異なる背景画像を設定するなど、多彩なデザインを行うことができます。

ページ要素

ブログデザインはどれも以下のページ要素から成ります。

コンテナ

コンテナ Div はページ全体を囲み、グローバル・レベルでページのスタイルや位置を統一するのに必要なフックを提供します。

バナー

ページ・バナーはブログの名前と説明を含みます。デザイナーはよくバナーの中にブログに関連付けたロゴやグラフィックのページ・ヘッダーを使います。

ページ・ボディ

ページ・ボディは、タイプリスト、記事、トラックバック、コメント、サイドバー・コンテンツ・モジュールなどのブログ・コンテンツをすべて囲みます。

ブログの列：Alpha、Beta、Delta、Gamma

1 つのブログに、いくつかのコンテンツ・エリアが存在することはよくあります。ブログのレイアウトが複数列から成る場合、それぞれの列は、alpha、beta、delta、gamma のIDを使った、4 つの Div の 1 つになります。

これらのコンテンツ・エリアの名称は、世界的に使い方が曖昧で、一定の順番で記述するとか、それぞれに固有のコンテンツを含める、などの規定はありません。

Lekumo ブログOEM では、これらコンテンツ・エリアのコンテンツは、「ブログ」タブの「デザイン」ページで指定したコンテンツ・モジュールのレイアウトによります。

記事・コンテンツ

記事とはあなたが書く記事のことで、各記事には以下の要素が含まれます。

記事・ヘッダーまたはタイトル
記事の内容
記事の追記または追記へのリンク
記事のフッター：個別ページへのリンク、記事投稿日、記事投稿者など

記事は以下のクラスと Div 構造を持っています。

div.entry
    h3.entry-header
    div.entry-content
        div.entry-body
        (div.entry-more OR p.entry-more-link)
    p.entry-footer

.entry-body と .entry-more の Div がブログ記事の枠組みを作ります。不正なフォーマットの記事によって、残りのページのレイアウトやスタイルが崩れないように、細心の注意を払ってください。

注： Lekumo ブログOEM の WYSIWYG 記事作成インターフェイス、または有効な XHTML を使って、できる限り記事によるブログレイアウトの崩れを防いでください。

閲覧者からのフィードバック

ブログは、コメントやトラックバックなどの閲覧者からのフィードバックがあってこそブログらしさを発揮するものです。そして通常、記事の後には閲覧者のフィードバックが続きます。以下はフィードバックを表示・投稿するのに必要な要素のクラスやスタイルについてです。

以下は、1 つの記事に対するすべての公開コメントをグループ化します。

a#comments (for hash-links)
div.comments
    h3.comments-header
    div.comments-content
        (the following sections are per-comment and repeat)
        div.comment
             div.comment-content
             p.comment-footer

コメント・フォーム

記事がコメントを受け付けているとき、または"open"であるとき、フォームとテキストが通常表示されます。以下はそのフォームとコンテンツをグループ化します。

div.comments-open
    h3.comments-open-header
    div.comments-open-content
        form
    div.comments-open-footer

受け付けていないコメント

記事がコメントを受け付けていないとき、またはコメントが"closed"の状態であるとき、つまり、閲覧者にとって以前の公開コメントは読めても新しくコメントを投稿できない状態のときには、「この記事へのコメントは終了しました。」のテキストが通常、表示されます。以下はそのコンテンツをグループ化します。

p.comments-closed

トラックバック

以下はブログに公開されるすべてのトラックバック・データをグループ化します。

div.trackbacks
    a#trackback (for hash-link on page)
    h3.trackbacks-header
    div.trackbacks-info
    div.trackbacks-content
        div.trackback
            div.trackback-content
            p.trackback-footer

コンテンツ・モジュール

コンテンツ・モジュールとは、アーカイブ・リスト、コメント、トラックバックを除くすべてのコンテンツを意味し、通常ブログのサイドバー、つまり左側や右側の列に位置します。

コンテンツ・モジュールはどれも同じ基本構造を取ります。それぞれが、次の要素に対応する div を持ちます。

コンテナ
ヘッダー
コンテンツ

モジュールのレイアウト

モジュールは、container div、header、content div を使い、コンテンツ・エリアと同じ基本的レイアウトを取ります。各コンテンツ・モジュールには、そのほかに classname があり、モジュールによる通常のスタイル指定のほか、固有のスタイルも指定できます。

div.module-<type>.module
    h2.module-header
    div.module-content
        ul.module-list

すべてのコンテンツ・モジュールが上の例のようにリスト・フォーマットを利用しているわけではありませんが、コンテンツ・モジュールのコンテンツには任意の HTML を含めることができます。

タイプリスト

タイプリストには通常、「リンク」リストや「ひと」リストのようにテキストのリストと、「音楽」リストや「本」リストのようにサムネイルから成るリストの 2 種類があります。

Text-based TypeList

div.module-typelist.module
    h2.module-header
    div.module-content
        ul.module-list

Thumbnail/Image-based TypeList

div.module-typelist.module
    h2.module-header
    div.module-content typelist-thumbnailed
        ul.module-list
            li (repeat)
                div.typelist-thumbnail
                div.typelist-description

アーカイブ・リストのコンテンツ・モジュール

Lekumo ブログOEM では主に 3 つのアーカイブ・リストをサポートします。以下のスタイル情報はその 3 つのすべてに適用します。

日付ベース(Date Based)
カテゴリー・ベース(Category Based)
個別(Individual)

div.archive (OR multiply-classed div.archive-date-based.archive)
    h2.archive-header
    div.archive-content
        ul.archive-list

記事と同様、全体を囲む Div、ヘッダー、コンテンツ Div があるほか、スタイル・リストがあります。記事・ヘッダーのルールも同様にアーカイブ・リストへ適用されます。

CSS で一からのデザインを作成する際は

カスタム CSS を使用してブログを一からデザインするには、デザインテーマ「カスタマイズ用：レイアウトのみ」を使用する方法があります。
デザインテーマ「カスタマイズ用：レイアウトのみ」は、カスタム CSS を利用してブログを高度にカスタマイズするための専用のテーマです。
このテーマには、ブログをレイアウトする最低限の情報しか含まれていません。デザイン的な指定が一切含まれていないので、カスタム CSS を利用して、一からデザインを作成することが可能です。
ビジネス・ブログなど、見た目をすべてデザインしたい場合などにご利用ください。
デザインテーマの選択は、管理画面の「ブログ」から、各ブログの「デザイン」を選択後、「テーマを変更」から選択することができます。

Lekumo ブログOEM マニュアルトップに戻る

page top