School Original Customize Sample

追加CSS
/* ページ全体位置調整 --------------------------------------------------------------------- */ body { margin-top:409px ; margin-left:40px ; background-color: #f1f1f1; } /* ページサイズ調整 --------------------------------------------------------------------- */ .wide_5 { width:712px; } .wide_7 { width:710px; } #content { margin:0 5px; } #content .wide_7 { width:700px; } .wide_77 { width:100%; } /* 紙部分の背景色を透明化 --------------------------------------------------------------------- */ .textbgcolor { background-color:transparent; } /* 画像のborderを一括非表示 --------------------------------------------------------------------- */ img {border:0;} /* 背景の紙の画像 --------------------------------------------------------------------- */ /* 基本の赤い紙 --------------------------------------------------------------------- */ #content { background:url('page_inside/paper_red.gifの相対パス') repeat-y; } /* リンクページ用 黒い紙 --------------------------------------------------------------------- */ #peach1 #content { background:url('page_inside/paper_black.gifの相対パス') repeat-y; } /* ニュース/自己紹介/メニュー(フリーレイアウト１)用 白い紙 --------------------------------------------------------------------- */ #apple1 #content, #pineapple1 #content, #grape1 #content { background:url('page_inside/paper_white.gifの相対パス') repeat-y; } /* 背景の紙の左右にシャドウ --------------------------------------------------------------------- */ #wrapcontent { width:100%; background:url('page_inside/paper_shadow.gifの相対パス') repeat-y; } /* メニューに戻るボタン --------------------------------------------------------------------- */ /* 基本の黒文字 --------------------------------------------------------------------- */ .backtomenu { width:13px; height:120px; background:url('back_to_menu/btm_white.gifの相対パス') no-repeat; } /* 白文字フチ黒 --------------------------------------------------------------------- */ #muscat2 .backtomenu, #muscat2b .backtomenu, #muscat2c .backtomenu, #muscat3 .backtomenu, #peach1 .backtomenu, #orange1 .backtomenu, #lime .backtomenu, #strawberry1 .backtomenu, #grape3 .backtomenu { background:url('back_to_menu/btm_black.gifの相対パス') no-repeat; } /* 白文字フチグレー --------------------------------------------------------------------- */ #apple1 .backtomenu, #orange2 .backtomenu, #lemon2 .backtomenu, #grape5 .backtomenu { background:url('back_to_menu/btm_grey.gifの相対パス') no-repeat; } /* 黒文字フチ赤 --------------------------------------------------------------------- */ #muscat1 .backtomenu, #muscat1b .backtomenu, #muscat1c .backtomenu { background:url('back_to_menu/btm_red.gifの相対パス') no-repeat; } /* ヘッダ画像 --------------------------------------------------------------------- */ /* ヘッダ画像左右のシャドウ --------------------------------------------------------------------- */ #HeaderShadow { width:710px; height:450px; background:url('page_inside/paper_shadow.gifの相対パス') repeat-y; } /* ヘッダ画像領域 --------------------------------------------------------------------- */ #HeaderImage { margin:0 5px; width:700px; height:450px; } /* 自作HTMLトップページヘッダ画像 --------------------------------------------------------------------- */ #top #HeaderImage { background:url('headerフォルダ内の0〜20までの好きな画像の相対パス') no-repeat; } /* ニュースページヘッダ画像 --------------------------------------------------------------------- */ #apple1 #HeaderImage { background:url('headerフォルダ内の0〜20までの好きな画像の相対パス') no-repeat; } /* 日記ページヘッダ画像 --------------------------------------------------------------------- */ #banana #HeaderImage { background:url('headerフォルダ内の0〜20までの好きな画像の相対パス') no-repeat; } /* ケータイ日記（PC版）ページヘッダ画像 --------------------------------------------------------------------- */ #lime #HeaderImage { background:url('headerフォルダ内の0〜20までの好きな画像の相対パス') no-repeat; } /* 自己紹介ページヘッダ画像 --------------------------------------------------------------------- */ #pineapple1 #HeaderImage { background:url('headerフォルダ内の0〜20までの好きな画像の相対パス') no-repeat; } /* 投稿順ギャラリーページヘッダ画像 --------------------------------------------------------------------- */ #muscat2 #HeaderImage { background:url('headerフォルダ内の0〜20までの好きな画像の相対パス') no-repeat; } /* 投稿順ギャラリーページ２ヘッダ画像 --------------------------------------------------------------------- */ #muscat2b #HeaderImage { background:url('headerフォルダ内の0〜20までの好きな画像の相対パス') no-repeat; } /* 投稿順ギャラリーページ３ヘッダ画像 --------------------------------------------------------------------- */ #muscat2c #HeaderImage { background:url('headerフォルダ内の0〜20までの好きな画像の相対パス') no-repeat; } /* ショッピングカートページヘッダ画像 --------------------------------------------------------------------- */ #muscat3 #HeaderImage { background:url('headerフォルダ内の0〜20までの好きな画像の相対パス') no-repeat; } /* 掲示板（Aタイプ）ページヘッダ画像 --------------------------------------------------------------------- */ #orange1 #HeaderImage { background:url('headerフォルダ内の0〜20までの好きな画像の相対パス') no-repeat; } /* 掲示板（Bタイプ）ページヘッダ画像 --------------------------------------------------------------------- */ #orange3 #HeaderImage { background:url('headerフォルダ内の0〜20までの好きな画像の相対パス') no-repeat; } /* 画像掲示板ページヘッダ画像 --------------------------------------------------------------------- */ #orange2 #HeaderImage { background:url('headerフォルダ内の0〜20までの好きな画像の相対パス') no-repeat; } /* おしゃべり掲示板ページヘッダ画像 --------------------------------------------------------------------- */ #lemon1 #HeaderImage { background:url('headerフォルダ内の0〜20までの好きな画像の相対パス') no-repeat; } /* おしゃべり画像掲示版ページヘッダ画像 --------------------------------------------------------------------- */ #lemon2 #HeaderImage { background:url('headerフォルダ内の0〜20までの好きな画像の相対パス') no-repeat; } /* メールフォームページヘッダ画像 --------------------------------------------------------------------- */ #strawberry1 #HeaderImage { background:url('headerフォルダ内の0〜20までの好きな画像の相対パス') no-repeat; } /* フリーレイアウトページ１ヘッダ画像 --------------------------------------------------------------------- */ #grape1 #HeaderImage { background:url('headerフォルダ内の0〜20までの好きな画像の相対パス') no-repeat; } /* フリーレイアウトページ２ヘッダ画像 --------------------------------------------------------------------- */ #grape2 #HeaderImage { background:url('headerフォルダ内の0〜20までの好きな画像の相対パス') no-repeat; } /* フリーレイアウトページ３ヘッダ画像 --------------------------------------------------------------------- */ #grape3 #HeaderImage { background:url('headerフォルダ内の0〜20までの好きな画像の相対パス') no-repeat; } /* フリーレイアウトページ４ヘッダ画像 --------------------------------------------------------------------- */ #grape4 #HeaderImage { background:url('headerフォルダ内の0〜20までの好きな画像の相対パス') no-repeat; } /* フリーレイアウトページ５ヘッダ画像 --------------------------------------------------------------------- */ #grape5 #HeaderImage { background:url('headerフォルダ内の0〜20までの好きな画像の相対パス') no-repeat; } /* リンクページのヘッダ画像以下部分の位置調整 --------------------------------------------------------------------- */ #peach1 #wrapcontent { position:relative; top:-301px; } /* リンクページヘッダ画像 --------------------------------------------------------------------- */ #peach1 #HeaderImage { height:150px; background:url('header/bookmark.gifの相対パス') repeat-y; } /* リンクページヘッダ画像左右のシャドウ --------------------------------------------------------------------- */ #peach1 #HeaderShadow { height:150px; background:url('page_inside/paper_shadow.gifの相対パス') no-repeat; } /* カテゴリ別ギャラリー（１〜３）のヘッダ画像以下部分の位置調整 --------------------------------------------------------------------- */ #muscat1 #wrapcontent, #muscat1b #wrapcontent, #muscat1c #wrapcontent { position:relative; top:-151px; } /* カテゴリ別ギャラリー（１〜３）のヘッダ画像 --------------------------------------------------------------------- */ #muscat1 #HeaderImage, #muscat1b #HeaderImage, #muscat1c #HeaderImage { height: 300px; background:url('header/photograph.gifの相対パス') no-repeat; } /* カテゴリ別ギャラリー（１〜３）のヘッダ画像左右のシャドウ --------------------------------------------------------------------- */ #muscat1 #HeaderShadow, #muscat1b #HeaderShadow, #muscat1c #HeaderShadow { height:300px; background:url('page_inside/paper_shadow.gifの相対パス') no-repeat; } /* フッタ --------------------------------------------------------------------- */ /* 基本の赤い紙フッタ画像 --------------------------------------------------------------------- */ #PetitFooter { height:40px ; background:url('footer/footer_red.gifの相対パス') no-repeat; } /* カテゴリ別ギャラリーページ（１〜３）の赤い紙フッタの位置調整 --------------------------------------------------------------------- */ #muscat1 #PetitFooter, #muscat1b #PetitFooter, #muscat1c #PetitFooter { height:40px ; background:url('footer/footer_red.gifの相対パス') no-repeat; position:relative; top:-151px; } /* 黒い紙フッタ画像 --------------------------------------------------------------------- */ #peach1 #PetitFooter { height:40px ; background:url('footer/footer_black.gifの相対パス') no-repeat; position:relative; top:-301px; } /* 白い紙フッタ画像 --------------------------------------------------------------------- */ #apple1 #PetitFooter, #pineapple1 #PetitFooter, #grape1 #PetitFooter { height:40px ; background:url('footer/footer_white.gifの相対パス') no-repeat; position:relative; top:-40px; } /* ニュースページのカウンタ非表示 --------------------------------------------------------------------- */ #PetitFooterCounter { display:none; } /* 日記・ケータイ日記・ギャラリー（カテゴリ別/投稿順）の「Admin / PetitHomepageService」非表示 --------------------------------------------------------------------- */ #banana #PetitFooterCopy, #lime #PetitFooterCopy, #muscat1 #PetitFooterCopy, #muscat1b #PetitFooterCopy, #muscat1c #PetitFooterCopy, #muscat2 #PetitFooterCopy, #muscat2b #PetitFooterCopy, #muscat2c #PetitFooterCopy { display:none; } #banana #PetitFooterAdmin, #lime #PetitFooterAdmin, #muscat1 #PetitFooterAdmin, #muscat1b #PetitFooterAdmin, #muscat1c #PetitFooterAdmin, #muscat2 #PetitFooterAdmin, #muscat2b #PetitFooterAdmin, #muscat2c #PetitFooterAdmin { display:none; } /* ニュースページのカウンタ左側の「|」非表示 --------------------------------------------------------------------- */ .PetitPartition { display : none ; } /* back / nextボタン 位置調整 --------------------------------------------------------------------- */ .next { position:relative; z-index:3; bottom:-85px; right:-35px; } .back { position:relative; z-index:3; bottom:-85px; right:35px; } /* フォント関連 --------------------------------------------------------------------- */ /* 自作HTMLトップページに設置のカウンタのフォント設定 --------------------------------------------------------------------- */ #counter { font-family:Arial ; font-weight:bold ; font-size:14px ; letter-spacing:4px ; } /* 本文文字の字間・行間調整 --------------------------------------------------------------------- */ .main_ja, .navi_en, .main_en { line-height: 1.5em; letter-spacing:0.1em; } /* リンクページの文字色・行間調整 --------------------------------------------------------------------- */ #peach1 .main_ja, #peach1 .navi_en, #peach1 .main_en, #peach1 .main_ja a, #peach1 .navi_en a, #peach1 .main_en a { color:#ffffff; line-height: 17px ; } /* リンクページのカテゴリ名のフォント設定 --------------------------------------------------------------------- */ #peach1 .title_en, #peach1 .title_ja { color:#C83829; font-size:12px; font-weight:bold; line-height:14px; letter-spacing:0.2em; } /* 文字入力欄の色設定 --------------------------------------------------------------------- */ .input2, .textarea1{ border-width: none; border-color:transparent; } /* フッタ部分の「Admin」などのフォントサイズ --------------------------------------------------------------------- */ #PetitFooterAdmin, #PetitFooterCopy { font-size:10px; } /* リンクページフッタ部分の「Admin」などのフォント設定 --------------------------------------------------------------------- */ #peach1 #PetitFooterAdmin, #peach1 #PetitFooterCopy { color:#ffffff; font-size:10px; } /* 自己紹介ページで設定した見出し文字のフォント設定 --------------------------------------------------------------------- */ #pineapple1 .help_en { font-family:Verdana, Sans-Serif; font-weight:bold; padding-top:10px; padding-bottom:2px; } /* リンクテキスト --------------------------------------------------------------------- */ a {text-decoration : none;} a:hover {color : #000000;} /* リンクページの訪問済みリンクの文字色設定 --------------------------------------------------------------------- */ #peach1 a {text-decoration : none;} #peach1 a:visited {color : #DA0000;} /* 追加blank --------------------------------------------------------------------- */ .blank10 { font-size:0em; width:10px; height:10px } /* 写真に黒フチ --------------------------------------------------------------------- */ .imgbar { border-style:solid; border-width:5px; border-color:#000000; } /* 自己紹介ページ画像には黒フチつけない --------------------------------------------------------------------- */ #pineapple1 .imgbar { border: none; } /* ギャラリーのカテゴリ画像の黒フチと位置変更 --------------------------------------------------------------------- */ #muscat1 .title_ja img { border-style:solid; border-width:5px; border-color:#000000; position:relative; left:210px; } /* ギャラリー（カテゴリー別順）での( 1 Article )非表示 --------------------------------------------------------------------- */ #muscat1 .article { display: none; }
を入力してください。
※ 画像の相対パスを入力する箇所がたくさんあります。要確認！