WEB漫画マンガ/絵本専用Comicテンプレート：（表紙・ヘッダー等の）画像を変更する

★ （表紙・ヘッダー等の）画像を変更する

大事なお知らせ FC2ブログ非公開変数の領域変更により、一部ページナビが表示されない等テンプレートに不具合が出ております。ユーザーの皆さまにはご迷惑をおかけして恐縮ですが、 2012.11.10.以前にDLしたテンプレートをご利用の場合は、一旦テンプレートを削除、もしくは名前を変更した上で、再DLして御利用くださいますようお願い申し上げます。詳しくは

不具合解消のための再DLのお願い

Comicテンプレートの背景画像を変更してご利用の場合は、ご自作の画像に限り、ご自由に変更していただいてOKですが、以下の点だけはご注意ください。

著作権表示のあるフッター部分のHTMLは削除や追加・フォントの大きさの変更など一切の改変禁止。
背景画像や背景色を変更した際は、変更後のフッター部分の文字色・リンク色が背景色と同色、酷似色にならないようにご注意ください。

誤解を招くような記述表現の禁止
画像を変更し様変わりしたテンプレートは、一見では管理人作のComicテンプレートであるとはわかりません。テンプレートの出自やカスタマイズに言及した記事を書く場合は、記事をご覧になった方が、ブログ主の自作テンプレだと誤解しかねない紛らわしい表現は避け、Comicテンプレートの名前やリンクを明記した上で、ご自身がカスタマイズなさった具体的な個所と内容を明確にしてください。

×「FC2ブログの共有テンプレートを、ブログ主が独自にカスタマイズした」
○「ブログ漫画専用Comicテンプレートの背景画像をブログ主の自作画像に変更した」

ご自作以外の画像に変更する事は原則禁止ですが、どうしてもという場合は
管理人の課した条件を順守した場合に限り許可します。
詳しくは

コチラをご覧ください。。

カスタマイズ

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

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

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

背景画像を設定している個所（ボックス）は以下の通りです。

Comic-Aタイプの場合

/*表紙ページトップ*/

#index .main_block{
background-image : url("http://blog-imgs-49.fc2.com/c/o/m/comictemplate/ALICE37Az.png");
background-repeat: no-repeat;height:550px;
background-position: right bottom;}

/*(3カラム版)ページエリア（通常ブログ画面）ヘッダー*/

#page .layout_head{
height:200px; text-align : left ;
padding:20px 20px 0px 20px;background-position: right top;
background-image : url("http://blog-imgs-49.fc2.com/c/o/m/comictemplate/ALICE25A45.png");
background-repeat: no-repeat;background-color:#ffffff;
background-position: right top;position: relative;
}

/*検索・アーカイブページヘッダー*/

#search .layout_head,#date .layout_head {
height:170px; text-align : left ;
background-position: right bottom;
background-image : url("http://blog-imgs-49.fc2.com/c/o/m/comictemplate/s5ALICE38A.jpg");
background-repeat: no-repeat;
background-position: 90% 50%;
}

/*タグエリア（Comicなど）ページヘッダー*/

#tag .layout_head{
padding:0;min-height:120px;
background-image : url("http://blog-imgs-49.fc2.com/c/o/m/comictemplate/s15p160.jpg");
background-repeat: no-repeat;
background-position: 0% 100%;}

/*全記事一覧ページヘッダー*/

#titlelist .layout_head{
padding:0;min-height:120px;
background-image : url("http://blog-imgs-49.fc2.com/c/o/m/comictemplate/ss-ALICE23A160.jpg");
background-repeat: no-repeat;text-align : left ;
background-position: 100% 100%;}

/*通常ブログ画面・検索・アーカイブページ右カラム*/

#page .main_block,#search .main_block,#date .main_block{
background-position: right bottom;
background-image : url("http://blog-imgs-49.fc2.com/c/o/m/comictemplate/ALICE300.gif");
background-repeat: no-repeat;
}

/*通常ブログ画面・検索・アーカイブページ左カラム*/

#page .container,#search .container,#date .container{
width : 940px;background-color:#f0f0f0;background-position: left bottom;
background-image : url("http://blog-imgs-49.fc2.com/c/o/m/comictemplate/ALICE2300.gif");
background-repeat: no-repeat;
}

Comic-Bタイプの場合(トップページ)

/*表紙ページ*/

#index .main{margin-left : 220px ;text-align : center;
background-image : url("http://blog-imgs-49.fc2.com/c/o/m/comictemplate/ALICE37Az.png");
background-repeat: no-repeat;background-position: right bottom;
background-attachment: fixed;background-color:#fff;}

背景画像を変更したいボックスの　画像ファイルURL　を変更し
【更新】をクリック

background-image以外のプロパティの値も必要に応じて変更

プロパティの意味background-color: ***; ページの背景色を指定する
background-image: url(***); ページの背景に画像を使う
background-repeat: ***; 背景画像の並び方を指定する
background-position: ***; 背景画像の表示位置を指定する
background-attachment: fixed; 背景画像をスクロールさせない

▼変更方法の詳細は以下のサイト様の解説記事などをご参照ください。

初心者でもできる簡単FC2ブログの作り方
「背景の画像を変えたい！」
TAG index　
「背景画像の表示位置を指定する」