「ウェブリブログのタイトル背景設定手順」の編集履歴(バックアップ)一覧はこちら
「ウェブリブログのタイトル背景設定手順」(2008/08/31 (日) 23:52:31) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
ウェブリブログのタイトル背景部分設定手順です。
【参考】ウェブリブログ ヘルプ
-[[Q:トップページのタイトルの背景に画像を表示させる方法は?(CSS編集) >http://faq.at.webry.info/200503/article_4.html]]
//-[[Q:ページ背景へ画像を掲載する方法は?(CSS編集)>http://faq.at.webry.info/200503/article_6.html]]
//-[[Q:記事ページのタイトルの背景に画像を表示させる方法は?(CSS編集) >http://faq.at.webry.info/200503/article_5.html]]
&bold(){携帯からブログ閲覧した際のダイトル背景も設定できます。}[[⇒設定手順>ウェブリブログのタイトル背景設定手順(携帯版)]]
**設定時の手順
***1.画像をアップロードする
+ウェブリブログにログインします。
+ブログ管理ページを開きます。
+左側のメニューバーより、ブログ >設定 の順に開きます。
+「基本表示設定(ブログ紹介編集・デザイン)」画面が表示されます。
+ブログ紹介画像 の項目の、画像リストボタンでファイルマネジャーを開き、画像をアップロードします。
+ブログ紹介画像 の項目にurlが表示されるので、それをコピーしてメモ帳などに貼り付けておいてください。
***2.CSSに書き込む
+左側のメニューバーより、ブログ >設定 >オプションの順に開きます。
+「オプション」画面が表示されます。
+右下にある「CSS編集(上級者向け)」を開きます。
+「CSS編集」画面が開きます。
+テキストエリアにCSSが表示されるので、「タイトル(大)」の箇所に以下のとおりに記述してください。
※「タイトル画像のURL」の部分には、メモ帳に貼り付けておいたURLをコピーペーストしてください。
【初期状態】
/*---------------- タイトル(大) ----------------*/
#banner{
/* 包含要素を相対位置指定できるようにします */
}
↓以下の通りに書き換え
【記述後】
/*---------------- タイトル(大) ----------------*/
#banner{
/* タイトル画像を繰り返しなしで背景に表示する */
background:url("タイトル画像のURL") no-repeat;
/* タイトル領域の高さ */
height:200px;
}
&bold(){記述が終わったら、テキストエリア下部の「設定」ボタンをクリックします。}
&bold()&color(red){※「設定」ボタンを押さないと、変更が反映されません。}
以上でタイトル背景が変更されます。
タイトル背景以外のデザインは、「基本表示設定(ブログ紹介編集・デザイン)」のデザインテンプレートで指定されたものになります。
**設定解除時の手順
+ウェブリブログにログインします。
+ブログ管理ページを開きます。
+左側のメニューバーより、ブログ >設定 >オプションの順に開きます。
+「オプション」画面が表示されます。
+右下にある「CSS編集(上級者向け)」を開きます。
+「CSS編集」画面が開きます。
+右上の「>> 初期値をフォームに入力 (元に戻したい場合)」のリンクをクリックします。
+メッセージボックスが表示されるので、「OK」をクリックします。(「編集中のCSS情報は保存されません。よろしいですか?」)
+&bold(){テキストエリア下部の「設定」ボタンをクリックします。}
&bold()&color(red){※「設定」ボタンを押さないと、変更が反映されません。}
以上でタイトル背景が解除されます。
タイトル背景を含めたデザインは、「基本表示設定(ブログ紹介編集・デザイン)」のデザインテンプレートで指定されたものになります。
ウェブリブログのタイトル背景部分設定手順です。
【参考】ウェブリブログ ヘルプ
-[[Q:トップページのタイトルの背景に画像を表示させる方法は?(CSS編集) >http://faq.at.webry.info/200503/article_4.html]]
//-[[Q:ページ背景へ画像を掲載する方法は?(CSS編集)>http://faq.at.webry.info/200503/article_6.html]]
//-[[Q:記事ページのタイトルの背景に画像を表示させる方法は?(CSS編集) >http://faq.at.webry.info/200503/article_5.html]]
&bold(){携帯からブログ閲覧した際のダイトル背景も設定できます。}[[⇒設定手順>ウェブリブログのタイトル背景設定手順(携帯版)]]
**設定時の手順
***1.画像をアップロードする
+ウェブリブログにログインします。
+ブログ管理ページを開きます。
+左側のメニューバーより、ブログ >設定 の順に開きます。
+「基本表示設定(ブログ紹介編集・デザイン)」画面が表示されます。
+ブログ紹介画像 の項目の、画像リストボタンでファイルマネジャーを開き、画像をアップロードします。
+ブログ紹介画像 の項目にurlが表示されるので、それをコピーしてメモ帳などに貼り付けておいてください。
#ref(説明画像2.jpg)
***2.CSSに書き込む
+左側のメニューバーより、ブログ >設定 >オプションの順に開きます。
+「オプション」画面が表示されます。
+右下にある「CSS編集(上級者向け)」を開きます。
+「CSS編集」画面が開きます。
+テキストエリアにCSSが表示されるので、「タイトル(大)」の箇所に以下のとおりに記述してください。
※「タイトル画像のURL」の部分には、メモ帳に貼り付けておいたURLをコピーペーストしてください。
【初期状態】
/*---------------- タイトル(大) ----------------*/
#banner{
/* 包含要素を相対位置指定できるようにします */
}
↓以下の通りに書き換え
【記述後】
/*---------------- タイトル(大) ----------------*/
#banner{
/* タイトル画像を繰り返しなしで背景に表示する */
background:url("タイトル画像のURL") no-repeat;
/* タイトル領域の高さ */
height:200px;
}
&bold(){記述が終わったら、テキストエリア下部の「設定」ボタンをクリックします。}
&bold()&color(red){※「設定」ボタンを押さないと、変更が反映されません。}
以上でタイトル背景が変更されます。
タイトル背景以外のデザインは、「基本表示設定(ブログ紹介編集・デザイン)」のデザインテンプレートで指定されたものになります。
**設定解除時の手順
+ウェブリブログにログインします。
+ブログ管理ページを開きます。
+左側のメニューバーより、ブログ >設定 >オプションの順に開きます。
+「オプション」画面が表示されます。
+右下にある「CSS編集(上級者向け)」を開きます。
+「CSS編集」画面が開きます。
+右上の「>> 初期値をフォームに入力 (元に戻したい場合)」のリンクをクリックします。
+メッセージボックスが表示されるので、「OK」をクリックします。(「編集中のCSS情報は保存されません。よろしいですか?」)
+&bold(){テキストエリア下部の「設定」ボタンをクリックします。}
&bold()&color(red){※「設定」ボタンを押さないと、変更が反映されません。}
以上でタイトル背景が解除されます。
タイトル背景を含めたデザインは、「基本表示設定(ブログ紹介編集・デザイン)」のデザインテンプレートで指定されたものになります。
表示オプション
横に並べて表示:
変化行の前後のみ表示: