FC2ブログ用テンプレートの制作・配布。シンプルなデザインが多めです。
00:24
テンプレート名 : blanc3c
最新バージョン : 1.1
飾らないデザイン、真っ白なカタチ。記事が映えるシンプルテンプレート。
タイトル画像の変更、カラム配置切り替え、幅可変/固定の切り替えのほか、様々なカスタマイズ項目を用意。
プラグイン3はトップページの記事上部に表示されます。
バトン用専用スタイルあり。プラグインON/OFF対応。XHTML 1.0 Transitional。jQueryをテンプレート内で使用しています。
Mac版InternetExplorerで閲覧する際には、スタイルを適用しないよう設定されています。ご了承ください。
テンプレートは手作業で追加することになります。
テンプレートの管理画面を開き、適当なテンプレートを [複製] し、複製後のテンプレートのHTML・スタイルシートをすべて選択→削除でまっさらな状態にしてください。 その後、次のHTML・スタイルシートをコピーし、テンプレートのHTML・スタイルシートにペーストしてください。
(以下のテキストエリアは、エリア内をクリックすると自動で全選択になります)
テンプレートの更新通知機能がついています。更新があるとブログのフッタ部分に★マークがつきます。たまに確認していただけるとありがたいです。
以下の項目は簡易カスタマイズとしてまとめられています。
詳しくはスタイルシート上部を参照してください。
(バージョンによって項目に多少差があります)
記事中での使用を想定したいくつかのクラスが用意してあります。
(バージョンによって項目に多少差があります)
これまでは回り込みなどを実現するにはいちいちスタイルを直接書き込まなければなりませんでした。しかも、たとえばfloat : left;としただけでは画像と文字が近すぎて、見栄えが良くありません。そこで、テンプレート側で回り込みに関するクラスを用意し、余白などをいちいち設定しなくても良いようにしてみました。
指定方法
テキストを右へ回り込ませたい場合は、「class="f-left"」を、左に回り込ませたい場合は 「class="f-right"」を画像等の要素に追加してください。
<img src="画像のurl" class="f-left" />
太字の部分を追加すればOKです。
なお、このクラスは「2.写真風の枠」、または「3.シンプルな枠」と重複して設定することができます。重複して設定する場合は、
<img src="画像のurl" class="f-left photo" />
というように、半角スペースとともにクラス名を追加してください。
画像に対して写真風の枠をつけます。
「1.要素の回り込み」と重複して指定することが可能です。
こんな感じになります。
指定方法
imgタグに 「class="photo"」を追加してください。
<img src="画像のurl" class="photo" />
太字の部分を追加すればOKです。
画像に対してシンプルな枠をつけます。
「1.要素の回り込み」と重複して指定することが可能です。
こんな感じになります。
指定方法
imgタグに 「class="imgbox"」を追加してください。
<img src="画像のurl" class="imgbox" />
太字の部分を追加すればOKです。
記事中の任意の要素に枠をつけないようにします。
このクラスは、記事中の画像に枠を表示させるカスタマイズ(スタイルシート上部、簡易カスタマイズ内に項目があります)と組み合わせて利用してください。
「1.要素の回り込み」と重複して指定することが可能です。
指定方法 imgタグに 「class="noimgbox"」を追加してください。
<img src="画像のurl" class="noimgbox" />
太字の部分を追加すればOKです。
このテンプレートは、
クリエイティブ・コモンズ・ライセンス
の下でライセンスされています。
テンプレート各部分の原著作者・ライセンスは以下の通りです。
無題
ありがとうございます!
お借りしますm(__)m
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
Yui | -
お助けください。
こちらのテンプレートを使用させていただいてお世話になっております。
2点教えて頂きたいのですが
1.サブの題名の色変更ですが、以下のようにしても変化がありません。
スタイルを追加する場合は、ここより下に追加してください */
#Sub h2 { color : #FFFF00; }
/* スタイルを追加する場合は、ここより上に追加してください */ }
2.記事の表示日時ですが、Upした年月日のみで時間を非表示にできますでしょうか?
お手数お掛け致しますが、よろしくお願いいたします。
Yui | 7c/vc3GE
一部解決できました。
お世話になりります。
先日のご質問のうち、1.については解決できました。
[18.1]にカラーを組み込みました。
2.日付表示の件についてのみアドバイスお願いできますでしょうか。
よろしくお願いいたします。
Re: お助けください。
Yuiさん、コメントありがとうございます。返信が遅くなってしまって申し訳ありません。
> 2.記事の表示日時ですが、Upした年月日のみで時間を非表示にできますでしょうか?
HTMLを編集します。テンプレートの編集画面から、
<%topentry_hour>:<%topentry_minute>
という記述を探して削除してください。(ページ内検索するのが手っ取り早いです)
ちなみに、1番のサブカラムのタイトルの変更に関しては、
#Sub h2 { color : #FFFF00; }
ではなく、
#sub h2 { color : #FFFF00; }
であれば適用されたはずです(#Subではなく、#sub)
ありがとうございます。
アドバイスありがとうございます。
日付の削除はかんりょうしました。
サブのタイトル変更に関しては「S」ではなく、「s」の
#sub h2 { color : #FFFF00; } を挿入しましたが、改善されませんでした。
しばらくは、[18.1]にカラーを組み込みで対応してみます。
Re: ありがとうございます。
Yuiさん
すみません、3カラム版だと2カラム版とクラス名が違うのを忘れておりました!
.submenu h2 { color : #FFFF00; }
の追加でお願いしますm(_ _)m
ありがとうございます。
ありがとうございました。
無事に変更できました。
Yui | JalddpaA
度々失礼いたします。
いつもお世話になります。
文字に色付けした場合ですが、Tagをつけるとその文字の色が通常色になってしまいます。
改善策はありますでしょうか?
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の対応状況の関係で、現状と同様の表示になります。ご了承下さい。
それ以外の(現在使われているほとんどの)ブラウザでは、これで大丈夫のハズです。
Yui | JalddpaA
お礼
早速のアドバイスありがとうございます。
改善できました。
今後ともよろしくお願いいたします
お世話になります。
勘違いでBlancのver.2.1の記事でご質問しましたので、あらためてこちらに失礼します。
当方からの質問に以下のアドバイスを頂戴しました。
②記事のタイトルの帯の部分の背景色の変更は可能でしょうか?
スタイルシート上部の「簡易カスタマイズ」内に、下記のような設定項目がございます。
/* 【タイトルの背景色】 */
#title h1 a:link , #title h1 a:visited {
background-color: #333;
}
ここの#333という部分が色の設定になりますので、希望の色のカラーコードに編集してください。
※ブログタイトルの背景色はすでに変更しておりまして、記事のタイトル部分の背景色変更は可能でしょうか?
度々申し訳ありませんがよろしくお願いいたします。
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というのがカラーコードになりますので、お好みの色のカラーコードに変更してください。
Yui | JalddpaA
お世話になります。
いつもありがとうございます。
無事に記事タイトル部分の背景色を変更できました。
帯に色が付くとタイトル部分が大きくなったように見えてしまいます。
ネットで調べてみましたが、自分では改善不可でした。
申し訳ありませんが、記事タイトル部分の高さを低くする方法がありましたら、お教え願えますでしょうか。
いつもご面倒をお掛けしまして申し訳ありません。
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%;
}
赤色の部分が記事タイトルの上下左右の余白を設定する記述になっています。記事タイトルの高さはこの余白によって設定されているので、お好みのサイズに合わせて数値を変更してください。
お世話になります。
お手数お掛けしました。
ありがとうございました。
Author:rimse
ペンギンを愛してやまないペンギン病患者。
LOVEペンギン。
ただいまお仕事でえらいこっちゃしてます。
ブログのテンプレ作ってました。
共有テンプレートのページで、作者「rimse」と検索すると出てきます。
シンプルめのテンプレが多いかも。
Recent Comments