fc2ブログ
 

「テンプレートマニュアル」
目次ページ

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

特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する

 Temlplate Image : カスタマイズの難易度5 
関連カスタマイズ :カスタマイズの難易度5 
この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
 ←特定のカテゴリの目次ページのカスタマイズ (5)【novel-PF タイプ】背景画像を変更する →novel-PF-PlainA1
 
hosi5.gifカスタマイズの難易度5

osirase-ani02.gif2010.8.5.Novelテンプレートの利用規約を改定し、衣替え以外の背景画像の変更は原則不可とさせていただきました。以下にご紹介したカスタマイズで、画像を変更してご利用の場合は、管理人の課した条件を満たすことが必要です。
詳しくは コチラ背景画像を変更してのご利用をご希望の場合 


osirase-ani02.gif2010.7.1.追記
改訂版のテンプレートのHTMLには、予め特定カテゴリ背景変更のためのカスタマイズが施されていますので、背景の変更が以前より簡単になりました。
詳しくは 【改定版 簡単カスタマイズ】特定のカテゴリの目次の背景を変更する



以下は改訂前の記事ですので折りたたんであります。
一応読んでみる方はここをクリックしてください▼

カスタマイズ


特定のカテゴリの目次ページのカスタマイズ

1)特定のカテゴリの目次に説明などを追加
2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
3)アルバムのように画像を一覧表示する
4)カタログのように飾り枠付きの画像と説明文を添えて表示する
5)【novel-PF タイプ】特定のカテゴリの目次の背景画像を変更する
6)【novel-R タイプ】特定のカテゴリの目次の背景画像を変更する
7)【novel-PF・novel-R タイプ以外のテンプレート】特定のカテゴリの目次の背景画像を変更する


テンプレート別に、特定のカテゴリの背景を変更するカスタマイズをご紹介します。

【novel-R タイプ】 の場合



まずはどういう風になるのかサンプルの目次をごらんください。
novel-R-Paradiseをコピーしたテンプレートをnovel-R-Sampleと名前を変えてカスタマイズした例です。
普通の目次ページの背景画像は海ですが サンプル
カテゴリ番号の「雪の女王」の目次ページの背景は雪景色 「雪の女王」の目次ページサンプル
カテゴリ番号2の「銀河鉄道の夜」の目次ページの背景は銀河 「銀河鉄道の夜」の目次ページサンプル

ここでは、どうすればカテゴリ別に目次ページの背景を設定できるかについては解説させていただきますが、表示させる背景画像の位置・並べ方など具体的な表示設定の説明は省略させていただきます。実際に背景画像を変更する場合は、ある程度のスタイルシートの知識が必要になりますが、それらについては、HP作成支援サイトさま、ハウツー系サイトさまなどをご参考にご自力でお願いいたします。個人的なデザイン変更のためのサポートは出来かねますので、それらに関するご質問・お問い合わせはご遠慮ください。

ご参考までに   TAG<Index>さまの解説ページ
           背景画像の表示位置を指定する
           背景画像の並び方を指定する



カテゴリの番号の確認


テンプレートのカスタマイズに取り掛かる前に、表示を変更したいカテゴリのカテゴリ番号を確認しておきます。カテゴリ番号は[カテゴリの編集]画面のカテゴリ一覧リストの一番左、# をクリックすると表示される番号がそれですが、目次ページのアドレスからも確認できます。
http://noveltemplate.blog26.fc2.com/blog-category-〇〇.html
〇〇がそのカテゴリのカテゴリ番号です。
☆ カスタマイズの前にはコピーをとりましょう!コピーのとり方は こちら  

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


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

最初に、[HTML編集]部分をカスタマイズします。


HTMLをスクロールしていき、赤字の部分を追加します。

<body id="<!--index_area-->index<!--/index_area--><!--permanent_area-->permanent<!--/permanent_area--><!--date_area-->date<!--/date_area--><!--category_area-->category<!--/category_area--><!--search_area-->search<!--/search_area-->
<!--tag_area-->tag<!--/tag_area-->
<!--edit_area-->edit<!--/edit_area--><!--titlelist_area-->titlelist<!--/titlelist_area-->
<!--not_index_area--><!--not_permanent_area--><!--not_date_area--><!--not_category_area--><!--not_search_area--><!--not_tag_area--><!--not_edit_area-->
<!--not_titlelist_area-->page<!--/not_titlelist_area--><!--/not_edit_area--><!--/not_tag_area--><!--/not_search_area-->
<!--/not_category_area--><!--/not_date_area--><!--/not_permanent_area--><!--/not_index_area-->">

<div class="layout_body cat_bg<%cno>">


<!-- アクセス解析タグはここから -->

<!-- アクセス解析タグはここまで -->


layout_body と cat_bg<%cno> の間には半角スペースを入れるのをお忘れなく!

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

以下はカテゴリ番号の「雪の女王」の目次ページとカテゴリ番号2の「銀河鉄道の夜」の目次ページを、それぞれ別のデザインで表示させる例です。

スタイルシートに以下の内容を追加します。どこでもよいのですが、わかりやすいように、スタイルシートの最後部分に一行空けて追加するとよいでしょう。青の大文字の数字は背景を設定するカテゴリ番号をいれ、赤字の部分に背景とする画像のアドレスを入れます。


#category .cat_bg1 {
margin : 0 ; padding : 0 ;
background-color : transparent ;
background-image : url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/f-long2-ws.jpg");
background-attachment : fixed ; background-repeat : no-repeat ;
background-position : left bottom ;
}

#category .cat_bg2 {
margin : 0 ; padding : 0 ;
background-image : url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/s33-milkyway01.jpg");
background-color:#000000 ;
background-repeat: no-repeat ; background-position : 10% 0% ;
background-attachment: fixed ;
}


背景画像はその並び方・位置などによって記述の仕方は違いますので、詳しくはHP作成支援サイトさまなどでご確認ください。

novel-R タイプのテンプレートは右側のテキスト部分は白背景になっています。このテキスト部分の背景を変更する場合には、カテゴリエリアに含まれる全ての見出しやブロックに第二のクラス名をつけ、それぞれ設定を追加する必要があり、非常に面倒です。初心者の方でそこまで試みる方はそうそういらっしゃらないと思いますので説明は省かせていただきます。もしも、トライなさる場合は、変更箇所は多いですが、クラス名のつけ方やその設定の方法は、前ページ「カテゴリ別に目次をカスタマイズ ⑤」と同じですので、ご自力でお願いいたします。

更新 】 をクリックする。


注意 ご注意!
背景に設定する画像が、タイル(敷き詰め)や部分固定ではなく、大きな一枚画像を用いる場合は、解析度の違いによる表示のずれにご注意ください。ご自分のパソコンでは問題なく表示されているように見えても、解析度の違う画面では、画像の位置が著しくずれて表示されている場合が多々あります。一枚画像を背景に使われる場合は、解析度の違いによる表示を以下の方法でご確認なさることをおススメします。
窓を全て閉じ、何もない場所にカーソルをおいて右クリック⇒【プロバティ】⇒【設定】⇒サイズ変更⇒【OK】⇒画面が一瞬真っ暗になります⇒変更した解析度の画面⇒ブログを確認





関連記事
スポンサーサイト



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

~ Comment ~

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

~ Trackback ~

トラックバックURL


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

  ↑記事冒頭へ  
←特定のカテゴリの目次ページのカスタマイズ (5)【novel-PF タイプ】背景画像を変更する    →novel-PF-PlainA1

名前変換フォーム

Script by
ブログで夢小説!ユメミル?