スポンサー広告

元のデザインテンプレートで記事をご覧になる場合は

スポンサーサイト

この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
 ←novel-S-spring 春のテンプレート →衣替え(スタイルシート変更)の手順
 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


総もくじ  3kaku_s_L.png テンプレートマニュアル共有テンプレート画像のためのカテゴリ
テンプレートについて 3kaku_s_L.png スポンサーサイト
携帯用Novelテンプレート 3kaku_s_L.png スポンサーサイト
表紙ページ 3kaku_s_L.png スポンサーサイト
Novel List 3kaku_s_L.png スポンサーサイト
目次ページ 3kaku_s_L.png スポンサーサイト
小説本文(個別記事)ページ 3kaku_s_L.png スポンサーサイト
イラストリスト 3kaku_s_L.png スポンサーサイト
全記事一覧ページ(All Titlelist 総目次) 3kaku_s_L.png スポンサーサイト
その他・共通ページ 3kaku_s_L.png スポンサーサイト
携帯用テンプレートのカスタマイズ 3kaku_s_L.png スポンサーサイト
テンプレート別のカスタマイズ 3kaku_s_L.png スポンサーサイト
サイト内配布テンプレート 3kaku_s_L.png スポンサーサイト
テンプレートの衣替え 3kaku_s_L.png スポンサーサイト
裏技カスタマイズ 3kaku_s_L.png スポンサーサイト
総もくじ  3kaku_s_L.png テンプレート一覧共有テンプレート画像のためのカテゴリ
novel-templateタイプ 3kaku_s_L.png スポンサーサイト
novel-tempタイプ 3kaku_s_L.png スポンサーサイト
novel-Sタイプ 3kaku_s_L.png スポンサーサイト
novel-Rタイプ 3kaku_s_L.png スポンサーサイト
novel-Gタイプ 3kaku_s_L.png スポンサーサイト
novel-Jタイプ 3kaku_s_L.png スポンサーサイト
novel-Cタイプ 3kaku_s_L.png スポンサーサイト
素材屋風テンプレート 3kaku_s_L.png スポンサーサイト
疑似フレームテンプレート 3kaku_s_L.png スポンサーサイト
novel-PF2タイプ 3kaku_s_L.png スポンサーサイト
夢小説用テンプレート 3kaku_s_L.png スポンサーサイト
イラストリスト付きテンプレート 3kaku_s_L.png スポンサーサイト
携帯用テンプレート 3kaku_s_L.png スポンサーサイト
一般ブログ用テンプレート 3kaku_s_L.png スポンサーサイト
総もくじ  3kaku_s_L.png テンプレート情報共有テンプレート画像のためのカテゴリ
バージョンアップや改訂内容 3kaku_s_L.png スポンサーサイト
不具合の修正 3kaku_s_L.png スポンサーサイト
その他お知らせなど 3kaku_s_L.png スポンサーサイト
管理人のおススメ 3kaku_s_L.png スポンサーサイト
もくじ  3kaku_s_L.png 未分類
総もくじ  3kaku_s_L.png 小説サンプル(親カテゴリ)共有テンプレート画像のためのカテゴリ
風立ちぬ 3kaku_s_L.png スポンサーサイト
雪の女王 3kaku_s_L.png スポンサーサイト
銀河鉄道の夜 3kaku_s_L.png スポンサーサイト
坊っちゃん 3kaku_s_L.png スポンサーサイト
幸福の王子(夢小説サンプル)  3kaku_s_L.png スポンサーサイト
ランキングに参加中
click 素材専門検索サイトsozai-R にほんブログ村 ブログブログ ブログテンプレートへ 0574 Web Site RankingWebサイト作成支援系nnr.gif
*Edit
   
 

「テンプレートマニュアル」
小説本文(個別記事)ページ

元のデザインテンプレートで記事をご覧になる場合は

個別記事の表示をコンパクト版・ワイド版に変更する

 Temlplate Image : カスタマイズの難易度1 
関連カスタマイズ :カスタマイズの難易度1 
この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
 ←novel-S-spring 春のテンプレート →衣替え(スタイルシート変更)の手順
 
カスタマイズの難易度1(非表示のタグを表示させるだけでOK) カスタマイズの難易度1

今まで、novel-Sタイプやnovel-Rタイプなどは、共有テンプレートとして公開されているものとは別に、個別記事ページのレイアウトだけを変更したテンプレート(コンパクト版など)をサイト内配布しておりました。


HP風サイトへの擬態を究極の目的としている以上、新たに有用な方法をみつければ、その度に追加変更してまいりますので、当然、改訂の回数も多くなります。新しい機能は、家電の新製品と同じで、ある程度使ってみないとわからない、気づかない不具合も多く、その不具合を解消するべくまた新たな改訂が必要となります。


上述したとおり、改訂が多いNovelテンプレートでありますが、その作業は最新の共有テンプレートを優先させるため、サイト内配布テンプレートのメンテナンスはどうしても後回しになり、滞りがちでありました。

今回、タイプ別にテンプレートのHTMLを統一したのを機に、サイト内配布を終了し、公開中の共有テンプレートのスタイルシートに直接、レイアウトを変更できる内容を追加致しました。

カスタマイズはいたって簡単、スタイルシートの中から不要な二行を削除するだけです。



カスタマイズ


[菅理画面]⇒[環境設定]⇒【テンプレートの設定】をクリックして
テンプレートの管理]ページを開く


PCテンプレート [ テンプレート名 ] 適用中
[ テンプレート名 ] のテンプレート名変更
テンプレート名 のHTML編集
テンプレート名 のスタイルシート編集         こんなふうに上から順番に並んでいます。

スタイルシート編集]部分をカスタマイズします。

個別記事ページのレイアウトを変更できるテンプレートのスタイルシートの冒頭には以下のように記述されています。

○○タイプ(テンプレートのタイプ名)であればスタイルシートを交換することで
簡単に衣替えできますが、衣替えをする場合は素材提供サイト様の著作権表示がある
HTMLの最後にあるコピーライト部分も必ず変更してください。
また、以下のスタイルシートの中からレイアウト設定部分の(A)と(B)の行を削除すると
個別記事ページの本文スペースをコンパクト表示に変更できます。



スクロールして以下の部分を探します。

/* =============================================
以下は個別記事ページの本文スペースを他ページと
同じ幅にする場合(コンパクト版)の設定
コンパクト版にする場合は(A)と(B)の行を削除
============================================= */

/* --- (A)コンパクト版にする場合はこの行と(B)の行を削除

#permanent {
margin : 0; padding : 0;
background-image : url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/mum-bg.gif");
background-attachment: fixed;background-repeat : repeat ;text-align : center;
}

#permanent .container {
margin : 0 auto ; background-color:transparent;
width : 90%;background-image : none;
float : none;
}
.p_main-body {
margin : 20px auto 0 auto ;
width : 650px;background-color:#ffffff;
border :3px dotted #999999;
}

(B) ---コンパクト版にする場合はこの行と(A)の行を削除 */



上はnovel-S-whiteの場合ですが、青字の部分はテンプレートによって違いがあります。

赤字の部分を削除して【 更新 】 をクリック


固定幅の中央表示から可変性の全面表示、全面表示から中央表示、カスタマイズしてそれぞれ表示スタイルを変更させるとページの印象が一変します。ブログや作品に合わせてお好みの方をお選びください。

また、カスタマイズ次第で特定のカテゴリの個別記事のみ別スタイルで表示することもできます。
詳しくは コチラ  「個別記事ページを二種類のスタイルで表示する」
関連記事
スポンサーサイト
総もくじ 3kaku_s_L.png テンプレート情報共有テンプレート画像のためのカテゴリ
総もくじ 3kaku_s_L.png 小説サンプル(親カテゴリ)共有テンプレート画像のためのカテゴリ
総もくじ 3kaku_s_L.png 画像のためのカテゴリ共有テンプレート画像のためのカテゴリ
総もくじ  3kaku_s_L.png テンプレートマニュアル共有テンプレート画像のためのカテゴリ
テンプレートについて 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
携帯用Novelテンプレート 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
表紙ページ 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
Novel List 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
目次ページ 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
小説本文(個別記事)ページ 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
イラストリスト 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
全記事一覧ページ(All Titlelist 総目次) 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
その他・共通ページ 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
携帯用テンプレートのカスタマイズ 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
テンプレート別のカスタマイズ 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
サイト内配布テンプレート 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
テンプレートの衣替え 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
裏技カスタマイズ 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
総もくじ  3kaku_s_L.png テンプレート一覧共有テンプレート画像のためのカテゴリ
novel-templateタイプ 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
novel-tempタイプ 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
novel-Sタイプ 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
novel-Rタイプ 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
novel-Gタイプ 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
novel-Jタイプ 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
novel-Cタイプ 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
素材屋風テンプレート 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
疑似フレームテンプレート 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
novel-PF2タイプ 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
夢小説用テンプレート 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
イラストリスト付きテンプレート 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
携帯用テンプレート 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
一般ブログ用テンプレート 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
総もくじ  3kaku_s_L.png テンプレート情報共有テンプレート画像のためのカテゴリ
バージョンアップや改訂内容 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
不具合の修正 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
その他お知らせなど 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
管理人のおススメ 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
もくじ  3kaku_s_L.png 未分類
総もくじ  3kaku_s_L.png 小説サンプル(親カテゴリ)共有テンプレート画像のためのカテゴリ
風立ちぬ 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
雪の女王 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
銀河鉄道の夜 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
坊っちゃん 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
幸福の王子(夢小説サンプル)  3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
総もくじ  3kaku_s_L.png 画像のためのカテゴリ共有テンプレート画像のためのカテゴリ
人物イラストのためのカテゴリ 3kaku_s_L.png 個別記事の表示をコンパクト版・ワイド版に変更する
ランキングに参加中
click 素材専門検索サイトsozai-R にほんブログ村 ブログブログ ブログテンプレートへ 0574 Web Site RankingWebサイト作成支援系nnr.gif
   

~ Comment ~

NoTitle 

ここでの記事のように、個別本文記事のページを、記事を真ん中で不可変(WIDE880PXくらい?)で、左右に背景画像を並べるには、どの部分のHTMLを、どのように変更したらいいのでしょうか?

よろしくお願いします。

Re: NoTitle 

DLとコメントありがとうございます。

ブログアドレスの明記がなく、現在ご利用中のテンプレートがわからないので
詳しいことは解りかねるのですが、PFタイプ以外のテンプレートであれば、
スタイルシート冒頭に、コンパクト版への変更方法が記載してあるはずです。

尚、拙作テンプレはこの記事にあるコンパクト版・ワイド版への変更と、拙作同士の衣替以外については、
原則、画像の変更を禁止とさせていただいております。

詳しくは利用規約をご確認ください。
http://noveltemplate.blog26.fc2.com/blog-entry-53.html

コメントの際の諸注意も、今一度ご確認くださいますようお願いいたします。
http://noveltemplate.blog26.fc2.com/blog-entry-140.html#rescoments

NoTitle 

ワイド版への変更方法が解りません。
「以下は個別記事ページの本文スペースを他ページと
同じ幅にする場合(コンパクト版)の設定
コンパクト版にする場合は(A)と(B)の行を削除」の項目も有りません。どうぞ宜しくお願い致します。

To:風蘭様 

> ワイド版への変更方法が解りません。
> 「以下は個別記事ページの本文スペースを他ページと
> 同じ幅にする場合(コンパクト版)の設定
> コンパクト版にする場合は(A)と(B)の行を削除」の項目も有りません。どうぞ宜しくお願い致します。
DLとコメントありがとうございます。
説明が足りなくて申しわけありません。
novel-Sf-voyage以外の羊皮紙バージョンのテンプレートは、元々ワイド版へは変更出来ない様になっています。
ワイド表示の場合は羊皮紙背景にはできないためですが、それでもよろしければ、
以下を、スタイルシートの末尾に追加していただけば、無地背景にはなりますがワイド版に変更できます。


/* =============================================
以下は個別記事ページの本文スペースの背景を消しワイド表示に変更する場合の設定
-- DL時はカテゴリ番号[0](初期設定では未分類カテゴリ)のみ --
未分類以外のカテゴリも全て背景を消しワイド表示にする場合は(A)と(B)の行を削除
============================================= */

/* --- (A)背景を消しワイド版にする場合はこの行と(B)の行を削除

#permanent .main{
margin : 0 ;text-align : right ;
background-image : none!important;background-color:#f1eae2!important;}

#permanent .main2{margin-left:200px;background-color:#f1eae2;}

#permanent .container,#permanent .layout_footer {
margin :0 auto ; padding : 0 10px ;
width : 80%;max-width:1024px;_max-width:1024px;background-image : none!important;}

#permanent .layout_head{background-image : none;min-height : 1px; _height : auto;}

#permanent .p_entry-body{width :auto;max-width : none;margin-top:0;}

.p_main-body {
margin : 0px auto ;width :auto;max-width : none;
background-image : none;text-align : left ; border:none;}

#permanent .entry_text2 {width :auto;max-width:none;}

#permanent .cat-navi { width:95%;max-width : 570px;_width : 570px;}

#permanent .copyright{padding-bottom:30px;padding-top:10px;}

#permanent ul.relate_ul li {color : #f1eae2!important;}

(B) ---ワイド版にする場合はこの行と(A)の行を削除 */

/* =============================================
以下はカテゴリ番号[0]の表示設定(初期設定では未分類カテゴリ)
.en_cat0, .en2_cat0 の 0 を特定のカテゴリ番号に変更すると
そのカテゴリの記事ページのみ本文スペースの背景を消しワイド表示に変更できます。
(0は11ヶ所あります)0を親カテゴリ番号にすると子カテゴリ全てを同時に変更できます。
============================================= */

#permanent .en_cat0{
margin : 0 ;text-align : right ;
background-image : none!important;background-color:#f1eae2!important;}

#permanent .en2_cat0{margin-left:200px;background-color:#f1eae2;}

#permanent .en_cat0 .container,#permanent .en_cat0 .layout_footer {
margin :0 auto ; padding : 0 10px ;
width : 80%;max-width:1024px;_max-width:1024px;background-image : none!important;}

#permanent .en_cat0 .layout_head{background-image : none;min-height : 1px; _height : auto;}

#permanent .en_cat0 .p_entry-body{width :auto;max-width : none;margin-top:0;}

.en_cat0 .p_main-body {
margin : 0px auto ;width :auto;max-width : none;
background-image : none;text-align : left ; border:none;}

#permanent .en_cat0 .entry_text2 {width :auto;max-width:none;}

#permanent .en_cat0 .cat-navi { width:95%;max-width : 570px;_width : 570px;}

#permanent .en_cat0 .copyright{padding-bottom:30px;padding-top:10px;}

#permanent .en_cat0 ul.relate_ul li {color : #f1eae2!important;}

/* =============変更設定ここまで==================== */
  • #1484 Novelテンプレート管理人 
  • URL 
  • 2015.07/21 08:31 
  •  ▲EntryTop 
カスタマイズに関するご質問は、他の方がその情報を共有・検索しやすくするため、最新記事や個々のテンプレートの説明記事ではなく、できるだけマニュアル内の関連記事にお願い致します。
お返事はどう致しますか?投稿なさる前に  コチラ をご確認ください
管理者のみ表示。 | 非公開コメント投稿可能です。

~ Trackback ~

トラックバックURL


この記事にトラックバックする(FC2ブログユーザー)

  ↑記事冒頭へ  
←novel-S-spring 春のテンプレート    →衣替え(スタイルシート変更)の手順

名前変換フォーム

Script by
ブログで夢小説!ユメミル?
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。