「テンプレートマニュアル」
目次ページ
特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
2010.8.5.Novelテンプレートの利用規約を改定し、衣替え以外の背景画像の変更は原則不可とさせていただきました。以下にご紹介したカスタマイズで、画像を変更してご利用の場合は、管理人の課した条件を満たすことが必要です。
詳しくは 背景画像を変更してのご利用をご希望の場合
2010.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と名前を変えてカスタマイズした例です。
普通の目次ページの背景画像は海ですが サンプル
カテゴリ番号1の「雪の女王」の目次ページの背景は雪景色 サンプル
カテゴリ番号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> の間には半角スペースを入れるのをお忘れなく!
次に、[スタイルシートの編集]部分をカスタマイズします。
以下はカテゴリ番号1の「雪の女王」の目次ページとカテゴリ番号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】⇒画面が一瞬真っ暗になります⇒変更した解析度の画面⇒ブログを確認
- 関連記事
-
- 特定のカテゴリの目次ページのカスタマイズ(7)【novel-PF・novel-R タイプ以外】特定のカテゴリの目次の背景画像を変更する
- 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
- 特定のカテゴリの目次ページのカスタマイズ (5)【novel-PF タイプ】背景画像を変更する
┣携帯用Novelテンプレート 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣表紙ページ 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣Novel List 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣目次ページ 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣小説本文(個別記事)ページ 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣イラストリスト 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣全記事一覧ページ(All Titlelist 総目次) 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣その他・共通ページ 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣携帯用テンプレートのカスタマイズ 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣テンプレート別のカスタマイズ 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣サイト内配布テンプレート 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣テンプレートの衣替え 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┗裏技カスタマイズ 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣novel-tempタイプ 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣novel-Sタイプ 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣novel-Rタイプ 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣novel-Gタイプ 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣novel-Jタイプ 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣novel-Cタイプ 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣素材屋風テンプレート 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣疑似フレームテンプレート 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣novel-PF2タイプ 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣夢小説用テンプレート 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣イラストリスト付きテンプレート 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣携帯用テンプレート 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┗一般ブログ用テンプレート 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣不具合の修正 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣その他お知らせなど 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┗管理人のおススメ 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣雪の女王 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣銀河鉄道の夜 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┣坊っちゃん 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
┗幸福の王子(夢小説サンプル) 特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する
~ Trackback ~
トラックバックURL
⇒
⇒この記事にトラックバックする(FC2ブログユーザー)
~ Comment ~
お返事はどう致しますか?投稿なさる前に コチラ をご確認ください