画像の位置を上に
- livedoorのブログ使ってカスタマイズで題名のところに背景を入れたのですが下になってしまいます。
- metallicaのジャケットの上のロゴの方を出したいのですがよくわからなくて。
- ブログタイトルのコードはdiv.blog-title-outerの幅を780px、高さを350pxに設定し、背景に好きな画像を表示させるものです。
- ベストアンサー
画像の位置を上に
livedoorのブログ使ってカスタマイズで題名のところに背景を入れたのですが下になってしまいます。 metallicaのジャケットの上のロゴの方を出したいのですがよくわからなくて。 ブログタイトルのコードです。 div.blog-title-outer { width: 780px; height: 350px; background: url(好きな画像) no-repeat left bottom; margin: 0px 0px 0 0; text-align: center; } div.blog-title-outer-2 { padding: 15px 10px 5px 10px; } div.blog-title-outer-3 { } h1#blog-title { margin: 40px 350px 0px -100px; padding: 00px 00px; font-size: 160%; font-weight: bold; } div.blog-description-outer { } p#blog-description { margin: 0px 630px 0 0; padding: 0; line-height: 135%; font-size: 80%;
- metaryuca
- お礼率24% (11/45)
- その他（生活・暮らし）
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
background: url(好きな画像) no-repeat left bottom; を background: url(好きな画像) no-repeat left top; にしてみたらどうですか？ ご参考まで。
関連するQ&A
- ブログ更新ごとに変わる背景
についてコードを教えてください。ブログタイトルの背景を更新するたびに変わるようにしたいのですがコードをどのようにすればいいのかわからなくて。 今のブログタイトルコードです↓ div.blog-title-outer { width: 780px; height: 255px; background: url(好きな画像) no-repeat left top; margin: 0px 0px 0 0; text-align: center; } div.blog-title-outer-2 { padding: 15px 10px 5px 10px; } div.blog-title-outer-3 { } h1#blog-title { margin: 40px 350px 0px -100px; padding: 00px 00px; font-size: 160%; font-weight: bold; } div.blog-description-outer { } p#blog-description { margin: 0px 630px 0 0; padding: 0; line-height: 135%; font-size: 80%; 初心者ですよろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- タイトル部分を画像だけにするには？
DTIブログを使っています。 タイトル部分が、背景画像の上にテキストのブログタイトルと紹介文があって、ブログタイトルがトップにリンクされているんですが、 それをカスタマイズでテキストのブログタイトルと紹介文を消し、背景画像をトップにリンクさせるにはどうすればいいでしょうか？ ヘッダー部分のHTMLは <div id="header"> <h1><a class="white_link" id="page_top" name="page_top" href="<%url>" title="<%blog_name>"><%blog_name></a></h1> <p id="introduction"><%introduction></p> </div> ヘッダー部分のスタイルシートは /*ヘッダー*/ #header {width:800px; height:160px; margin:0px 10px 5px 10px; background :url(http://12.dtiblog.com/1/11010510escape/********.jpg) no-repeat; /* ### 画像データ使用 ### */} h1 {position:relative; margin:0px; padding:28px 10px 10px 18px; font-size:30px; font-weight:bold; color:#ffffff; line-height:100%;} #introduction {margin:5px 10px 10px 30px; font-size:16px; text-align:left; font-weight:bolder; color:#ffffff; line-height:100%;} よろしくお願いします！<m(__)m>
- ベストアンサー
- ブログ
- 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のカスタマイズについて
ライブドアブログを最近始めたのですが、 素人にも関わらずカスタマイズしたいと思っています。 タイトル部分を中央に揃えたいと思っているのですが どのようにしたらいいかさっぱりわかりません。 カスタマイズのページをコピペします。 よろしくお願いします。 /* ブログのヘッダー、タイトル、説明 ----------------------------------------------- */ #blog-header { margin-bottom: 40px; position: relative; } #blog-header-inner {} #blog-header-image { height: 400px; width: 100%; background-color: #287cba; background-image: -webkit-linear-gradient(#57bef5 0%, #287cba 100%); background-image: -moz-linear-gradient(#57bef5 0%, #287cba 100%); background-image: -ms-linear-gradient(#57bef5 0%, #287cba 100%); background-image: -o-linear-gradient(#57bef5 0%, #287cba 100%); background-image: linear-gradient(#57bef5 0%, #287cba 100%); } #blog-title { font-size: 40px; font-weight: bold; line-height: 1.4; margin: 30px 0; } #blog-title a { color: #000; } #blog-description { color: #979797; font-size: 14px; font-weight: normal; line-height: 1.6; margin: 30px 0; } #blog-description a { color: #979797; }
- 締切済み
- SE・インフラ・Webエンジニア
- FireFox3.5.3でfont-familyが効きません
FireFox3.5.3で全くfont-familyが効かないのですが、 何か設定があるでしょうか。 使ったhtml --------------------------------------------------------------------------- <html> <head><title>書体テスト</title></head> <body> <div style="font-size:120%;padding:40px 10px 5px 10px;font-weight:bold;line-height:170%;font-family:'ＭＳ Ｐ明朝';"> フォントのテスト </div> <div style="font-size:120%;padding:40px 10px 5px 10px;font-weight:bold;line-height:170%;font-family:'ＭＳ 明朝';"> フォントのテスト </div> <div style="font-size:120%;padding:40px 10px 5px 10px;font-weight:bold;line-height:170%;font-family:serif;"> フォントのテスト </div> <div style="font-size:120%;padding:40px 10px 5px 10px;font-weight:bold;line-height:170%;"> フォントのテスト </div> </body> </html> --------------------------------------------------------------------------- 各種ブラウザで確認しましたが、FireFoxだけ全くfont-familyが効きません。テスト結果は添付のとおりです。 FireFoxの設定は、オプションのコンテンツ・フォントと配色は「メイリオ」で詳細設定は以下のとおり プロポーショナル：ゴシック 明朝体：MS P明朝 ゴシック体：メイリオ 等幅：メイリオ よろしく、お願いします。
- ベストアンサー
- HTML
- ページの一番上にできた余分な余白の消し方
ページの一番上に800×100の画像を用意し、それを背景画像として設定。 その上に<h1>のタイトルを表示しようとすると、 背景画像の上に無駄な余白ができてしまいます。 何か間違えているのでしょうか？この余白の消し方を教えてほしいです。 よろしくお願いいたします。 <html> <head> <title></title> <style type="text/css"> body { margin: 0; padding: 0; text-align: center; background-color: #000; color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; text-align: center; } div#container { width: 800px; background-color: #ffffff; text-align: left; margin: 0 auto; padding: 0; } div#header { width: 800px; height: 100px; background-image: url(image/sample.jpg); background-repeat: no-repeat; padding: 0; margin: 0; } h1 { padding-top: 15px; padding-right: 0; padding-bottom: 15px; padding-left: 0; font-size: 15px; font-weight: normal; line-height: 15px; margin-top: 30px; margin-right: 0px; margin-bottom: 0; margin-left: 0; color: #000; } div#mainContent { padding: 5px 15px 0 15px; } </style> </head> <body> <div id="container"> <div id="header"> <h1>テスト</h1> </div> </div> <div id="mainContent"></div> </body> </html>
- ベストアンサー
- HTML
- 幅を広げたいのに文字が隠れ（？）る
下記のように分かれているページがあります。 ┌───────┐ │へっだ │ ├─┬───┬─┤ │め│めいん│※│ │に│ │ │ │ゅ│ │ │ ├─┴───┴─┤ │ふった │ └───────┘ 『※』の部分に文字などもなく不自然にスペースができています。 『めいん』の幅以上の文字を入れると、文字が隠れてしまいます。 『※』の部分まで『めいん』を伸ばし、2カラムにしたいのですが、 他所の幅を変更するだけでは解決できず、質問をさせていただきました。 質問部分のコードは下記の通りです。 （ヘッダ・フッタ省略） 【HTML部分】 <!-- メインコンテンツ --> <div id="container"> <div id="contents"> ～省略～ </div> <!-- メインコンテンツ終わり --> <!-- メニュー --> <div id="menu"> ～省略～ </div> <!-- メニュー終わり --> </div> <!-- コンテンツ終わり --> 【CSS部分】 /*---------- コンテンツ ----------*/ #container { width: 1000px; overflow: visible; margin: 0px; padding: 6px; background-color: #ffffff; } /*---------- メインコンテンツ ----------*/ #contents { float: right; margin: 0; padding: 5px 10px 5px 0; font-size: 12px; line-height: 180%; width: 1000px; letter-spacing: 1px; } #contents #pannavi { margin: 0; padding: 0 0 5px 0; font-size: 12px; } #contents h2 { height: 27px; margin: 0 0 4px 0; padding: 8px 0 0 20px; font-size: 12px; color: #333333; background-image: url(img/titlebar.gif); background-repeat: no-repeat; } #contents h3 { margin: 12px 5px 10px 6px; padding: 8px 10px 5px 13px; line-height: 110%; font-size: 13px; color: #444444; border-left: solid 5px #aaaaaa; background-color: #eeeeee; } #contents h19 { margin: 12px 5px 10px 6px; padding: 8px 10px 5px 13px; line-height: 110%; font-size: 13px; color: #444444; border-left: solid 5px #eeeeee; background-color: #eeeeee; } h4,h5 { font-size:18px; font-weight:bold; color:#7e603b; } h7 { font-size:10px; font-weight:lighter; color:#7e603b; } h8 { font-size:13px; font-weight:bold; color:#7e603b; } h9 { font-size:13px; font-weight:bold; color:#cccccc; } h10 { font-size:13px; font-weight:bold; color:#000000; } h11 { font-size:18px; color:#000000; } #contents p { margin: 3px 0 3px 0; padding: 0 5px 0 5px; line-height: 180%; font-size: 12px; } #contents a { color: #c9171e; font-size: 12px; } #contents a:hover { color: #e83929; font-size: 12px; } #contents img.head_photo { margin: 0 0 10px 50px; } #contents img.photo { float: left; margin: 10px 20px 0 0; } #contents img.picture { margin: 0 10px 10px 0; float: left; } #contents p.photo { margin: 0 0 20px 0; padding: 0; } table#t01 { border: solid 1px #999999; border-collapse: collapse; } td#t01 { border: solid 1px #999999; border-collapse: collapse; } td#head { padding: 7px 6px 5px 10px; border: solid 1px #999999; border-collapse: collapse; } table.table_line { border-collapse: collapse; margin : 10px 0 0 0; } td.table_line { border-collapse: collapse; padding : 9px 14px 7px 14px; border-bottom: solid 2px #fffffc; } どうか、ご教授お願いいたします。
- ベストアンサー
- CSS
- IE８での段落のズレについて
IE７では正常（自分が思うように）に表示してくれますが、 IE８では互換モードにしないと大きなタイトル文字の前に１つ 段落が出来てしまい、２行分のタイトルが４行になってしまい、 タイトル画像からはみ出てしまいます。 （下記の例ですと、「アウトドア」の表示が空白の行の下に来ます。 また、「大好き！」の前にも空白の行があり、文字自体も タイトル画像からずれて表示されてしまいます） 色々チェックしたのですが自分では分からなかったので、どなたか 教えて下さい！ ＜ＣＳＳ＞ body {background-color:#000099;} div#box {width: 680px; margin-left:auto; margin-right:auto; background-color:#ffffff; padding-top:10px;} div#header{background-color: #999999;width:660px;height:290px; background-image: url(./boad.jpg); background-repeat: repeat; margin-right:auto; margin-left:auto; padding-top:10px; } div#header h1 {font-size: 12px; color:#ffffff; padding:0px 10px 0px 10px; font-weight:bold;} div#header h2 {font-size:12px; margin-left:20px; font-weight:bold; color:#ffff00;} div#header h3 {font-size:20px; margin-left:30px; color:#ffffff;} div#header h4 {font-size:4.5em; color:#dddddd; font-weight:bold; margin-left:80px; line-height:100%; } div#header h5 {font-size:4.5em; color:#dddddd; font-weight:bold;margin-left:280px; line-height:100%; } code.main {text-align:left; } .p1 {font-size:15px; color:#333333; } div#footer {width: 680px;margin-top: 50px; } address {font-size: 0.75em; text-align: center; font-style:normal; padding-bottom:20px; color:#cccc00;} <HTML ～head以降> <body> <div id="box"> <div id="header"> <h1> 釣り キャンプ 車 etc </h1> <h2>多趣味な男のこだわり日記</h2> <h4>アウトドア</h4> <h5>大好き！</h5> </div> <p><code class="main p1"> 皆さんはどんな趣味をお持ちですか？<br> 私は沢山の趣味を持っています。<br><br> そのためいくら働いてもお金は溜まりません・・・・・<br> でも、沢山の趣味を自分なりに楽しむのは<br> ステキな事だと思っています。</code></p> <div id="footer"> <address>多趣味研究会, All rights reserved.</address> </div> </div> </body> </html> 宜しくお願い致します。
- ベストアンサー
- HTML
- 【CSS】bodyとbottomの画像がかぶる
自社ブログの記事部分のテーブルデザインを変更しようと思ったのですが bodyの画像がbottomの画像にはみ出て http://image.blog.livedoor.jp/ura_sselect/imgs/5/7/575b75cb.png ↑のように表示されて困っています。 CSSを勉強し始めたばかりでいらないところまでいじってしまっていると 思いますが現在のCSSの状態は以下の通りです。 関係ないかもしれませんが、ボトムの画像高さは65pxです。 よろしくお願いします。 .datetop{ background:url(トップ画像) no-repeat; height:54px; margin-bottom:-12px; } .fullbody{ background:url(ボディ画像) repeat-y; margin-bottom:0px; } .datebody{} h2.date{ margin:0px 23px 0; font-size:12px; font-weight:normal; color:#d8b8c4; } .blogbodytop{} .blogbody{ margin:5px 23px 30px; text-align:left; } .titlebody{ paddding:5px 0; } h3.title{ line-height:137%; font-size:16px; font-weight:bold; color:#f52a7a; } .main ,.mainmore{ margin:10px 0 20px; line-height:147%; font-size:13px; height:1%; } blockquote ,pre{ border-top:1px dotted #575757; border-bottom:1px dotted #575757; padding:17px 10px; margin:17px 0; text-align:left; color:#ccc; } .pict{ margin:0 5px 5px 0; } /* related articles */ div.related-articles{ margin: 25px 10px 0; } div.related-articles h3{ margin: 0 0 10px; padding: 0; font-size: 14px; color: #f52a7a; } div.related-articles ul{ list-style: none; margin: 0; padding: 0; line-height: 1.2; } div.related-articles ul li{ background: url(http://parts.blog.livedoor.jp/img/cmn/dotw.gif) no-repeat 0 50%; padding: 0 0 5px 9px; margin-left: 5px; font-size: 12px; } .portal-links{ font-size:12px; text-align:right; margin:5px 8px 12px; color:#d8b8c4; } .portal-links a{} .posted{ margin:5px 8px; text-align:right; line-height:150%; font-size:12px; color:#d8b8c4; } .clipbutton{ border:none; } a.continues ,.posted a ,.menu a ,.nextpage ,.commentttl a ,.trackbackttl a{} #ad{ margin:25px 0 0; text-align:center; zoom: 1; } .blogbodybottom{ background:url(ボトム画像) no-repeat; padding:65px 0 -20px; } .dateend{} .nextpage{ text-align:right; margin:5px 20px; font-size:12px; }
- ベストアンサー
- CSS
- EXCELでHTMLのタグの入ったセルを結合したい
下記のHTMLのタグが入ったセルと画像URLのセルを結合したいのですが、＆などで結合すると ダブルクォーテーションが倍くらいに増えてHTMLのタグとして機能しません。 どうやって結合させるのがいいのでしょうか？ =A1(HTMLのタグ）＆A2(画像URL）＆A3（HTMLのタグ） <body> <div style="WIDTH: 100%; TEXT-ALIGN: center"> <div id="wrapper" style="FONT-SIZE: 23px; FONT-FAMILY: Arial, Helvetica, sans-serif; WIDTH: 860px; COLOR: #000; TEXT-ALIGN: left; MARGIN: 0px auto"> <h1 style="FONT-SIZE: 38px; HEIGHT: 60px; WIDTH: 850px; COLOR: #ffffff; PADDING-LEFT: 10px; MARGIN: 0px; LINE-HEIGHT: 60px; BACKGROUND-COLOR: #336600">Picture</h1> <img src="画像URL"> <div class="sub_tit" style="FONT-SIZE: 35px; HEIGHT: 40px; WIDTH: 850px; FONT-WEIGHT: bold; COLOR: #ffffff; PADDING-LEFT: 10px; LINE-HEIGHT: 40px; BACKGROUND-COLOR: #336600"> Description </div><br><font size="5">
- ベストアンサー
- HTML
お礼
本当にありがとうございます☆できました♪