2012年03月10日
ブログカスタマイズ タイトルバナーの設置（ファンブログ 同一スタイルシートの場合）
今日からタイトルバナーを設置してみました
思ったより大変でした
わかる人には簡単かと思うのですが、
CSSとかよくわからない人たち（私とか）には中々に難しく、
設置を諦めた人も少なくないかなと思い、
ここに一例として、
このサイトの場合のスタイルシートの設置方法を記載していこうと思います
思ったより大変でした
わかる人には簡単かと思うのですが、
CSSとかよくわからない人たち（私とか
）には中々に難しく、設置を諦めた人も少なくないかなと思い、
ここに一例として、
このサイトの場合のスタイルシートの設置方法を記載していこうと思います
まず最初に、
あくまで一例なので、もし出来ない場合はすいません。ただ、参考になれば幸いです
また、
スタイルシートを編集する必要があります。戻らなくなると大変なので編集前にコピーを必ずとっておいて下さい
それでは、方法について記述していきます。
①まずタイトルバナーとする画像を入手します
②その画像ファイルをアップロードします。
画像のファイルサイズが200KB以内の場合
「記事の作成」→下書きで記事を作成し「挿入 画像/ファイル」で画像をアップロードする。
画像が左側に表示されるので、右クリック「画像のURLをコピー」で画像のURLをコピーしてどこかに保存しておく
画像のファイルサイズが200KB以上の場合
記事での画像のアップロードが不可の為、サイズを下げるか、
外部（DropBoxとか）にアップロードして画像URLを入手する。
③スタイルシートの編集
「スタイルの編集」→「フリースキンの編集 スタイルシート」を選択
#banner {
text-align:left; margin:0px 30px 10px 30px;padding:30px 0 10px 0;border-bottom: 3px solid #cccccc; background-color:#ffffff;
}
h1 {
color: #ffffff; width: 600px; height: 65px;font-size: 0;
font-weight:normal; margin:0 0 5px 0; padding:10px 10px 10px 0;
}
h1 a {
display:block; width:600px; height:65px; font-size:0; font-weight:normal; text-decoration:none; text-indent:-9999px; background:url(画像アドレス) no-repeat 0 0; border-bottom:0px;
}
をどこかに記載する。
以上で完了です。
また、上記のタグについてですが、
フォントカラーを背景色と同じ色にすること。
font-size を 0 に、text-indent を -9999px に指定すること。
width: ？？？px; height: ？？px; というのは画像のリンクエリア（マウスのポインターが変わる箇所）になります。画像のサイズに合わせるのが一般的には良いかと思います。
あくまで一例なので、もし出来ない場合はすいません。ただ、参考になれば幸いですまた、
スタイルシートを編集する必要があります。戻らなくなると大変なので編集前にコピーを必ずとっておいて下さいそれでは、方法について記述していきます。
①まずタイトルバナーとする画像を入手します
②その画像ファイルをアップロードします。
画像のファイルサイズが200KB以内の場合
「記事の作成」→下書きで記事を作成し「挿入 画像/ファイル」で画像をアップロードする。
画像が左側に表示されるので、右クリック「画像のURLをコピー」で画像のURLをコピーしてどこかに保存しておく
画像のファイルサイズが200KB以上の場合
記事での画像のアップロードが不可の為、サイズを下げるか、
外部（DropBoxとか）にアップロードして画像URLを入手する。
③スタイルシートの編集
「スタイルの編集」→「フリースキンの編集 スタイルシート」を選択
#banner {
text-align:left; margin:0px 30px 10px 30px;padding:30px 0 10px 0;border-bottom: 3px solid #cccccc; background-color:#ffffff;
}
h1 {
color: #ffffff; width: 600px; height: 65px;font-size: 0;
font-weight:normal; margin:0 0 5px 0; padding:10px 10px 10px 0;
}
h1 a {
display:block; width:600px; height:65px; font-size:0; font-weight:normal; text-decoration:none; text-indent:-9999px; background:url(画像アドレス) no-repeat 0 0; border-bottom:0px;
}
をどこかに記載する。
以上で完了です。
また、上記のタグについてですが、
フォントカラーを背景色と同じ色にすること。
font-size を 0 に、text-indent を -9999px に指定すること。
width: ？？？px; height: ？？px; というのは画像のリンクエリア（マウスのポインターが変わる箇所）になります。画像のサイズに合わせるのが一般的には良いかと思います。
ブログランキングに複数登録してみました。是非ご協力お願いします♪
また、記事更新の度にTwitterでツイートしているので、もしよかったらフォローお願い致します♪
【アクセスアップの最新記事】
由緒なき島宇宙のカテゴリ
由緒なき人気記事ランキング
登録blogランキング
由緒のｵｽｽﾒ記事
お問い合わせ
由緒ｵｽｽﾒ小遣いｻｲﾄ
この記事へのコメント