--
--.--

スポンサーサイト

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

2013
03.11

leaves

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

特徴?
葉っぱの画像は全て透過してあります。
記事の投稿日部分の葉っぱは、曜日によって変わります。
サイドバーの色を変えるための、色違いの背景画像を作っておきました。

デメリット
画像が重めかもしれません。
Win Vista以降で閲覧した場合、Candaraというフォントを指定された部分(英数字)が、日本語部分(メイリオ)に比べて小さく見えます。
Candaraを指定した部分は、ブログタイトル・ブログ説明・記事タイトル・記事日付・カレンダーです。

メイリオよりCandaraが小さい


カスタマイズ例
◆外側の背景画像(白い布の部分)を変える
スタイルシート編集から、下記の部分を探し、赤色の箇所を使いたい画像のURLに書き換えます。
/*---------------------ページ全体----------------------*/
body{
margin:0;
padding:0;
font-family:Verdana,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック','MS PGothic',sans-serif;
font-size:16px;
letter-spacing:1px;
line-height:1.6em;
word-wrap: break-word;
color:#151105;
background: url(http://blog-imgs-55.fc2.com/p/o/t/potar/leaves-bg-cloth.jpg);
}


◆記事とサイドバーの背景画像を変える
スタイルシート編集から、下記の部分を探し、赤色の箇所を使いたい画像のURLに書き換えます。
/*---------------------コンテンツ全体----------------------*/
#container{
width: 900px;
margin:0 auto;
text-align:left;
background: url(http://blog-imgs-55.fc2.com/p/o/t/potar/leaves-bg-biscuit2.jpg) repeat-y;
}

デフォルトでは、こんな画像を使っています。全体の幅が900pxで、左側650pxが記事部分の色、右側250pxがサイドバー部分の色です。

leaves背景

上で書いた通り、サイドバーの色を変えた画像も作ってあります。ご自由にお使い下さい。

◆Candaraを使わない
スタイルシート編集で「Candara,」と書かれている箇所を探し、削除します。
また、WindowsとMacで表示を近くしたい場合は、Candaraのすぐ後に書いてある「Optima,」も削除して下さい。
(OptimaもCandaraも、ちょっとエレガントな雰囲気のあるフォントです。OptimaはMac、Candaraはwinです。)
スポンサーサイト

Comment:11  Trackback:0
トラックバックURL
http://potar.blog.fc2.com/tb.php/31-a0d35b4a
トラックバック
コメント
※文字が小さくなってしまうという、ご質問への返答です。

ブログ拝見しました。
ご質問を投稿されてから、またカスタマイズされたのか状況が変わっているようで、解決したのかな?と思っております。
カスタマイズ途中かも分からないので、よくありそうなミスを2点書いておきますね。

◆特定の記事や、特定のプラグインの後から、全ての文字が小さくなってしまった場合
記事中やプラグイン中のタグの閉じ忘れかもしれません。
例えば、記事編集画面で小さい文字にしようとすると
<span style="font-size:x-small;">小さい文字</span>
このようなタグが挿入されると思いますが、
<span style="font-size:x-small;">小さい文字</span
最後の>を誤って消してしまうと、spanタグがずっと閉じられないままになってしまうので、それ以降の文字が全て小さくなってしまします。

◆タグは閉じているけれど、文字がやたら小さくなる
このテンプレートでは、body要素のフォントサイズを16pxに指定して、他の部分は殆どemで指定しています。
emは「文字を○倍の大きさにしろ」という相対単位を使った指定方法ですが、ここで言う「○倍」は、「直近の親要素の文字サイズに対する比率」です。
例えば、親要素の文字の大きさを0.75em、子要素の文字の大きさを0.5emとすると、それぞれ文字の大きさは、
親要素:16px*0.75=12px
子要素:16px*0.75*0.5=6px
となり、子要素の文字がとても小さくなります。
このテンプレートでは、1.0em未満にしている箇所ばかりなので、さらに子要素を作って1.0em未満を指定すると、文字が小さくなりがちです。

また別の問題でしたら、お手数ですがコメントよろしくお願いします。
potardot 2013.03.28 19:31 | 編集
とても使いやすいテンプレートを有難うございます^^

ところで コメント欄に タイトルをつけたい場合はどうすればよいでしょうか?
いつも 頂いたコメント返信には タイトル部分に相手の方のお名前を入れているのです・・・

もしも つけたし可能でしたら ご指示願います
カスタマイズもしやすく 有り難く思っております^^
どうぞ宜しくお願い致します
レモンの木dot 2013.04.04 20:45 | 編集
potarさん こんにちわ~。

お忙しいのにご訪問&お返事頂いてありがとうございました。期末期首でバタバタしておりまして、
お礼が今頃になり申し訳ございませんでした。

そうなんです。
コメントをさせて頂いた時は、もうお手上げ状態だったのです。
あれ以来カスタマイズはしていないのですが、いつの間にかちゃんと表示出来ておりました。
よく判らずにフォントをいじったりしちゃったんで、きっと変になっちゃったのかもしれません。
だから一度削除して再ダウンロードしました。

特に判らなかったのが<em>表示。^^
potarさんが説明を記載して下さってよく判りました。

お手数をお掛け致しまして、本当に申し訳ございませんでした。
今はとっても気に入って使わせて頂いております。

お忙しいとは思いますが、またテンプレ作って下さいね。
楽しみに、お待ちしております。
チーdot 2013.04.05 11:46 | 編集
>レモンの木さん
はじめまして。テンプレートをダウンロードして下さって、ありがとうございます。

ご質問について
コメントタイトルは使う人が少ないかと思って、このテンプレートのHTMLでは省略しました。
なので、HTML側にコメントタイトル欄を書き足して、スタイルシート側で装飾する必要があります。
直さないといけない箇所が多く、上手く説明出来そうにないので、詳しい説明は省かせて下さい。「FC2ブログ コメント欄 カスタマイズ」等で検索すると、分かりやすく解説したサイトが出てきましたので、必要でしたら調べてみて下さい。
タイトル入力欄が一番上で良ければ下の物をコピペして使って下さい。(赤色の箇所が書き足した部分です。<tr>~</tr>までを移動させれば、表示位置を変えられます。)

◆HTML編集で、<!-- コメント -->~<!-- コメント編集 END -->を一度削除して、下記をコピペして置き換えて下さい。

<!-- コメント -->
<!--comment_area-->
<div id="comments" class="comments-head">コメント</div>
<!--comment-->
<div id="comment<%comment_no>" class="comments-body"><%comment_title><br /><%comment_body></div>
<div class="comments-post"><%comment_url+name>
<img class="dot5" src="http://blog-imgs-55.fc2.com/p/o/t/potar/leaves-li-dot5.png" alt="dot" />
<%comment_year>.<%comment_month>.<%comment_day> <%comment_hour>:<%comment_minute> | <a href="<%comment_edit_link>">編集</a></div>
<!--/comment-->

<form id="comment_form" name="comment_form" method="post" action="./">
<input type="hidden" name="mode" value="regist" />
<input type="hidden" name="comment[no]" value="<%pno>" />
<table cellpadding="5" cellspacing="0" border="0" summary="comment_form" class="form">
<tr>
<td valign="top"><label for="subject">タイトル: </label></td>
<td><input id="subject" name="comment[title]" type="text" accesskey="3" tabindex="2" value="No title" onblur="if(this.value == '') this.value='No title';" onfocus="if(this.value == 'No title')
this.value='';" /></td>
</tr>

<tr>
<td valign="top"><label for="name">名前: </label></td>
<td><input id="name" name="comment[name]" accesskey="4" tabindex="3" value="<%cookie_name>" /></td>
</tr>
<tr>
<td valign="top"><label for="mail">メール: </label></td>
<td><input id="mail" name="comment[mail]" accesskey="5" tabindex="4" value="<%cookie_mail>" /></td>
</tr>
<tr>
<td valign="top"><label for="url">URL: </label></td>
<td><input id="url" name="comment[url]" accesskey="6" tabindex="5" value="<%cookie_url>" /></td>
</tr>
<tr>
<td valign="top"><label for="comment">コメント: </label></td>
<td><textarea id="comment" name="comment[body]" accesskey="7" tabindex="6" rows="10" cols="50"></textarea></td>
</tr>
<tr>
<td><label for="pass">Pass: </label></td>
<td><input id="pass" name="comment[pass]" type="password" accesskey="8" tabindex="7" size="20" /></td>
</tr>
<tr>
<td><label for="himitu">秘密: </label></td>
<td><input id="himitu" name="comment[himitu]" type="checkbox" accesskey="9" tabindex="8" /> <span class="mess">管理者にだけ表示を許可する</span></td>
</tr>
<tr>
<td> </td>
<td><input id="submit" name="submit" type="submit" accesskey="a" tabindex="9" value=" 書込 " /></td>
</tr>
</table>
</form>
<!--/comment_area-->
<!-- コメント END -->
<!-- コメント編集 -->
<!--edit_area-->
<div class="comments-head">コメントの編集</div>
<form id="comment_form" name="comment_form" method="post" action="./">
<input type="hidden" name="mode" value="edit">
<input type="hidden" name="mode2" value="edited">
<input type="hidden" name="edit[rno]" value="<%eno>">
<table cellpadding="5" cellspacing="0" border="0" summary="comment_form" class="form">
<tr>
<td valign="top"><label for="subject">タイトル: </label></td>
<td><input id="subject" name="edit[title]" accesskey="3" tabindex="2" value="<%edit_title>" /></td>
</tr>

<tr>
<td valign="top"><label for="name">名前: </label></td>
<td><input id="name" name="edit[name]" accesskey="4" tabindex="3" value="<%edit_name>" /></td>
</tr>
<tr>
<td valign="top"><label for="mail">メール: </label></td>
<td><input id="mail" name="edit[mail]" accesskey="5" tabindex="4" value="<%edit_mail>" /></td>
</tr>
<tr>
<td valign="top"><label for="url">URL: </label></td>
<td><input id="url" name="edit[url]" accesskey="6" tabindex="5" value="<%edit_url>" /></td>
</tr>
<tr>
<td valign="top"><label for="comment">コメント: </label></td>
<td><textarea id="comment" name="edit[body]" accesskey="7" tabindex="6" rows="10" cols="50"><%edit_body></textarea></td>
</tr>
<tr>
<td><label for="pass">Pass: </label></td>
<td><input id="pass" name="edit[pass]" type="password" accesskey="8" tabindex="7" size="20" /></td>
</tr>
<tr>
<td><label for="himitu">秘密: </label></td>
<td><input id="himitu" name="edit[himitu]" type="checkbox" accesskey="9" tabindex="8" /> <span class="mess">管理者にだけ表示を許可する</span></td>
</tr>
<tr>
<td> </td>
<td><input id="submit" name="submit" type="submit" accesskey="a" tabindex="9" value=" 書込 " /> <input id="del" name="edit[delete]" type="submit" accesskey="b" tabindex="a" value=" 削除 " />
</td>
</tr>
</table>
</form>
<!--/edit_area-->
<!-- コメント編集 END -->


◆スタイルシート編集に下記の一行を追加して下さい。
#subject{width:200px;border:1px solid #575c30;}
potardot 2013.04.05 21:48 | 編集
>チーさん
直ったようで良かったです!emは掛け算になってしまうので、慣れるまで大変ですね。今度テンプレートを作る時には分かりやすいように考えて見ようと思います。
気に入ったと言って頂けて、とても嬉しいです。こちらこそ、有り難うございます。
potardot 2013.04.05 22:14 | 編集
早速のお返事有難うございました^^
無事できました♪
私にとって大事なブログなのでとても嬉しいです
これからのますますのご活躍を期待しています
レモンの木dot 2013.04.06 11:27 | 編集
>レモンの木さん
うまくいったようで良かったです。
大切なブログで使って下さって、有り難うございます!
potardot 2013.04.06 20:08 | 編集
このコメントは管理人のみ閲覧できます
dot 2013.06.12 14:18 | 編集
お返事が遅れて申し訳ありません。コメントが鍵付きでしたので、簡単に。

カテゴリについて。
他所の方のブログですが、参考になるかなーと思います。
FC2ブログでカテゴリの記事一覧を表示する方法
http://weboook.blog22.fc2.com/blog-entry-12.html
記事タイトルだけを表示するという事でしたら、プラグインを編集する必要があると思います。プラグインの編集については、私も良く分かっておらず、お答え出来ません。

Facebookについて
こちらは殆どテンプレートとは関係のない話になってくると思います。
FC2ブログの機能としてFacebookとの連携というものが用意されています。
ブログ管理画面で 環境設定→ブログの設定→Facebookとの連携

あまりお力になれず、申し訳ありません。
potardot 2013.06.18 19:43 | 編集
このコメントは管理人のみ閲覧できます
dot 2013.12.16 19:45 | 編集
>13/12/16にコメント下さった方
気に入っていただき有り難うございます。大変嬉しいです。
表示できる画像の最大幅は590pxだったと思います。
(記事の白背景部分が650px、左右に30pxの余白を取ってあります。)
potardot 2013.12.18 21:09 | 編集
管理者にだけ表示を許可する
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。