- ベストアンサー
ブログに画像を挿入する方法
- gooブログカスタムでブログを作っていますが、ブログタイトル左側に画像を挿入する方法が分かりません。
- 左には画像を挿入できましたが、タイトルとかぶってしまいます。どのようにすればうまく画像を挿入できるでしょうか？
- ブログのタイトル部分の上に画像を挿入する方法が知りたいです。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
関連するQ&A
- ブログ タイトル 配置
何度もすいません。もう少し詳しく書きます。 gooブログカスタムでブログを作っています。ブログタイトル左側に画像を挿入しようおもっていますが、うまくいきません。左には挿入できましたが、タイトルとかぶってしまいます。 タイトルの文字をセンター配置する方法と画像をタイトルの左に配置する方法を教えていただけますか？ 下記の通りすると、タイトルとかぶってしまいます。 /* ブログのタイトル部上 */ .headerLight { height: 150px; background: url(http://blogimg.goo.ne.jp/user_image/5b/0e/8876e75e92ff9a9e7e56176d1... no-repeat top left bottom; background-color: #376599;
- ベストアンサー
- ブログ
- ｃｓｓ ブログタイトル位置の動かし方
gooブログのカスタムテンプレート「カスタムブルー」を使っています。 cssでブログTOP画像をいじっているのですが、 背景画像を挿入した際に、元々組み込まれている自身のブログタイトル、 およびブログの説明文が挿入した画像の隠れて欲しくない部分と 重なってしまいます。 左右への移動は 「paddinng-left」にて出来たのですが 上下への移動が出来ず（paddinng-top or bottomでは動かず)困っています。 （ブログタイトル＆説明文をもう少し上の位置にずらしたいのですが。。） 位置の設定の仕方が間違ってる、もしくは何か別の方法があるのでしょうか？ ---------------------------------------------------------------- /* ブログのタイトル部上 */ .headerLight { background-image: url(挿入画像のurl); background-repeat: no-repeat; background-position: center; background-color: #D8BFD8; height: 300px; } /* ブログタイトル部等の区切り線 */ .rule { background-color: #7B68EE; border-color: #ffffff; border-style: dotted; border-width: 3px; } /* ブログのタイトル部下 */ .headerDark { background-image: url(); background-repeat: ; background-position: ; background-color: #D8BFD8; } /* ブログのタイトル */ .bTitle { color: FFF0F5; font-size: 22px; font-weight: bold; font-family: 'Century Gothic',VERDANA,ARIAL,SANS-SERIF,Helvetica,'MS P ゴシック',Osaka; padding-left: 70px; } /* ブログタイトルのリンク（<a href="#" class="etTitleLink">で使用） */ .bTitleLink { text-decoration: none; } /* ブログの概要 */ .bDesc { color: #ffffff; font-size: 12px; font-weight: bold; padding-left: 100px; } --------------------------------------------------------------- ※ＣＳＳ初心者です。 よろしくお願いいたします。
- ベストアンサー
- ブログ
- ブログのタイトル背景部分に画像を入れたいのですが…
gooブログのカスタムメタルを使用しています。 タイトル部分に画像を入れていたのですが突然見れなくなってしまいました（以前は正常に表示されていました） /* /ページ全体共通指定*/ /* ブログのタイトル部全体の背景（デフォルトは画像使用） */ .header { height: 180px; background-image: url(画像のURL); background-attachment:fixed; background-repeat:no-repeat; background-position:left; } 頻繁にいじっていたのでどこか間違えているかもしれません。 が、何度見てもどこが間違ってるか自分ではサッパリわからなくなってしまいました； よろしくお願いします。
- ベストアンサー
- ブログ
- livedoorブログのヘッダの変更のしかた・・・
livedoorブログのヘッダの変更のしかた・・・ livedoorブログをはじめて、カスタマイズをしようと思って、livedoorブログカスタマイズのしかたなどが載ってるサイトをいろいろ探してみたのですが、サイトに書いてある、CSSと、はじめのlivedoorブログのカスタマイズの変更で見たCSSが全然違います。 ヘッダ画像の変更などは サイトに書いてあるのは body{ margin:0; padding:0; color:#d7d3c4; background:#000 url(http://image02.wiki.livedoor.jp/img/usr/gothic/header.jpg) no-repeat center 20px; font-size:80%; } こんなのや他にもいろいろありますが、livedoorのカスタマイズではじめのCSSを開いてタイトルエリアを見ても div.blog-title-outer { background: #dedede url(http://livedoor.2.blogimg.jp/kio_kiriya/imgs/8/7/877e770f.jpg) no-repeat right top;/* 背景画像：右上 */ text-align: left; margin-bottom: 10px; padding-right: 10px; } div.blog-title-outer-2 { background: url(http://livedoor.2.blogimg.jp/kio_kiriya/imgs/8/7/877e770f.jpg) no-repeat;/* 背景画像：左上 */ padding: 10px 0 0 10px; } div.blog-title-outer-3 { background: #63abec url() no-repeat;/* 背景画像：左上 */ } h1#blog-title { background: url(http://livedoor.2.blogimg.jp/kio_kiriya/imgs/8/7/877e770f.jpg) no-repeat right top;/* 背景画像：右上 */ margin: 0; padding: 35px 30px 0; font-size: 150%; font-weight: bold; } div.blog-description-outer { background: url(http://livedoor.2.blogimg.jp/kio_kiriya/imgs/8/7/877e770f.jpg) no-repeat bottom left;/* 背景画像：左下 */ } p#blog-description { background: url() no-repeat bottom right;/* 背景画像：右下 */ margin: 0; padding: 10px 30px 35px; line-height: 135%; } こんなので背景画像右下や左下・・・ これすべてにアップロードした画像のURLをいれてもちゃんと背景になりません。 どうすればいいのでしょうか？
- 締切済み
- ブログ
- CSSについて
/** ナビゲーション */ #mainNavi { width:740px; height:50px; overflow:hidden; margin-left:200px; } #mainNavi li, #mainNavi li.acitve { float:left; padding-left:10px; margin-left:1px; background:url(/images/navi.png) left 0px no-repeat; } #mainNavi a { height:50px; display:block; line-height:50px; padding:0 13px 0 3px; background:url(/images/navi.png) right 0px no-repeat; color:#fff; font-size:13px; font-weight:bold; text-decoration:none; } #mainNavi li.active { background:url(/images/navi.png) left -10px no-repeat; } #mainNavi li.active a { background:url(/images/navi.png) right -100px no-repeat; color:#fff; } #mainNavi .wii li.active { background:url(/images/navi.png) left -50px no-repeat; } #mainNavi .wii li.active a { background:url(/images/navi.png) right -50px no-repeat; color:#fff; } #mainNavi .ds li.active { background:url(/images/navi.png) left -150px no-repeat; } #mainNavi .ds li.active a { background:url(/images/navi.png) right -150px no-repeat; color:#fff; } #mainNavi a:hover{ color:#ff0; text-decoration:underline; } #mainNavi li.active a:hover { } というCSSを使って、 ホームページを作成しました。 すべて人から教えてもらったものなので、CSSは初心者です・・・。 そこで思ったのですが、 TOP・掲示板・メール等・・・ のメニューを、左寄りにすることはできないのでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- gooブログのヘッダーに画像
gooブログで日記を書いています。 今はCLカスタムというテンプレートを使っています。 ヘッダーの画像を新しいものに変更しようとしたのですが、 CSSデータに画像のURLを挿入しても変更できません。 プレビューでは変更が反映されているのに実際のページでは 反映されないのです。 どうすればいいのか、 お分かりの方がいらしたら、よろしくお願いします。 ちなみに、次のようになってます。 /*-- タイトルバナー外枠の設定 --*/ #title-banner { border-top:solid 7px #6ca8d6; border-bottom:solid 1px #c8c8c8; background:#6ca8d6; } /*-- タイトルバナー上部の設定 --*/ #title-banner-top { width:100%; height:0px; background:#1c75b8; margin:0; } /*-- タイトルバナー内部の設定 --*/ #title-banner-body { border-bottom:solid 2px #5ca1d6; width:100%; /*-- ↓タイトルバナーに画像を入れる場合は、下記のコメントをはずし、画像URLを指定する --*/ background-image:url(http://blogimg.goo.ne.jp/user_image/25/c6/74ccde33e7e5afae5396f03eeb644f62.png); background-position: center top; background-repeat:no-repeat; /*-- ↓タイトルバナーに画像を入れる場合は、画像に合わせて値を変更する --*/ height:435px; } /*-- ブログタイトルの開始位置の設定 --*/ #title-banner-body #title-banner-set { padding-top:30px; padding-left:30px; } /*-- タイトルバナー下部の設定 --*/ #title-banner-bottom { width:100%; border-top:solid 2px #4591cb; height:2px; background:#378fd4; border-bottom:solid 2px #eaeaea; } /*-- ブログタイトル文字の基本設定 --*/ #title-banner-body #title-banner-set h1 { font-size:245%; color:#ffffff; line-height:1.2; text-align:left; width:50%; margin-bottom:5px; } /*-- ブログタイトル文字の設定（文字色、リンク時装飾） --*/ #title-banner-body #title-banner-set h1 a { color:#FFFF33; text-decoration:none; } /*-- ブログタイトル文字の設定（マウスオーバー／マウスクリック時の文字色、リンク装飾） --*/ #title-banner-body #title-banner-set h1 a:hover, #title-banner-body #title-banner-set h1 a:active { color:#000000; text-decoration:underline; } /*-- ブログ概要の設定 --*/ #title-banner-body #title-banner-set h2 { color:#FFFFFF; font-size:92%; line-height:2; width:50%; font-weight:normal; background ; padding:5px; }
- 締切済み
- ブログ
- exciteブログでトップに画像を表示させたいのですが
exciteブログを使っていますが、ブログのタイトルのところに画像を載せたいです。 DIV#TOP { BACKGROUND : #6F8294 url(http://～～～～～（ここは省略させていただきます。）) : no-repeat ; border-bottom : 5px solid #c1d6f8 WIDTH : 700PX; HEIGHT : 200PX; } とCSSで設定したのですが画像が表示されません。 間違っているところを教えていただきたいです。 どうぞよろしくお願いします。
- ベストアンサー
- ブログ
- CSSについての質問
/** ナビゲーション */ #mainNavi { width:740px; height:50px; overflow:hidden; margin-left:200px; } #mainNavi li, #mainNavi li.acitve { float:left; padding-left:10px; margin-left:1px; background:url(/images/navi.png) left 0px no-repeat; } #mainNavi a { height:50px; display:block; line-height:50px; padding:0 13px 0 3px; background:url(/images/navi.png) right 0px no-repeat; color:#fff; font-size:13px; font-weight:bold; text-decoration:none; } #mainNavi li.active { background:url(/images/navi.png) left -10px no-repeat; } #mainNavi li.active a { background:url(/images/navi.png) right -100px no-repeat; color:#fff; } #mainNavi .wii li.active { background:url(/images/navi.png) left -50px no-repeat; } #mainNavi .wii li.active a { background:url(/images/navi.png) right -50px no-repeat; color:#fff; } #mainNavi .ds li.active { background:url(/images/navi.png) left -150px no-repeat; } #mainNavi .ds li.active a { background:url(/images/navi.png) right -150px no-repeat; color:#fff; } #mainNavi a:hover{ color:#ff0; text-decoration:underline; } #mainNavi li.active a:hover { } というCSSを使って、 下のようなホームページを作成しました。 http://www.nin-site.net/ すべて人から教えてもらったものなので、CSSは初心者です・・・。 そこで思ったのですが、 TOP・掲示板・メール等・・・ のメニューを、左寄りにすることはできないのでしょうか？ 下は、イメージ図です。（編集しました。） http://www.nin-site.net/image_style.jpg よろしくお願いします。 すべての内容が見たい場合は、 HTMLソース：http://www.nin-site.net/index.txt CSS：http://www.nin-site.net/css/style.css です。
- ベストアンサー
- CSS
- seesaaブログで背景画像の位置を指定したい
seesaaブログで背景画像の位置を下中央に表示させたいのですが、background-position:bottom center;と指定しても、上中央に固定されていてウンともスンとも動きません。 試しにleftに指定してみたり、タグの順番をかえてみたりしましたがダメでした。 ちなみに、忍者ブログや簡単なHTMLのページでは思い通りに表示できています。 ご存知の方、是非ご教授ください。よろしくお願い致します。 body { margin:0px; padding:0px; background-image:url("画像URL") ; background-color : #210709; background-repeat:no-repeat; background-attachment:fixed; background-position:bottom center; line-height:180%; text-align:center; }
- 締切済み
- CSS
- FC2ブログ テンプレートのCSS編集について
こちらのテンプレート http://labyrinth2014.blog.fc2.com/ 記事が長くなると、右サイドメニューの背景が 下部のフッターから離れてしまいます。 この背景は画像になっていますが、記事の長短に関わらず、 フッターまで伸ばすには（繋がるように）どうしたらよいでしょうか。 /* 全体の幅 -------------------------------------------------*/ #container{ text-align: left; width: 950px; padding: 0px; border-right:1px solid #ddd; border-left:1px solid #ddd; margin:0 auto; line-height: 110%; background-color: #fff; } /* 右カラムの幅 -------------------------------------------------*/ #right{ float : left; width : 280px; overflow: hidden; background-color: #eee; background-image : url(http://blog-imgs-35.fc2.com/w/e/b/weboook/gray3.png); background-repeat:repeat; } /* メインの幅 -----------------------------------------------*/ #main { float : left; width : 670px; margin:0px; padding: 0px; overflow: hidden; } ・ ・ ・ 中略 ・ ・ ・ /* サイド右側*/ .sidetitle{ color: #333; font-size:16px; font-weight : bold; text-align: left; background: url(http://blog-imgs-35.fc2.com/w/e/b/weboook/whiteline.png) repeat; padding: 5px 5px 6px 8px; margin : 0px 0px 0px 0px; } .sideblock{ font-size:12px; line-height: 150%; padding: 10px 5px 10px 5px; margin-bottom:15px; } .side ul { padding: 0px; margin : 0px; } .side li { list-style-type : none; display:block; text-align: left; font-size: 12px; color:#333333; line-height: 130%; } .side li a { padding:6px 5px 5px 10px; display:block; border-bottom:1px solid #ddd; } .side li a:hover{ background-image : url(http://blog-imgs-35.fc2.com/w/e/b/weboook/bgGray.png); background-repeat:repeat; text-decoration:none; padding:7px 4px 4px 11px; } よろしくお願いします。
- 締切済み
- ブログ
