入口 > テンプレ - カスタマイズ > 内部ページの余白を調節する

内部ページの余白を調節する

目次や日記、個別記事ページなどの余白を調整したいときは、以下のようにしてください。
1.各プレビューで加減したい余白の色と記号を確かめる。

目次ページ作品ページ
mokuji_20120723143829.pngsakuhin_20120723143828.png
日記ページ日記カテゴリの個別記事ページ
nikki_20120723145353.pngnikki_kobetu_20120723143828.png



2.同じ色・記号の箇所を以下で探し、テンプレスタイルシートの該当部分を書き換える。

/*** 全体の配置 ***/
 ・
 ・
/* 共通 */
html, body { height: 100%; }
body { text-align: center; }
#container { text-align: center; width: 100%; max-width: 1280px; margin: 0 auto; position: relative; padding-top: 70px /* ←A */; }
#footer { text-align: right; margin:70px 10px 0 auto; padding-bottom: 10px; }
p.fc2, p.template { display: inline; }
 ・
 ・
 ・
/*** 入口以外ページ配置 ***/
#not_index_area { width: 800px/*記事エリア幅*/; margin: 0 auto; padding: 50px /* ←B */ 20px; }
.topentry { width: 80%/*記事内容幅(640px)*/; margin: 0 auto; padding-top: 50px /* ←C */; text-align: left; }
.topentry_body { margin: 5px auto; line-height: 200%; }
.fc2_footer { padding:0!important; margin: 30px /* ←K */ 0 0 0; }
.edit { text-align: right; padding-top: 20px; }
#back, .back { text-align: center; margin: 120px /* ←F */ 0 50px 0; }
#pagelink { text-align: center; margin: 170px /* ←L */ 0 50px 0; }
#back a, #pagelink a, .back a { padding: 0 2px; }

/* 目次ページ配置 */
.topentry h3 { text-align: center; margin: 0 0 90px /* ←D */ 0; }
.mokuji .topentry_body { padding: 50px /* ←E1,E2 */ 0; }

/* 日記ページ配置 */
.nikki h2 { text-align: center; padding: 50px /* ←G1,G2 */ 0; }
.nikki h4 { text-align: center; margin: 0 0 50px /* ←H */ 0; }
.date, .pagetop { margin: 0 auto; text-align: right; }
.date { margin: 15px auto; }
.nikki .topentry { margin-bottom: 90px /* ←I */; padding-top: 90px /* ←J */; }
.morelink { padding-left: 10%; margin: 50px 0; }
.nikki .edit { position: relative; top: 10px; }

以上です。作業はテンプレの「複製」をしてから取り掛かってください。また、ひとつ変更するごとに各エリアのプレビューを確認するようにしてください。

※「 B 」をいじると多分バックリンクの下の余白も狭くなります。ご注意ください。

※説明は省略しましたが、上記色々をいじるとプラグインページの余白も似たような感じで変化するはずです。プラグイン機能をお使いになってる方はそちらも確認しつつ作業してください。

※他にも、予想外のとこが広くなったりせまくなったりすることもあるかもしれません。一通り確認したつもりですが、見落としに気付かれた方はぜひご指摘ください。また、特にここの余白を詰めたいor広げたい等ありましたらご相談ください。
2012-07-23