--
--.--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2013
03.05

white_grain

Category: テンプレート
【DEMO】
利用にあたって
カスタマイズ○
HTML、CSSの再配布○
"designed by potar"を消す○
画像の再配布×

特徴?
うっすらノイズ入りの白背景にグレーの文字。
余白を大きめにとって、なるべくボックス間をラインで区切らないようにしました。
サイドバーは固定、記事部分はブラウザの大きさに合わせて幅が変わります。
ヘッダーに画像を入れやすい、かも。
画面右下に、JavaScriptを利用したページの先頭へ戻るボタンを付けてみました。

デメリット
日付部分の丸い枠にCSS3を使っています。CSS3に対応していないブラウザでは四角く表示されます。
記事部分に投稿年が表示されません。
アイコンの色が薄くて見にくいかもしれません。

カスタマイズ例
◆ヘッダーに画像を入れる
スタイルシート編集から以下の部分を探し、赤字の箇所を書き換えます。
ヘッダーのサイズは、縦150px、横はブラウザの幅いっぱいです。(広がります。)
縦の長さは150pxで、横方向に繰り返してもおかしくない画像か、横の幅が十分に大きい画像を使うと良いかと思います。
/*---------------------ヘッダー------------------------*/
/* ヘッダー全体 */
#header {
width:100%;
height:150px;
margin-bottom:32px;
background: #c8c8c8;
}


◆ブログ名の文字色を変える
スタイルシート編集から以下の部分を探し、赤色の箇所を書き換えます。(text-strokeは文字のアウトラインを表示するプロパティです。)

◆ブログの説明の文字色を変える
スタイルシート編集から以下の部分を探し、黄色の箇所を書き換えます。
/*---------------------ヘッダー------------------------*/
/* ヘッダー全体 */
#header {
width:100%;
height:150px;
margin-bottom:32px;
background: #c8c8c8;
}
/* ブログタイトル */
.blogtitle{
font-size:48px;
padding-top:58px;
padding-left:92px;
font-family: 'MS PMincho','Hiragino Mincho Pro',serif;
-webkit-text-stroke: 0.5px #eee;
}
/* ブログタイトルのリンク設定 */
.blogtitle a{color:#eee;}
.blogtitle a:link{color:#eee;}
.blogtitle a:visited{color:#eee;}
.blogtitle a:hover{color:#eee;text-decoration:none;}
/* ブログの説明 */
.description{
font-size:12px;
padding-left:94px;
margin:13px 0 0 0;
color:#666;
}
スポンサーサイト

Comment:11  Trackback:0
トラックバックURL
http://potar.blog.fc2.com/tb.php/22-a06e9fa5
トラックバック
コメント
初めまして、potar様。
FC2ブログを初めて1ヶ月ちょっとで、当初から設定していたテンプレートを変更したいと思い、何点か気に入ったものをダウンロードさせていただいたら、potar様作のwhite_graiとgrey_paisleyをお借りしておりました。
同じ作者さんから2点もいただいていたとは恐縮です。m(_ _)m

お教え頂きたいのですが、white_graiは、右カラム固定とのことですが、全体幅センターに1000px程度にまとめたいのですが可能ですか?
オリジナル小説を更新しているのですが、現在の幅だと記事部分の表示が間延びしてしまい、私のブログにはちょっと不都合なんです。
ブロ初心者のため、作法等失礼ありましたらすいません。
調整も、自力で解決できず四苦八苦しております(X_X;)。
nicikadot 2013.03.07 22:14 | 編集
nicika様、はじめまして。
テンプレートを二点もダウンロードしていただいて、ありがとうございます!

ご質問についてですが、なおす箇所が散らばっていて、コメント欄に書くと分かりにくそうなので、テキストファイルでご容赦ください。

HTML
http://blog-imgs-55.fc2.com/p/o/t/potar/white_grain_comment_html.txt
スタイルシート
http://blog-imgs-55.fc2.com/p/o/t/potar/white_grain_comment_css.txt

全体の幅を1000px固定にした場合の、HTMLとスタイルシートです。■で目立たせてある部分が、書き換える場所です。
他の幅で固定したい場合は、スタイルシートのwidthの数値を書き換えて下さい。
HTML編集・スタイルシート編集のHTMLとスタイルシートを全部一度消してから、上のテキストにコピペして置き換えると、そのまま使える、はずです。

最大の幅が1000pxでブラウザの幅を狭くした時は記事部分も狭くなる、というレイアウトをご希望の場合は、済みませんがご自身で調べて直すが、他のテンプレートを探してみてください。
px単位で固定したもので良ければ、もう一度コメントを頂ければ、他の幅のものもアップロード致します。
potardot 2013.03.08 00:21 | 編集
potar様、お早いご返事ありがとうございます。
私、コピペしかできる能力が無かったので、ご指示頂いたようにコピペで変更いたしました。無事、幅が狭まりました。丁寧なご指示、感謝です。(*´∀`*)

早速、勝手ながら自分のイメージに合うように、ちょっと行間や隙間を変更して、設定! としたんですが、ページによってサイドバーが横に表示されずに記事下部に表示されちゃいます。
困りました。
あ~ん、グレイのバックでシンプルでカッコいいと思ったのに、使えないかも・・・。
どうしてこうなるんでしょうか。お手数ですが、教えて頂けると嬉しいです。
ほんっと、ご面倒おかけして申し訳ありませんm(_ _)m

nicikadot 2013.03.08 14:08 | 編集
potar様
たびたび失礼します。

記事の表示を適正にするために、自分で触っておりまして気付きました。
サイドバーのプラグインにバナーリンクコーナーを作っているのですが、記事内に同じバナーリンクを貼り付けているページは、サイドバーがずれるようです。
原因が分かってよかった!です。
しかしまた疑問が。
ということは、サイドと記事内の二重表示はできないってことですよね?
なんとか対処法を考えようと思います。
色々とご質問をして、お手数をかけてしまいました。
有難うございました。
nicikadot 2013.03.08 17:25 | 編集
とりあえず解決で良いのでしょうか?テンプレートを使って下さり、ありがとうございます。

少し前に、ブログ拝見しました。トップページのサイドバーがおかしくなるのは、おそらくプラグインのdivタグの閉じ忘れが原因かと思います。
下の部分のプラグインの、最後の<div>を</div>に書き換えてみて下さい。
サイドバーが下に落ちているページも、同じバナーの箇所でdivタグが閉じられていないように思います。
テンプレートとは関係のない部分なので、不確かなのですが。
一度試してみて下さいー。

↓↓ アルファポリス 様 ↓↓
<div><a href="h ttp://www.alphapolis.co.jp/cont_access2.php?citi_cont_id=624024218" target="_blank"><img src="h ttp://www.alphapolis.co.jp/cont_access.php?citi_cont_id=624024218&size=88" width="88" height="31" border="0"></a><div>



追記です。
上のコメントで上げたHTMLを文字化けさせてしまいました。すみません。
一度テンプレートをダウンロードし直して、HTML編集で直接、下のように書き換えて下さい。
<body>から<!-- エントリー -->の部分までです。
#containerの開始位置を変えて、ヘッダーの背景色が左右いっぱいに広がるように、#header-bgと#headerを入れ子にしています。
お手数をかけてしまい、申し訳ありません。

<body><a name="top" id="top"></a>


<!-- ヘッダー -->
<div id="header-bg">
<div id="header">
<h1 class="blogtitle"><a href="./" accesskey="1"><%blog_name></a></h1>
<div class="description"><%introduction></div>
</div></div>
<!-- ヘッダー END -->

<div id="container">
<div id="content">
<div class="entry-area">

<!-- エントリー -->
potardot 2013.03.08 18:50 | 編集
コメントが前後して分かりにくくなってしまったので、書き直しますね。
文字化けしてしまったのは、私のせいです。申し訳ないです。
次の手順でやって頂ければ、たぶん大丈夫だと思います。

◆テンプレートの幅を固定する
1.今使っているwhite_grainの名前を変えるか、削除して下さい。(そうしないと、再ダウンロードが出来ない仕様だったと思います。)

2.もう一度、共有テンプレート追加から、テンプレートをダウンロードして下さい。

3.スタイルシート編集で、スタイルシートを一度全て削除してから、次のスタイルシートに置き換えて下さい。
http://blog-imgs-55.fc2.com/p/o/t/potar/white_grain_comment_css.txt

4.HTML編集で、<body>から<!-- エントリー -->のHTMLを書きなおしてください。
(ヘッダーの背景色をブラウザの幅いっぱいに広げるために、#hederと#header-bgを入れ子にしています。#containerの位置を変えています。)

◇変更前
<body><a name="top" id="top"></a>

<div id="container">
<!-- ヘッダー -->
<div id="header">
<h1 class="blogtitle"><a href="./" accesskey="1"><%blog_name></a></h1>
<div class="description"><%introduction></div>
</div>
<!-- ヘッダー END -->

<div id="content">
<div class="entry-area">

<!-- エントリー -->

◇変更後
<body><a name="top" id="top"></a>

<!-- ヘッダー -->
<div id="header-bg">
<div id="header">
<h1 class="blogtitle"><a href="./" accesskey="1"><%blog_name></a></h1>
<div class="description"><%introduction></div>
</div></div>
<!-- ヘッダー END -->

<div id="container">
<div id="content">
<div class="entry-area">

<!-- エントリー -->




◆プラグイン中のdivタグを閉じる
1.下の部分のプラグインの最後の<div>を</div>にします。
ここは、きちんと閉じておかないと、他のテンプレートを使ってもレイアウトが崩れることがあると思います。

↓↓ アルファポリス 様
<div><a href="h ttp://www.alphapolis.co.jp/cont_access2.php?citi_cont_id=624024218" target="_blank"><img src="h ttp://www.alphapolis.co.jp/cont_access.php?citi_cont_id=624024218&size=88" width="88" height="31" border="0"></a><div>
potardot 2013.03.08 21:54 | 編集
potar様、ありがとうございました!

丁寧にサイト確認いただいて、ご指示いただき、ありがとうございます。m(_ _)m
な~るほど、です。
<div> → </div>に直してみました。
表示きれいになりました。ヽ(´¬`)ノワーイ!!
記事内のバナーリンクをすべて削除して、一旦表示が正常になったのを確認してから、potar 様のコメントを見させて頂いたので、まだ記事内表示とサイドとダブった場合のずれは確認していないんですけどね。

とりあえず、文字化けの修正をしたら疲れてしまいましって、そこまで手が回らなくて・・・。
文字化けしたのも、なんだろこれ?と思ってたんですけど、意味分かんなくて、もういいかなぁ、と放置しておりました。
こちらも直るなんて嬉しい(*´∀`*) 
お世話掛けちゃいましたね。ほんっっとに、感謝です。
nicikadot 2013.03.09 13:11 | 編集
直せたみたいで良かったです!
文字化けさせてしまったのは、本当に申し訳ありません。
potardot 2013.03.09 15:35 | 編集
このコメントは管理者の承認待ちです
dot 2014.03.03 23:31 | 編集
このコメントは管理人のみ閲覧できます
dot 2015.01.30 00:11 | 編集
このコメントは管理者の承認待ちです
dot 2015.02.27 21:55 | 編集
管理者にだけ表示を許可する
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。