★ プレビュー


画像クリックでプレビューができます。
デフォルトの設定では、メインカラムが左側に配置されます。

【カラム配置変更後】
カラム配置を変更した場合は、メインカラム(記事)が中央に配置されます。


★ 基本情報

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

更新履歴 - Update history

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

飾らないデザイン、真っ白なカタチ。記事が映えるシンプルテンプレート。
タイトル画像の変更、カラム配置切り替え、幅可変/固定の切り替えのほか、様々なカスタマイズ項目を用意。
プラグイン3はトップページの記事上部に表示されます。
バトン用専用スタイルあり。プラグインON/OFF対応。XHTML 1.0 Transitional。jQueryをテンプレート内で使用しています。

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

★ テンプレート追加方法

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

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

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

HTML↓



スタイルシート↓

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

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

★ カスタマイズ情報

  • 作成されていません

★ 簡易カスタマイズ項目

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

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

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

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

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
"blanc3c" / rimse
Creative Commons License
関連記事


コメント

  1. (煙管´θ`) | -

    無題

    ありがとうございます!

    お借りしますm(__)m

    ( 13:54 )

  2. |

    管理人のみ閲覧できます

    このコメントは管理人のみ閲覧できます

    ( 19:40 )

  3. Yui | -

    お助けください。

    こちらのテンプレートを使用させていただいてお世話になっております。

    2点教えて頂きたいのですが

    1.サブの題名の色変更ですが、以下のようにしても変化がありません。


    スタイルを追加する場合は、ここより下に追加してください */

    #Sub h2 { color : #FFFF00; }

    /* スタイルを追加する場合は、ここより上に追加してください */ }


    2.記事の表示日時ですが、Upした年月日のみで時間を非表示にできますでしょうか?

    お手数お掛け致しますが、よろしくお願いいたします。

    ( 11:01 )

  4. Yui | 7c/vc3GE

    一部解決できました。

    お世話になりります。

    先日のご質問のうち、1.については解決できました。
    [18.1]にカラーを組み込みました。

    2.日付表示の件についてのみアドバイスお願いできますでしょうか。

    よろしくお願いいたします。

    ( 09:41 [Edit] )

  5. rimse | 4HNZ8mMg

    Re: お助けください。

    Yuiさん、コメントありがとうございます。返信が遅くなってしまって申し訳ありません。


    > 2.記事の表示日時ですが、Upした年月日のみで時間を非表示にできますでしょうか?

    HTMLを編集します。テンプレートの編集画面から、

    <%topentry_hour>:<%topentry_minute>

    という記述を探して削除してください。(ページ内検索するのが手っ取り早いです)

    ちなみに、1番のサブカラムのタイトルの変更に関しては、
    #Sub h2 { color : #FFFF00; }
    ではなく、
    #sub h2 { color : #FFFF00; }
    であれば適用されたはずです(#Subではなく、#sub)

    ( 19:55 [Edit] )

  6. Yui | -

    ありがとうございます。

    アドバイスありがとうございます。

    日付の削除はかんりょうしました。


    サブのタイトル変更に関しては「S」ではなく、「s」の
    #sub h2 { color : #FFFF00; } を挿入しましたが、改善されませんでした。

    しばらくは、[18.1]にカラーを組み込みで対応してみます。

    ( 14:02 )

  7. rimse | 4HNZ8mMg

    Re: ありがとうございます。

    Yuiさん

    すみません、3カラム版だと2カラム版とクラス名が違うのを忘れておりました!

    .submenu h2 { color : #FFFF00; }

    の追加でお願いしますm(_ _)m

    ( 21:26 [Edit] )

  8. Yui | -

    ありがとうございます。

    ありがとうございました。

    無事に変更できました。

    ( 18:32 )

  9. Yui | JalddpaA

    度々失礼いたします。

    いつもお世話になります。

    文字に色付けした場合ですが、Tagをつけるとその文字の色が通常色になってしまいます。

    改善策はありますでしょうか?

    ( 15:17 [Edit] )

  10. rimse | 4HNZ8mMg

    Re: 度々失礼いたします。

    Yuiさん、コメントありがとうございます。

    > 文字に色付けした場合ですが、Tagをつけるとその文字の色が通常色になってしまいます。
    > 改善策はありますでしょうか?


    スタイルシートを2カ所、変更して下さい。

    【1】スタイルシート上部の「簡易カスタマイズ」→「基本設定の変更」→「記事の文字色」の部分
    /* 記事の文字色 */
    .entry , .comment , .trackback , .plugin3 , .entry a.tagword {

    ↓次のように変更(赤色部分が変更箇所)

    /* 記事の文字色 */
    .Entry , #Comment , #Trackback , .Plugin3 , .ltIE8 .Entry a.tagword {



    【2】スタイルシート最後尾の「スタイルシート追加用エリア」に次の記述を追加

    .entry a.tagword {
    color: inherit;
    }




    ※注意
    InternetExplorer7以下のブラウザでは、CSSの対応状況の関係で、現状と同様の表示になります。ご了承下さい。
    それ以外の(現在使われているほとんどの)ブラウザでは、これで大丈夫のハズです。

    ( 00:54 [Edit] )

  11. Yui | JalddpaA

    お礼

    早速のアドバイスありがとうございます。
    改善できました。

    今後ともよろしくお願いいたします

    ( 09:26 [Edit] )

  12. Yui | -

    お世話になります。

    勘違いでBlancのver.2.1の記事でご質問しましたので、あらためてこちらに失礼します。

    当方からの質問に以下のアドバイスを頂戴しました。
    ②記事のタイトルの帯の部分の背景色の変更は可能でしょうか?
    スタイルシート上部の「簡易カスタマイズ」内に、下記のような設定項目がございます。

    /* 【タイトルの背景色】 */
    #title h1 a:link , #title h1 a:visited {
    background-color: #333;
    }

    ここの#333という部分が色の設定になりますので、希望の色のカラーコードに編集してください。


    ※ブログタイトルの背景色はすでに変更しておりまして、記事のタイトル部分の背景色変更は可能でしょうか?

    度々申し訳ありませんがよろしくお願いいたします。

    ( 09:44 )

  13. rimse | 4HNZ8mMg

    Re: お世話になります。

    Yuiさん、コメントありがとうございます。

    記事タイトルの背景色の件、「タイトルの帯」という部分でブログのタイトルのことと勘違いしておりました。すみません。
    記事タイトルでしたら、スタイルシートの
    /*[7.1]*/
    div.entry-title {
    padding: 2em 1.5em 0.1em 1em;
    background-image: url("http://blog-imgs-26-origin.fc2.com/r/i/m/rimse/border-x.gif");
    background-repeat: repeat-x;
    background-position: 0 100%;
    }
    という部分を、次のように編集してください。
    /*[7.1]*/
    div.entry-title {
    padding: 2em 1.5em 0.1em 1em;
    background-image: url("http://blog-imgs-26-origin.fc2.com/r/i/m/rimse/border-x.gif");
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-color: #xxx;
    }


    background-color: #xxx;という部分が追加されています。#xxxというのがカラーコードになりますので、お好みの色のカラーコードに変更してください。

    ( 22:40 [Edit] )

  14. Yui | JalddpaA

    お世話になります。

    いつもありがとうございます。

    無事に記事タイトル部分の背景色を変更できました。

    帯に色が付くとタイトル部分が大きくなったように見えてしまいます。
    ネットで調べてみましたが、自分では改善不可でした。
    申し訳ありませんが、記事タイトル部分の高さを低くする方法がありましたら、お教え願えますでしょうか。

    いつもご面倒をお掛けしまして申し訳ありません。

    ( 15:51 [Edit] )

  15. rimse | 4HNZ8mMg

    Re: お世話になります。

    > 申し訳ありませんが、記事タイトル部分の高さを低くする方法がありましたら、お教え願えますでしょうか。

    編集箇所は以下の部分です。

    /*[7.1]*/
    div.entry-title {
    padding: 2em 1.5em 0.1em 1em;
    background-image: url("http://blog-imgs-26-origin.fc2.com/r/i/m/rimse/border-x.gif");
    background-repeat: repeat-x;
    background-position: 0 100%;
    }

    赤色の部分が記事タイトルの上下左右の余白を設定する記述になっています。記事タイトルの高さはこの余白によって設定されているので、お好みのサイズに合わせて数値を変更してください。

    ( 00:21 [Edit] )

  16. Yuipapa | -

    お世話になります。

    お手数お掛けしました。
    ありがとうございました。

    ( 22:47 )

コメントの投稿

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

質問の際のお願い

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

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

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


トラックバック

Trackback URL
Trackbacks


Recent Entries