HTML templates
FC2 BLOG templates
テンプレートのカスタマイズ
テンプレートのカスタマイズについて
- 当サイトのテンプレートはカスタマイズ自由です。
- カスタマイズについてはご質問やお問い合せが1度でもあった物を掲載しています('16.02.22現在)。
- こちらで気付いた点などあれば随時追加していく予定です。
- かなり分かりづらい説明だと思うので(説明苦手なのです…orz)、下記の説明でご不明な点またはご質問等ございましたらメールフォームからどうぞ。
カスタマイズリスト
- はじめに(ブログテンプレートとHTMLテンプレートの修正ファイル場所)
- 文字サイズの変更
- 背景画像または背景色の変更
はじめに(ブログテンプレートとHTMLテンプレートの修正ファイル場所)
ブログテンプレート(FC2)の場合 |
- まずは管理ページから「テンプレートの設定」を開きます。
- PCテンプレートから当サイトのブログテンプレートを選択し、HTML編集とスタイルシート編集を表示させます。
- 文字サイズ変更は「スタイルシート編集」から行ってください。
- そこから「目次」(あるものと無いものがあります)で目的の場所までをスクロールします。
※「目次」が無いものについては「HTML編集」のHTMLタグと照らし合わせて目的のコードを探して変更してください…(´Д`;)スミマセン
|
HTMLテンプレートの場合 |
- ダウンロードしたzip形式ファイルを解凍します。
- 解凍したファイルの中に「base.css」というファイルが入っています。これはテンプレートのデザインやレイアウトを指定しているファイルになります。
- この「base.css」をWindowsならメモ帳やワードパッド、Macintoshならテキストエディタやフリーソフト等で開いてください。
- ファイルを開いたら「目次」に記してある目的の場所までをスクロールします。
|
文字サイズの変更
ブログテンプレート(FC2)の場合 |
- 「はじめに」に記している(1)〜(4)までの手順を踏みます。
- そこで font-size:数値; という物が文字サイズを設定している部分になります。
- ブログ全体の文字サイズは body { ~ }、ブログタイトルの文字サイズは h1 { ~ }、記事内容の文字サイズは .entry_body { ~ }(テンプレートによっては違います)等、各部位に割り振られているコードに内包されているfont-size:数値;を変更してください。
|
HTMLテンプレートの場合 |
- 「はじめに」に記している(1)〜(4)までの手順を踏みます。
- その「見出し」部分にある
/*--- サイト名 ---*/
h1 {
padding-left:55px;
height:40px;
font-size:30px;
font-family:Georgia, "Times New Roman", "MS 明朝", "ヒラギノ明朝 Pro W3",
Times, serif; }
のfont-sizeの数値(30px)を変更します。
|
テンプレートによってはこの単位が「px」や「%」だったりしますが、基本この単位をそのままに数字を大きくすれば文字サイズは「大」に。逆に小さくすれば「小」になります。
ブログテンプレートでもHTMLテンプレートでも、この font-size の数字を変更すれば文字サイズは変わるので各部位に割り振られている所を変更してみてください。
背景画像または背景色の変更
ブログ(FC2)&HTMLテンプレート共通 |
- 「はじめに」に記している(1)〜(4)までの手順を踏みます。
- 背景画像または背景色の変更箇所は、背景を使っている場所のコードに内包されている background になります。
- この background は背景に関する全てを設定するものです。記述の仕方は
background:url(***) #ffffff left top no-repeat;
url(***) →背景画像のURL(*1)
#ffffff →背景色(*2)
top left →背景画像の表示開始位置(*3)
no-repeat →繰り返し表示(*4)
(※この記述の仕方の場合、左上に背景画像が固定されている、と言う風になっています。)
の様に記述します。
|
上記の記述以外で個別に記述する方法もあります。
ブログ(FC2)&HTMLテンプレート共通 |
- 「はじめに」に記している(1)〜(4)までの手順を踏みます。
- background-color 等と記述されている物は背景画像や背景色を個別に設定しているものになります。それぞれの記述の仕方は下記の通りです。
background-image:url(***); →背景画像のURL(*1)
background-color:#ffffff; →背景色(*2)
background-position:left top; →背景画像の表示開始位置(*3)
background-repeat:repeat-x; →繰り返し表示(*4)
background-attachment:fixed; →背景画像のスクロール方法(*5)
|
※色コードについては検索するといろんなサイトさんがコードやら色名など紹介していますのでご自身で調べてください!
(*1)「***」の部分に背景画像のURLを入れます。
(*2)16進数の色コード「#ffffff」は白です。「black」や「white」等でも表現可能。
(*3)背景画像の表示開始位置を指定したい場合に記述します。「top left」なら左上、「bottom right」なら右下など。
「0~100%」の間で任意の位置に指定可能。
(*4)「no-repeat」で繰り返し無し。「repeat」で全面繰り返し。「repeat-x」で横方向に、「repeat-y」で縦方向に繰り返します。
(*5)「fixed」で指定した位置に背景固定。「scroll(デフォルト)」で画面をスクロールすると背景画像もスクロールされます。