配布テンプレートのカスタマイズ方法－１

TOP PAGE » テンプレートのカスタマイズ方法 » 配布テンプレートのカスタマイズ方法－１

2010年07月04日

配布テンプレートのカスタマイズ方法－１

テンプレート利用者でカスタマイズの情報を共有したいと考えているので
配布しているテンプレートのご質問などはこのスレッドでお願いします。

カスタマイズをやりたいが、HTMLやCSSが解らない人も配布テンプレートの
何処をどんな風にカスタマイズしたいのかを遠慮なく質問してください。

■ 画像のアップロード方法
■ 背景画像・背景色の変更方法
■ ヘッダ画像の変更方法

登録不要にしたため、テンプレートのご利用状況が把握できてません。
もし良ければサイドバーにあるフォームよりサイトアドレスをお知らせ下さい。
当記事へコメントにてサイトアドレスをポストされても構いません。
あくまでも任意ですが、どうぞよろしくお願いします。

カスタマイズ記事の更新情報やご利用サイトにてブログランキングや
リスティング広告を設置されている方は応援させていただきます。

画像のアップロード方法

記事以外で画像を使う場合も、画像のアップロード方法は同じやり方になります。
したがって、過去の記事を使って画像をアップしなければなりません。

1記事に5つまで画像を登録できるので、分かりやすいように
最初の記事から画像をアップしましょう。

記事一覧・編集から、一番古い記事を表示させて記事の最後に
改行を入れてカーソルを点滅させて下さい。

そこに使いたい画像を挿入させて記事を保存します。
保存したら、記事を表示させて右クリックでソースを表示させてください。

画像を挿入した記事の部分を探したら、その下にこんなタグがあります。

●●●の部分はあなたのアカウントで、赤数字の部分は記事番号になり
画像ファイル名は、自動的にアルファベットと数字の羅列に変換されます。
この画像タグをテキストエディタにコピーしておきます。

ここで画像を挿入した記事に戻り、記事の最後にある画像タグを削除しましょう。
これで画像をアップロードする事が出来ました。
コピーした画像タグのパスは相対パスになっているので、絶対パスに変更します。

このままでも良いのですが、画像の幅と高さ、alt属性を指定しましょう。

alt属性はハンディキャプを持つ方のために出来るだけ入れましょう！

背景画像の変更方法

デフォルトで設定している背景画像の変更方法は…
新しく使う背景画像を、画像のアップロード方法を参照してアップロードして下さい。

次に、スタイルシートを開き下記の場所を探してください。

/* ================================================
■ 基本設定
================================================ */

html {
background: #FFFFFF;
color: #333333;
}

body {
margin: 0;
padding: 0;
color: #333333;
text-align:center;
background: url(https://fanblogs.jp/gamadasuzo/file/2/YmctcmVkM44.gif); repeat;
font-family: 'メイリオ','Meiryo','ＭＳＰゴシック','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','Osaka',sans-serif;
}

赤文字の画像アドレスの所を新しく使う画像のアドレスに変更して保存して下さい。

背景画像でなく、色を指定指定する場合は…
background: #●●●●●●; と、色を指定してください。

ヘッダ画像の変更方法

デフォルトで設定しているヘッダ画像を変更する場合は…
このサイズでヘッダ画像を作って、画像のアップロード方法を参照してアップロードして下さい。

ヘッダ画像のサイズは、980ピクセル×150ピクセルとスタイルシートで
指定してるのでこのサイズで作って下さい。

次に、スタイルシートを開き下記の場所を探してください。

/* ================================================
■ ヘッダー設定
================================================ */

div#header {
background: url(https://fanblogs.jp/gamadasuzo/file/1/aGVhZJP4.gif) no-repeat;
padding: 0;
margin: 0;
height: 150px;
}

div#header .blogTitle {
margin: 0;
font-size: 24px;
color: #333333;
padding: 30px 0 0 20px;
}

赤文字の画像アドレスの所を新しく使う画像のアドレスに変更して保存して下さい。

ヘッダ画像でなく、色を指定指定する場合は…
background: #●●●●●●; と、色を指定してください。

ヘッダ画像を背景色に変更した場合は…
タイトル文字の色をcolor: #333333;を、引き立つ色に変更して下さい。

ヘッダ画像の高さは変更することが出来ます。
もし、ヘッダ画像で高さを変更した場合は、スタイルシートのheight: 150px;を変更して下さい。

ポチっと応援をして頂けると嬉しいです。