クリックでテンプレートのプレビューができます。

★ 基本情報

テンプレート名 : omega
最新バージョン : 1.1

更新履歴 - Update history

11/03/27 : 1.0 → 1.1
[Bug Fix] 新仕様サーバーで生じる不具合を修正
[Modify] 可変幅の上限/下限を見直し
[Modify] 他言語環境への最適化
[Modify] Mac用フォントの追加・トラックバック部分のスタイル変更など細部の修正多数
10/01/19 : 1.0
ブログ内配布開始

「デザインしよう。あなたの言葉で。」
プラグイン3はトップページの記事上部に表示されます。
バトン用専用スタイルあり。XHTML 1.0 Transitional。jQueryをテンプレート内で使用しています。

Mac版InternetExplorerで閲覧する際には、スタイルを適用しないよう設定されています。ご了承ください。

★ テンプレート追加方法

テンプレートは手作業で追加することになります。

テンプレートの管理画面を開き、適当なテンプレートを [複製] し、複製後のテンプレートのHTML・スタイルシートをすべて選択→削除でまっさらな状態にしてください。 その後、次のHTML・スタイルシートをコピーし、テンプレートのHTML・スタイルシートにペーストしてください。

(以下のテキストエリアは、エリア内をクリックすると自動で全選択になります)

HTML↓

スタイルシート↓

★ テンプレート更新通知機能つき

更新機能・見本 テンプレートの更新通知機能がついています。更新があるとブログのフッタ部分に★マークがつきます。たまに確認していただけるとありがたいです。

★ 簡易カスタマイズ項目

以下の項目は簡易カスタマイズとしてまとめられています。 詳しくはスタイルシート上部を参照してください。
(バージョンによって項目に多少差があります)

  • フォントの設定
    • 基本となるフォント
    • ブログタイトルのフォント
  • フォントサイズの変更
    • 全体の文字サイズ
    • タイトルの文字サイズ
    • ブログ紹介文の文字サイズ
    • メインカラムの文字サイズ
    • 記事の本文の文字サイズ
    • サブカラムの文字サイズ
  • 文字色の変更
    • 記事の文字色
    • サブカラムの文字色
  • 背景色の変更
    • 全体の背景色
  • 記事中の画像に枠をつける
  • タイトル部分の設定
    • タイトルの文字色
    • タイトルのフォント
  • 幅可変/固定の切り替え

★ テンプレート独自クラスについて

記事中での使用を想定したいくつかのクラスが用意してあります。
(バージョンによって項目に多少差があります)

1.要素の回り込み

T38@sapporo 2081222_DSC00456

これまでは回り込みなどを実現するにはいちいちスタイルを直接書き込まなければなりませんでした。しかも、たとえばfloat : left;としただけでは画像と文字が近すぎて、見栄えが良くありません。そこで、テンプレート側で回り込みに関するクラスを用意し、余白などをいちいち設定しなくても良いようにしてみました。

指定方法
テキストを右へ回り込ませたい場合は、「class="f-left"」を、左に回り込ませたい場合は 「class="f-right"」を画像等の要素に追加してください。

<img src="画像のurl" class="f-left" />

太字の部分を追加すればOKです。

なお、このクラスは「2.写真風の枠」、または「3.シンプルな枠」と重複して設定することができます。重複して設定する場合は、

<img src="画像のurl" class="f-left photo" />

というように、半角スペースとともにクラス名を追加してください。

2.写真風の枠

画像に対して写真風の枠をつけます。
「1.要素の回り込み」と重複して指定することが可能です。
090109_DSC00477
こんな感じになります。

指定方法
imgタグに 「class="photo"」を追加してください。

<img src="画像のurl" class="photo" />

太字の部分を追加すればOKです。

3.シンプルな枠

画像に対してシンプルな枠をつけます。
「1.要素の回り込み」と重複して指定することが可能です。
DSC00069
こんな感じになります。

指定方法
imgタグに 「class="imgbox"」を追加してください。

<img src="画像のurl" class="imgbox" />

太字の部分を追加すればOKです。

4.枠をつけない

記事中の任意の要素に枠をつけないようにします。
このクラスは、記事中の画像に枠を表示させるカスタマイズ(スタイルシート上部、簡易カスタマイズ内に項目があります)と組み合わせて利用してください。
「1.要素の回り込み」と重複して指定することが可能です。

指定方法 imgタグに 「class="noimgbox"」を追加してください。

<img src="画像のurl" class="noimgbox" />

太字の部分を追加すればOKです。

★ 使用条件・ライセンスについて

Creative Commons License
このテンプレートは、 クリエイティブ・コモンズ・ライセンス の下でライセンスされています。
テンプレート各部分の原著作者・ライセンスは以下の通りです。

HTML・CSS
"omega" / rimse
Creative Commons License
関連記事


コメント

  1. 生徒 | -

    メインカラムの広げ方がわかりません

    rimse様のomegaがとても素敵なものでしたので使わせてほしのですが、
    その際にメインカラムの広げ方が分からなく、質問させていただきました。

    ( 05:55 )

  2. rimse | 4HNZ8mMg

    Re: メインカラムの広げ方がわかりません

    生徒さん、コメントありがとうございます。返信が遅くなってしまってすみません。
    > rimse様のomegaがとても素敵なものでしたので使わせてほしのですが、
    > その際にメインカラムの広げ方が分からなく、質問させていただきました。


    スタイルシート上部の「簡易カスタマイズ」内に、表示幅の変更に関しての記述がございますので、そちらを参照してください。

    ( 01:41 [Edit] )

コメントの投稿

(コメントの編集・削除時に必要)
(管理者にだけ表示を許可する)

質問の際のお願い

テンプレートに関する質問は、それぞれのテンプレート専用の記事にて受け付けています。トップページの「Templates Information」から、各テンプレート用の記事へリンクが張ってあります。

質問の際には、情報の共有のため非公開コメントはご遠慮くださいませ。
また、使用しているバージョンによって編集内容が異なる事があるため、多くの場合ソースコードの確認が必要になります。出来る限りブログのURLを入力してください。ブログのURLを公開したくない場合は、質問内容を公開コメントで投稿した後、非公開コメントにてブログのアドレスを追加投稿してくださいませ。

質問以外のコメントは、ご自由にコメントしていただいて結構です。たくさんのコメントお待ちしております。


トラックバック

Trackback URL
Trackbacks


Recent Entries