解決済
ブログトップのタイトルに画像。
ブログのタイトルに画像を貼り付けたいのですが、 ● その手順を教えて戴けないでしょうか下さい。どの画面の、何処をクリックするとか‥‥
出来れば、その画面の "ＵＲＬ" を教えて下されば助かります。
回答(3)
1.
【2】[カスタマイズ/管理]タブを選択
【3】[デザインのカスタマイズ]をクリック。
右側にコードが表示されます。その中で、下記のような部分を探してください。"subbanner"をキー語にして検索すれば一発です。
こんなふうになっているでしょう。
#banner,#subbanner{
color:#fff;
width:688px;
height:244px;
text-align:left;
margin:0 auto;
font-weight:bold;
background:url(--------) no-repeat;
}
この記述で、"background"画像情報を記述してやります。丸括弧内の"--------"部分に【1】でコピーしたURLをペーストします。"http～" 以降 "～ファイル名" までがコピペされればよろしい。
【4】終ったら、一番下にある[この内容に変更する]ボタンをクリック。
【5】必要なら再構築をしてください。
2.
カスタマイズ/管理⇒デザインのカスタマイズ⇒スタイルシート（ＣＳＳ）
このソースの中から下記を探す
#banner,#subbanner{
background:
だいたいこんな感じになってます。
#banner,#subbanner{
background:url('http://img/○○○○○.jpg')
no-repeat scroll 50% 0%;
height:○○px;
}
○の部分は選択しているスキンによって違います。
http://img/○○○○○.jpgのＵＲＬをブラウザで開いてみると
現在使用されているＴＯＰ画像が出てきます。
この画像を適当なところに保存してください。
この画像を画像処理ソフトなどで開くと
サイズが分かります。
この画像と同じサイズのオリジナル画像を作って
ＵＰすることになりますので
ここまでの処理は画像サイズの確認だと思ってください。
（この画像より大きすぎるとレイアウトが崩れる場合があります）
自分で用意した画像などを加工して
これと同じサイズのものを作ります。
作った画像をアップロードします（ブログの投稿⇒ファイルのアップロード）
※サムネイル作成のチェックは外してください。
アップロードした画像のＵＲＬをコピーして
http://img/○○○○○.jpgのＵＲＬと入れ替えます。
『この内容に変更する』⇒ブログに設定を反映（再構築）⇒
『ＣＳＳ』で再構築をしてください。
これでオリジナル画像がＴＯＰに表示されるはずです。
私は念のため『全てのページ』で再構築しました。
再構築をしないとＣＳＳを変更してもブログには反映されません。
私もhtml初心者ですので詳しいことは分かりません。
間違いなどあればどなたかフォローをお願いします。
3.
#banner,#subbanner{
は無いようですね。そこで同じデザインを使用して試してみました。
ブログタイトルの背景は
div.blog-title-outer-3 {
background: #63abec url(http://parts.bl
og.livedoor.jp/img/usr/default_2008/sky/
r_left_top.gif) no-repeat;/* 背景画像：左上 */}
で指定されているようです。まず#63abecを削除してURL部分にトップページに表示させたい画像のURLに書き換えます。
大きさは私は926×162で作ってＵＰしてみました。
少々大きくてもデザインは崩れないようです。
ただし画像の左上の角のみ角がとれず尖ったまま表示されてしまいました。
画像処理ソフトなどで角を取っておくといいかも知れません。
私は詳しいことは分からず、手探り状態で完成させることができました。
間違いなどありましたら、ごめんなさい。
コメント(27)
(サポートいただき有難う御座います)
"subbanner" を探して見ましたが、見付からないのですが‥‥
↓ が、あの画面で表示される全てです。
http://www.geocities.jp/oookootarou2004/Support/Su...
これはライブドアブログの"CSS"を改変したものらしいですね。
背景画像は"background"で記述されるので、このキー語で検索してみると、有望な場所が数箇所見つかります。
/** 03. Title - ブログタイトルエリア */ 以降
/** 04. SubTitle - アーカイブタイトルエリア */ 以降
/** ArticlePager - 個別記事ページ */ 以降
/** 06. Main - 記事エリア */ 以降
/** 記事タイトル */ 以降
といった場所にしきりとbackground記述が現れ、表示位置もコメントされていますので、正確な回答が寄せられない場合は、元のCSSをテキストエディタにコピー･保存してから、「右上」「右下」「左上」等々のコメントを頼りに、一つ一つにあたりをつけてみるしかないでしょうね。
以上はあたしの姑息なやり方です。
続きになりますが‥‥
カキコミしましたら、"文字制限オーバー" の忠告が出ましたので、 ↓ページに致しました。
http://www.geocities.jp/oookootarou2004/Support/Su...
見てきました。
修正箇所はOKのようすが、「枠」の一部が表示されないのはなぜだろう？
試験用の画像サイズはじゅうぶんに小さいから、これは「割付け」の問題ではないかしら？
修正箇所の全容はこのようになっていますね。
↓
div.blog-title-outer {
background: #dedede url(http…) no-repeat right top;/* 背景画像●：右上 */
text-align: left;
margin-bottom:300px;
padding-right:300px;
}
この中で、最後の行の"padding-right:300px;"（右に300ピクセル空ける）というのがクセモノのように思えます。試しに300px→100pxに変更してもらえますか。貼りつけた絵は137pxなので200px内に入りますね。
カノンさんへ。
テンゾー＆テンロク さんからも、"subbanner" の事を言われて居りますが、
ソースを探しましたが、subbanner や、banner と云うのは見付かりませんでした。
テンゾー＆テンロクさんへ。
お話しの箇所を 100px にして、現在 ↓ のようになって居ります。
margin-bottom:300px;
padding-right:100px;
全てのソースは、↓ です。
http://www.geocities.jp/oookootarou2004/Support/Su...
ブログの方は、 ↓ になりました。
http://blog.livedoor.jp/oookootarou/
何故か、ブログのタイトルに入れてある、
"ライブドアにて。
さあ、いよいよ、春だァ～"
●↑は表示されなく、なりました。
ブログのタイトルですが、なぜか背景と同じ白い色なので見えなくなっているだけのようですね
> ブログのタイトルですが、なぜか背景と同じ白い色なので見えなくなっているだけのようですね。
superb さんの仰る通りでした。 (背景色を #00cccc に変えました)
おやおや…？
どうやら問題のCSSが定義している"background"記述は、周辺や内部の白い罫線（10px）のようです。
だから背景に関するコメントは「右上」「右下」…等々になっていたですね。
これだと、現在記述のままに一般的な背景画像を置くのは無理ということになってきます。
paddingの数字と、背景画像は元に戻し、振出しに戻って、#banner記述を追加する方法でやり直しましょうか？
> 振出しに戻って、#banner記述を追加する方法でやり直しましょうか？
↑ よろしく御願い致します。
勝手が分からないものですから、逐一に手順を教えて戴ければ、とても助かります。 <(_ _)>
『02. Layout - レイアウト（全体の枠組み）』以下はこんな構造になっています。
body {…}
div#container {…}
div#content {…}
この構造の、"div#container"と"div#content"の間に、"div#banner,div#subbanner{…}"を定義すると背景画像が表示されます。具体的には、
div#banner,div#subbanner{
color:#fff; /*背景：色*/
width:688px; /*背景：幅*/
height:244px; /*背景：高さ*/
text-align:left; /*文字：左揃え*/
margin:0 auto; /*文字：左端から自動割付け*/
font-weight:bold; /*文字：太字*/
background:url(http……….gif) no-repeat;
}
として、光太郎さんのコード全体を当方のブログCSSに貼り、試してみましたら、背景画像が表示されました。
ただし、color，width，height，background…といった変数定義は光太郎さんのブログに合致するように調整してください。
なお"background"記述のみをあちこちに挿入してもダメでした。
御手数おかけして居ります。
お示し下さったソースを "div#container"と"div#content" の間に挿入する時は、
↓ (現在のソース)
div#container {
width: 94%;
margin: 0 auto;
padding-bottom: 10px;
background-color: #ffffff;
position: relative;
}
div#content {
■ ↑の、
{
width: 94%;
margin: 0 auto;
padding-bottom: 10px;
background-color: #ffffff;
position: relative;
}
↑を削除して、
↓のようにすると云う事でしょうか?
‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥
div#container
div#banner,div#subbanner{
color:#fff; /*背景：色*/
width:688px; /*背景：幅*/
height:244px; /*背景：高さ*/
text-align:left; /*文字：左揃え*/
margin:0 auto; /*文字：左端から自動割付け*/
font-weight:bold; /*文字：太字*/
background:url(http……….gif) no-repeat;
}
div#content {
‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥
正確に書くと、
div#container {
従来通り残す
}
div#banner,div#subbanner{
color:#fff; /*背景：色*/
width:688px; /*背景：幅*/
height:244px; /*背景：高さ*/
text-align:left; /*文字：左揃え*/
margin:0 auto; /*文字：左端から自動割付け*/
font-weight:bold; /*文字：太字*/
background:url(http……….gif) no-repeat;
}
div#content {
従来通り残す
}
ということですが。
div#container {…}
div#content {…}
この構造の、"div#container"と"div#content"の間というのはそういうことです。{}記号はひとくくりなんですよ。
手順通り進めてみましたが、タイトルの背景として挿入した画像 (山シャクヤクの花) ば出て来ないのですが、
今回、新たに挿入したソースの、div#banner,div#subbanner と云うのは、タイトルの背景画を指示するものなんでしょうか?
因みに、今回の新たなソースを追加後のＣＳＳの全てです。
↓
http://www.geocities.jp/oookootarou2004/Support/Su...
それを反映させた(ブログを再構築も押しました)後のブログです。
http://blog.livedoor.jp/oookootarou/
表示されなくて当然です。
>>#12
のコメントで、次のように書きました。
『color，width，height，background…といった変数定義は光太郎さんのブログに合致するように調整してください』
掲載したbanner記述は当方の環境なのです。
とくに背景指示のURLを"http……….gif) no-repeat;"そのままに載せたらエラーになります。
ここには山シャクヤクの画像URLを記述してください。
それから、「03. Title - ブログタイトルエリア」で修正した箇所を元に戻してください。
padding-right:100px;
背景画像●■：右上
の二箇所でしたね。
コードをいじる場合は、記憶力も要求されます。
なんとか、画像が表示されました。
最初、 ↓ 02. Layout - レイアウト（全体の枠組み）の処で、
div#banner,div#subbanner{
color:#fff; /*背景：色*/
width:688px; /*背景：幅*/
height:244px; /*背景：高さ*/
text-align:left; /*文字：左揃え*/
margin:0 auto; /*文字：左端から自動割付け*/
font-weight:bold; /*文字：太字*/
background:url(http://image.blog.livedoor.jp/oookootarou/imgs/4/2/42f5b683.jpg) no-repeat;
}
↑のように、画像、山シャクヤク(ライブドアにアップロードした物です)を挿入したのですが、
やはり、ブログには反映されませんでしたので、そこからは、この画像を削除して‥‥
↓のように、 03. Title - ブログタイトルエリア にある、
div.blog-title-outer-2 と云う処へ ↓ のように、画像ＵＲＬを挿入したら、
div.blog-title-outer-2 {
background: url(http://image.blog.livedoor.jp/oookootarou/imgs/4/2...) no-repeat;/* 背景画像：左上 */
padding: 10px 0 0 10px;
}
■ 今度、画像が出て来ました。
↓
http://blog.livedoor.jp/oookootarou/
"再構築" の箇所は押さず、 ＣＳＳの画面下にある、 ［この内容に変更する］ の処だけクリックしたら、ブログの最上部右に画像が出て来たのでした。
現在のＣＳＳは↓です。
http://www.geocities.jp/oookootarou2004/Support/Su...
ただ、この画像の大きさとタイトルの 【ライブドアにて。 さあ、いよいよ、春だァ～】 の見栄えが悪いので、
明日にでも、調整を続けてみるつもりです。
取り敢えず、此処までの状況をご報告させて戴きます。
光太郎さんの場合は
ブログタイトル背景（div.blog-title-outer-3 ）の色を変更されているようなので削除するのは
#00ccccですね。
補足しておきます。
私が作ったブログのURLも参考までに・・・
http://blog.livedoor.jp/topgazou/
テンゾー＆テンロクさん
私は初心者なのでお二人のやり取りがとても勉強になりました。
ありがとうございます(*^^*)
『03. Title - ブログタイトルエリア』についてのコメントです。
■1.
"div.blog-title-outer {"において、"/* 背景画像●■：右上 */"というコメントを入れた行の本来の記述は、次のようになっていたと思います。今のうちに戻しておかれるといいでしょう。
background: #dedede url(http://parts.blog.livedoor.jp/img/usr/default_2008...) no-repeat right top;/* 背景画像：右上 */
■2.
次に、カノンさんが指摘してくれたのは"div.blog-title-outer-3"の次行です。ところが、光太郎さんは"div.blog-title-outer-2"の次行を変更しています。この行の記述を元に戻して、カノンさんの指摘する"div.blog-title-outer-3"の次行を変更してみましょう。
以下は当方のコメントです。
■3.
banner記述については、せっかくですが9行全部を削除してください。
これで直るといいな…。
しかし…光太郎さんのCSS記述における背景表示は、全部チェックする限り10px幅の罫線表示に使用されているので、banner，subbunnerにて表示するほかはないと思いました。当方のブログに適用してちゃんと表示されたのは、「設定環境」も手伝っていたのかな？
テンゾー＆テンロク さん。 カノン さん。
満足いくものでは御座いませんが、
曲りなりにも、トップのタイトル背景画を挿入できました。
大変、御世話になり有難う御座いました。
これからも、どうぞ宜しく御願い致します。
( カノン さんのブログも、とても、参考になりました <(_ _)> )
http://blog.livedoor.jp/oookootarou/
背景画像設置できたみたいで良かったです。
少しずつ調整して満足のいくものが出来ると良いですね(*^^*)
テンプレートが違うと色々な方法があるのだと
今回は私自身とても勉強になりました。
何度もすみません。
画像の大きさですが、サイズ：939 x 224で
設定してみたら上手くいきました。
少し大きめなので表示範囲外の右側下側は
表示されませんが、デザインは崩れないようです。
カタチがついてよかったですね。
当方のCSSは2006年版，光太郎さんのCSSは2008年版でした。
今後はCSSを手入れする場合、いつの版であるかを明らかにしてから、となるでしょう。
