BLOG素材のおすそわけ。

テンプレートについてご質問をいただきましたので、ここでご回答させて頂きます。


Memories_photo_N

ご質問内容

Memories_photo_Nをお借りしていますが、このテンプレートは文字の中央寄せができないのでしょうか？
初歩的な質問で申し訳ございません><

ご回答
センタリングは、スタイルシートの【.content】の部分に

text-align:center;

を書き足すとOKです。

【“ご質問回答：【テンプレートの文字を中央寄せしたい】”の続きを読む】

申請していたFC2ブログの共有テンプレート「RE_hand_maid 」が通りました。
詳細はこちらの記事をご参照下さい。

テンプレートのダウンロードページは、

• RE_hand_maid
• RE_hand_maid_N

ですので、もし良かったらどうかよろしくお願い申し上げます。

『RE_hand_maid_N』　プレビュー / ダウンロードページ（※要ログイン）
RE_hand_maid_Nスクリーンショット

このテンプレートの主な特徴は、

1. リキッドレイアウト（幅可変デザイン）の2カラム
2. ブログ上部にメニューバーあり
3. トップページは標準のブログ形式表示
4. トップページのみに表示されるフリースペースを標準装備
5. タグクラウドを標準搭載
6. 全記事リスト（簡易サイトマップページ）へのリンクあり

となっております。

---

『RE_hand_maid』　プレビュー / ダウンロードページ（※要ログイン）
RE_hand_maidスクリーンショット

このテンプレートの主な特徴は、

1. リキッドレイアウト（幅可変デザイン）の2カラム
2. ブログ上部にメニューバーあり
3. トップページは、記事の要約と画像のサムネイルのみ表示
4. トップページのみに表示されるフリースペースを標準装備
5. タグクラウドを標準搭載
6. 全記事リスト（簡易サイトマップページ）へのリンクあり

となっております。
【“手作りっぽさがナチュラルかわいいFC2ブログ共有テンプレート「RE_hand_maid」”の続きを読む】

『Memories_photo_N』　プレビュー / ダウンロードページ（※要ログイン）
Memories_photo_Nスクリーンショット

このテンプレートの主な特徴は、

1. リキッドレイアウト（幅可変デザイン）の2カラム
2. ブログ上部にメニューバーあり
3. トップページは標準のブログ形式表示
4. トップページのみに表示されるフリースペースを標準装備
5. タグクラウドを標準搭載
6. 全記事リスト（簡易サイトマップページ）へのリンクあり

となっております。

---

『Memories_photo』　プレビュー / ダウンロードページ（※要ログイン）
Memories_photoスクリーンショット

このテンプレートの主な特徴は、

1. リキッドレイアウト（幅可変デザイン）の2カラム
2. ブログ上部にメニューバーあり
3. トップページは、記事の要約と画像のサムネイルのみ表示
4. トップページのみに表示されるフリースペースを標準装備
5. タグクラウドを標準搭載
6. 全記事リスト（簡易サイトマップページ）へのリンクあり

となっております。
【“机に散らばった手紙風のオシャレな共有テンプレート「Memories_photo」。”の続きを読む】

ご質問内容

・テンプレートのヘッダ画像を手持ちの写真を使って自作したい。

ご質問回答

ヘッダ画像は、私は写真加工ソフトを使って作っています。まったく同じものは作れませんが、ヘッダ用にご自分で作成されることは可能です。

1. まず、Windows用のフリーソフト「Shape Collage」をダウンロードして下さい。（※これはネットで配布されているソフトです。ご利用は自己責任でお願いします。私も利用しましたが、私の環境でしたら特に問題は見受けられませんでした。）
2. インストール後、以下のように画像を作成します。

↑まず、上記のリンクを開いてから画像をダウンロードして下さい。ヘッダの背景に使います。

【“【ご質問回答】テンプレート「さくらだより。」のヘッダ画像を手持ちの写真で自作したい場合の対処法。”の続きを読む】

『RE_Ladybird』　プレビュー / ダウンロードページ（※要ログイン）

【“てんとう虫のイメージの爽やかなFC2ブログ共有テンプレート「RE_Ladybird」”の続きを読む】

ご質問の内容

・テンプレートのヘッダ画像を変更したい
・トップページのフリーエリアをセンタリング（中央寄せ）したい。

テンプレートの修正方法ですが、まずヘッダは、テンプレートの管理画面から「スタイルシート編集」で

/* ヘッダー */
#head{background:url(http://blog-imgs-50.fc2.com/b/l/o/blogmaterial/head_20140107010818591.jpg)
no-repeat left bottom;width:100%;height:333px;text-align:left;margin:0 auto;padding:0}

の部分の「http://blog-imgs-50.fc2.com/b/l/o/blogmaterial/head_20140107010818591.jpg」をお好きな画像に変更すれば変えられます。
画像のサイズは【1,433px × 300px】なので、それに近いサイズに切抜きしておくといいと思います。
ヘッダ画像の切り抜きについては、フリーソフトで出来るものがありますので、調べてみてくださいね。

*
次に、フリーエリアのセンタリング（中央寄せ）ですが、まず、テンプレートのHTMLの部分の

<!--↓↓フリースペース↓↓-->
<!--index_area-->
<div class="content">
<h3>ここはトップページのみ表示されるフリーエリアです。</h3>
フリーエリアが必要ない場合、&lt;!--index_area--&gt;～&lt;!--/index_area--&gt;の表記を全て削除して下さい</div>
<hr />
<!--/index_area-->
<!--↑↑フリースペース↑↑-->

のところを、以下のように書き換えて下さい

<!--↓↓フリースペース↓↓-->
<!--index_area-->
<div id="freearea">
<h3>ここはトップページのみ表示されるフリーエリアです。</h3>

※※※ここが書き換える部分です。※※※

</div>
<hr />
<!--/index_area-->
<!--↑↑フリースペース↑↑-->

それから、テンプレートのCSSをすべて以下のCSSで上書きして下さい。

@charset UTF-8;

/* 基本 */
*{padding:0;margin:0}
p{padding:4px 0 10px}
body{height:100%;background:#ffc6e3 url(http://blog-imgs-50.fc2.com/b/l/o/blogmaterial/kabe_201401070105067d5.gif);font-size:84%;font-family:'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif}
a{color:#677b98}
a:hover{color:#788263}
a:visited{color:#826382}
hr{height:0;border-top:1px dashed #a99883;clear:both}
ul,ol{margin:0;padding:0;border:0;outline:0}
a img{border:none}
input,textarea,select{background:#fff;border:1px solid #666;color:#000;font-size:12px}
blockquote{background:#ffe4f4 url(http://blog-imgs-50.fc2.com/b/l/o/blogmaterial/title.gif) left center;border-left:6px solid #f9c;padding:10px 8px;margin:6px 0}
.right{text-align:right;padding:10px 0 0 0}



/* ヘッダー */
#head{background:url(http://blog-imgs-50.fc2.com/b/l/o/blogmaterial/head_20140107010818591.jpg) no-repeat left bottom;width:100%;height:333px;text-align:left;margin:0 auto;padding:0}
#head h1{font-size:26px;font-weight:900;padding:45px 6px 0 0;margin:0 30px}
#head h1 a:link,h1 a:visited{color:#000;text-decoration:none}
#head h1 a:hover{color:#999}
#head h2{font-size:14px;font-weight:400;padding:8px 8px 0 0;margin:0 33px}



/* メイン */
#main{min-width:800px;max-width:86%;margin:10px auto 0 auto;padding:0;background:#fff;border-radius:10px 10px 0 0;moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0}
#main h2{font-size:14px}
#inbox{width:67%;float:left;overflow:hidden;padding:6px 0 2px 12px}
#inbox img,#menu img{max-width:100%}
#inbox h2{padding:6px}
#inbox h3{padding:6px;color:#000;font-size:16px;text-align:left;background:#f9c url(http://blog-imgs-50.fc2.com/b/l/o/blogmaterial/title.gif) left center}
#inbox h3 a:link,#inbox h3 a:visited{text-decoration:none;color:#0a4b7d}
#index_area{margin:0px 10px;padding:6px}
#inbox ul,#inbox ol,#inbox li{width:100%;margin:2px 14px 2px 12px}
.content{margin:10px 0;padding:8px;line-height:160%;text-align:left}
.content h3{margin:2px 0 8px 0}
.content_date{margin:8px 0 2px 0;font-size:11px;text-decoration:none;color:#666;border-bottom:2px solid #fcf;line-height:100%}
.content_date a{text-decoration:none;color:#666}
.content ol .content ul{margin:0 0 0 30px}
.content ol li{}
.content ul li{list-style-type:square}
.content_footer{clear:both;margin:10px 0 0 0;text-align:right;font-size:80%;color:#333;width:100%}
.commentcont,#trackbackcont{margin:10px}/* コメント・トラックバック */
.commentcont h4,#trackbackcont h4{padding:10px;font-size:100%}
.commentcont p,#trackbackcont p{padding:4px}
.commentcont .content_footer,#trackbackcont .content_footer{margin:6px;padding:6px}
.commentform dl{width:100%;padding:0 0 8px}/* コメントフォーム */
.commentform dl dt{font-weight:700}
.commentform dl dd{font-size:90%;padding:0 0 6px}
.commentform dl textarea{width:80%}
#himitsu{width:auto}
#trackbackbody{padding:15px;line-height:140%}/* trackback URL 表示部分 */
#trackbackbody dt{margin:10px}
#trackbackbody dd{margin:10px;font-size:100%}
.entry_navi{text-align:center}
.topentry_img{float:right;text-align:right;color:#999;width:200px;min-height:150px;max-height:300px;margin:0 0 8px 10px;padding:10px;background:#fff;border:1px solid #666;border-radius:7px;moz-border-radius:7px;-webkit-border-radius:7px}
.u_tag{padding:0 0 0 4px}
.relate_dt{font-weight:bold;font-size:16px;padding:20px 0 1px 0;border-bottom:1px dotted #ccc}



/* サイドバー */
#menu{width:30%;float:right;overflow:hidden;padding:12px 6px 2px 6px;margin:4px 0;text-align:left}/* メニュー表示部分 */
#menu h3{padding:6px;margin:10px 0;color:#000;font-size:16px;text-align:left;background:#f9c url(http://blog-imgs-50.fc2.com/b/l/o/blogmaterial/title.gif) left center;width:100%}
#menu p{font-size:12px}
#menu ul{padding:6px 4px 4px 20px;text-align:left}
#menu ul li{font-size:12px;padding:4px;margin:2px 0 0 8px;line-height:160%;text-align:left;list-style-image:url(http://blog-imgs-40.fc2.com/b/l/o/blogmaterial/write.gif)}
#menu ul li a,#left ul li a:link,#left ul li a:visited{text-decoration:none}
#menu ul li a:hover,#left ul li a:active{text-decoration:underline}
#menu form{padding:8px;text-align:left}/* メニューのフォーム */



/* カレンダー */
table #calendar{font-size:10px;margin:8px}
#calendar caption{margin:8px auto}
#calendar th{font-size:10px;font-weight:400;text-align:center}
#calendar td{font-size:10px;width:14%;text-align:center;padding:10px;background:#fff}
#calendar td a{display:block;font-weight:700}
#calendar td a:link,#calendar td a:visited,#calendar td a:hover,#calendar td a:active{text-decoration:none}
table.calender{width:96%;font-size:10px;margin:10px}
.calender caption{margin:8px auto}
.calender th{font-size:10px;font-weight:400;text-align:center}
.calender td{font-size:10px;width:14%;text-align:center;padding:6px 0;background:#ffe1e4}
.calender td a{display:block;font-weight:700;text-align:center}
.calender td a:link,.calender td a:visited,.calender td a:hover,.calender td a:active{text-decoration:none}
.calender td a:link{color:#f6c}
.calender td a:visited{color:#96c}
.calender td a:hover,.calender td a:active{color:#c93}
th#sun{color:#f6c}
th#sat{color:#6cf}

#searchbox{width:165px;margin:0 0 3px}/* 検索フォーム */
.nav{margin:10px 0 20px;text-align:center}/* ページのナビゲーション */
.nav a img{border:none}



/* フッター */
#footer{clear:both;color:#fff;text-align:center;font-size:11px;min-width:800px;max-width:100%;height:50px;padding:6px 0;margin:0;background:#933}
#footer a{text-decoration:none;color:#fcc}



/* その他 */
img.emoji{vertical-align:middle;border:0}
.ads{padding-left:16px}
.fc2_footer{text-align:right;padding-top:16px}
.tagword{text-decoration:none;color:#000}

.baton_title{font-weight:700;padding:6px;margin:30px 0;border:1px dotted #666}/* バトンのタイトル部分 */
.blog_baton{}/* バトンのタイトル以外の全体 */
.baton_q{border:1px dotted #ccc;padding:1px 0 2px 3px}/* 質問部分 */
.q_number{font-weight:700;color:#ac204e;margin:0 10px 0 0}/* 質問の番号 （Q1）*/
.baton_a{margin:10px 0 20px 35px}/* 回答の部分 */
.a_number{font-weight:700;color:#659cbf;margin:0 10px 0 0}/* 回答の番号 （A1） */

#backtop{padding:10px;background:#fff;position:fixed;right:0;bottom:0;border-radius:7px 0 0 0;moz-border-radius:7px 0 0 0;-webkit-border-radius:7px 0 0 0;opacity:0.7}

#archives{paddng:16px;margin:16px}
#archives h3{margin:0 0 14px 0}

.fc2twtr dd{background:#f2f2f2;padding:6px;margin:4px 0;border-radius:7px;moz-border-radius:7px;-webkit-border-radius:7px}



/* タグクラウド */
.tagcloud{font-size:14px;padding:6px;margin:6px}
.tagcloud a{text-decoration:none}
.tcmax a{font-size:180%}
.tc14 a,.tc13 a,.tc12 a,.tc11 a,.tc10 a{font-size:160%;font-weight:900}
.tc9 a,.tc8 a,.tc7 a,.tc6 a,.tc5 a{font-size:140%;font-weight:900}
.tc4 a,.tc3 a{font-size:120%}
.tc2 a,.tc1 a{font-size:90%}
.taglink{padding:4px 4px 4px 0}



/* ヘッダ下メニュー */
#cssmenu{width:100%;padding:0;margin:auto;background:#fff;position:fixed;top:0;z-index:9999}
#cssmenu ul{height:35px;list-style:none;margin:0;padding:0}
#cssmenu li{float:left;padding:0}
#cssmenu li a{display:block;font-weight:400;line-height:35px;text-align:center;text-decoration:none;margin:0;padding:0 25px}
#cssmenu li > a:hover,#cssmenu ul li:hover > a{background:#fcc;color:#000;text-decoration:none}
#cssmenu li ul{background:#fff6f7;display:none;height:auto;border:0;position:absolute;min-width:250px;z-index:200;margin:0;padding:0}
#cssmenu li:hover ul{display:block}
#cssmenu li li{display:block;float:none;min-width:250px;margin:0;padding:0}
#cssmenu li:hover li a{background:none}
#cssmenu li ul a{display:block;height:35px;font-size:12px;text-align:left;margin:0;padding:0 10px 0 15px}
#cssmenu li ul a:hover,#cssmenu li ul li:hover > a{background:#fcc;color:#000;text-decoration:none}
#cssmenu p{clear:left}
#cssmenu > ul > li > a,#cssmenu ul ul a{color:#000}

#freearea{margin:10px 0;padding:8px;line-height:160%;text-align:center}

もとのスタイルシートを全部真っ白に削除してから、上のスタイルシートをコピペでOKです。コレで、フリーエリアはセンタリングされるはずです。

もし出来なかった場合、またご連絡くだされば確認しますので、よろしくお願い申し上げます。