ブログテンプレート作りで困っていることとは？
- ブログテンプレートを改造中に画面上部に謎の空白ができてしまいました。背景画像の位置指定もうまくいかず、ページトップへのリンクも上手く動作しません。
- 背景画像の位置指定を最上部にしたいのですが、いくつかのピクセル下から始まってしまいます。また、ページトップへのリンクを押すと背景画像が画面上部まで移動しません。
- 設定を間違っている可能性がありますが、余白を無くす方法やブログテンプレートを作成する際に便利なソフトウェアについても知りたいです。
- ベストアンサー
ブログテンプレート作り CSSで困ったことが・・・
既存のブログテンプレートを改造している最中なのですが 画面上部に謎の空白ができてしまって困っています background-position:center top !important; という風に背景画像を最上部に指定しても何故か数ピクセル下の所から背景が始まってしまいます。 ブログの記事下部によくある「ページトップへ▲」を押すと 最上部ではなく前述した数ピクセル下＝背景画像のはじまりが画面上部に持ってかれるので 何か根本的に設定を間違えてしまってるんだと思います。 この余白を無くす方法ってなにかあるでしょうか？ また別途ご質問したいのですが ブログのテンプレートをホームページビルダーの「かんたん配置モード」と似た雰囲気で 制作できるソフトってないのでしょうか？ どうかご回答の程よろしくおねがいします
- situmonyoudesu
- お礼率50% (1/2)
- ホームページ作成ソフト
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
!importantの意味知ってて使ってますか？？？ 著者の最重要宣言---CSS(カスケーディングスタイルシートのカスケーディングは、最も根幹の部分ですから御存知だと思いますが、ユーザーの最重要宣言されたスタイル、著者のスタイルより優先される（ユーザーの酸重要宣言よりは下位）という意味で、特定のページや要素だけスタイルを変えたいときなどに使用します。 例えば、すべてのページの背景はbody{background-image:url(画像1);}と指定してあるが、あるページだけ背景画像を変更したい時に、body{background-image:url(画像1)!important;}とすると、後出のスタイル指定で、同じ詳細度でbody{background-image:url(画像1);}と指定されていても上書きできないと言う意味です。 5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) 6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html ) は、スタイルシートを覚える時に最初に覚えて完璧に身につけておかなければならない要所です。 html,body{margin:0;padding:0;} body{background:url() center top no-repeat;} だけですむはずです。 HTMLは <body id="TOP">あるいは、<div class="header" id="TOP"> とでもしてけばよい。 ＞「かんたん配置モード」と似た雰囲気で制作できるソフトってないのでしょうか？ 最悪中の最悪なソフトを上げられても困りますね。 ホームページビルダーは、ワープロやDTPのようにデザインのためにHTMLを作成してしまうからプロから嫌われるのですよ。 HTMLは、タグを使って文書構造をマークアップする物、スタイルシートはその文書構造を利用して、プレゼンテーションを指定していくものです。(構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )) 下記に同様のデザインになるHTML/CSSをテンプレート代わりにあげておきますが、これだったらあなたでもデザインの変更はできるでしょう。★HTMLがきちんとできていないとダメだということ★ こんな、分かりやすいシンプルな物になるのです。 ★タブは＿に置換してあるので戻す。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済み ★幅広ディスプレイからスマホなど小さなディスプレイにも対応(ウィンドウ幅を変えてみること) ★印刷時は素の状態で印刷される(印刷プレビューで) [例] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="print"> <!-- html,body{margin:0 auto;} div.header,/* ヘッダ部分 */ div.section,/* 本文 */ div.footer{/* フッタ */ ＿width:80%;min-width:630px;max-width:900px;/* 幅(最大,最小) */ ＿margin:0 auto;padding:5px; } div.header{/* ヘッダの背景 */ background:url(./images/00.png) top center no-repeat; background-size:100%; /* CSS3 */ } div.section{ ＿position:relative;min-height:400px; } div.section h2,/* 本文(section)中のh2 */ div.section div.section{/* 本文(section)中のサブセクション */ ＿width:auto;min-width:0; ＿margin:5px 200px; } div.section div.section{ ＿min-height:200px; } div.section div.nav,/* 本文中のナビ */ div.section div.aside{/* 本文中の補足(aside) */ ＿width:190px;height:100%; ＿position:absolute;top:0; } div.section div.nav{left:0;} div.section div.aside{right:0;} /* わかりやすいように色分け */ div.header{background-color:yellow;} div.section{background-color:aqua;} div.section div.section{background-color:white;} div.section div.nav{background-color:lime;} div.section div.aside{background-color:fuchsia} div.footer{background-color:silver;} --> ＿</style> </head> <body> ＿<div class="header" id="TOP"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<div class="section" id="SECTION1"> ＿＿＿<h3>章タイトル</h3> ＿＿＿<p>・・・</p> ＿＿</div> ＿＿<div class="section" id="SECTION2"> ＿＿＿<h3>章タイトル</h3> ＿＿＿<p>・・・</p> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<h3>ナビ</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="#TOP">TOP</a></li> ＿＿＿＿<li><a href="#SECTION1">section1</a></li> ＿＿＿＿<li><a href="#SECTION2">secion2</a></li> ＿＿＿＿<li><a href="#FOOT">Footer</a></li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>補足</h3> ＿＿</div> ＿</div> ＿<div class="footer" id="FOOT"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
関連するQ&A
- ブログタイトルの背景に画像設定 （FC2）
FC2ブログの共有テンプレートからDW99さんの[aqua_3cpl] （http://preview.blog22.fc2.com/?style3=2111&index）をダウンロードしました。 このテンプレートでブログタイトルの背景に画像を設定したいと思いました。 そこで、スタイルシートに、「カスタマイズ・マニュアル」を参考にして、以下を挿入してみましたが、ブログを確認しても画像は表示されませんでした。 （画像パスには、画像のURLを入れています） 初心者にも分かるように、背景画像の設定方法を教えて下さい。 ↓これをスタイルシートに挿入してみましたが… /* ブログタイトル */ .header { background-image : url("画像のパス"); /* 背景画像の設定 */ background-repeat : repeat; /* 背景画像を横縦タイル状に並べる */ background-position : left top; /* 開始位置を画面左上に設定 */ background-attachment : fixed; /* 背景画像の位置を固定 */ }
- 締切済み
- ブログ
- ブログに背景壁紙画像を設定したいです。
壁紙素材を使ってブログの余白を飾りたいです。 ブログ初めて5か月の初心者なりに 色々調べスタイルシートを触ってみました。 使用しているテンプレート 【csstmp-smp-gray】 が 画面いっぱいな大きさなので まずは、画面上に余白が出来るように大きさを縮小かと思い 全体の幅 #container{ width: ●●●px; 」 や 左右の幅 #left { float : left; width : ●●●px; } などの数値を変更してみましたが テンプレートの大きさは変わらずでした。 body｛ ｝の中に background-image: url(壁紙背景素材URL); background-repeat: repeat-y; background-repeat: repeat; を挿入しました。 全体に素材画像が連続して貼られて ブログの文字も画像のうえにある感じで ダブっていて文字も見にくいです。 わたしが思い描くのは 壁紙画像の上にテンプレートが そのまま乗っかっている感じなんです。 テンプレートには画像は反映しないでいいんです。 （左右の余白部分に背景がある感じ） 使っているテンプレートは FC2ブログの共有テンプレートcsstmp-smp-grayです。 初心者ですができるでしょうか？ よろしくお願いします。
- ベストアンサー
- ブログ
- ＦＣ２ブログ の背景イメージについて
ＦＣ２ブログ の テンプレートを 実用的な物にしたのですが 背景イメージが セットアップできません。恐縮ですが よろしくどうぞ テンプレートのマスター body{ text-align: center; 以下 私が テンプレートに書き込みました background-image : url(“http://225takamo.blog.fc2.com/”); /* 背景画像の設定 */ ファイル名まで 書き込むのか？？ですが いづれも 芳しくなかった background-repeat : repeat; /* 背景画像を横縦タイル状に並べる */ background-position : left top; /* 開始位置を画面左上に設定 */ background-attachment : fixed; /* 背景画像の位置を固定 */ } ブログのｈｔｍ本体ですが <title><%blog_name> <%sub_title></title> </head> <body> <a name="top"></a> <BODY style="background-color:#8b8b8b;color:#000000;" background="blue7b.gif"> <div id="bodyid"> <div id="box"> <!-- バナー開始 --> と、成っています。 テンプレートと ｈｔｍ本体の関係が いまいちでして ｇｉｆ のファイル指定の方法が 悪いのかとも 思うのですが・・・・
- ベストアンサー
- ホームページ作成ソフト
- gooブログ(アドバンス)のテンプレート編集(CSS)について
テンプレの背景を変えてやろうと、以下のようにＣＳＳを編集しました。 －－－－－－－－－－－－－－－－－－－－－ /* ページ全体共通指定 */ /* ページ全体の背景と余白と各メニューリスト以外の文字 */ BODY { background-image:url("http://blogimg.goo.ne.jp/user_image/5f/9c/**********.jpg"); color:#009900; margin:0pix; } －－－－－－－－－－－－－－－－－－－－ すると、コメントの画面の背景は変わりましたが、肝心のブログ画面の背景が変わりません。何がおかしいのでしょうか？ ご教授よろしくお願い致します。
- 締切済み
- ブログ
- ｃｓｓ ブログタイトル位置の動かし方
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; } --------------------------------------------------------------- ※ＣＳＳ初心者です。 よろしくお願いいたします。
- ベストアンサー
- ブログ
- ＦＣ２ブログの背景に写真を使いたい
ＦＣ２ブログを使用して まだ１ヶ月位の初心者です ただ、ブログは初心者ですが パソコンとネットの知識は中級と自己判断してます それでＯＳはビスタで ブラウザはＦｉｒｅｆｏｘ３.５なんですが ブログの背景に、現在はテンプレートを使用してます しかし、ここに自分の写真を入れられる事を知って 変更したいと考えました ただ、入れるとしても 画像の大きさから考えて １枚で…は厳しいと思うんで、２～３枚を横に並べて 設定しようと思います そこで聞きたいんですが 下記ＨＰで変更方法の解説を見ました 『背景の色を変更』 http://blog.fc2.com/custom_manual/#m004 そこには、こういう↓書き方で解説してましたが -------------------------------------------------------------------------------- body { background-image : url("画像のパス"); /* 背景画像の設定 */ background-repeat : repeat; /* 背景画像を横縦タイル状に並べる */ background-position : left top; /* 開始位置を画面左上に設定 */ background-attachment : fixed; /* 背景画像の位置を固定 */ ------------------------------------------------------------------------------- これが私のブログです↓ ------------------------------------------------------------------------------- body { background-color: #3F3F3F; color: #333333; font-family : Verdana, "ＭＳ Ｐゴシック", sans-serif; font-size: x-small; background-image: url(http://blog-imgs-41.fc2.com/t/m/p/tmpllabo/tmpl013_bg.jpg); background-repeat: repeat-x; background-attachment: fixed; background-position: center top; } ------------------------------------------------------------------------------------- 解説から考えると、私のブログ内の 「background-image: url(http://blog-imgs-41.fc2.com/t/m/p/tmpllabo/tmpl013_bg.jpg);」 内の“http://blog-imgs-41.fc2.com/t/m/p/tmpllabo/tmpl013_bg.jpg” の部分に写真のＵＲＬを入れれば良いんでしょうか？ それと、以前、私が読んだ本の中には 「写真は予め、タイトル部分の大きさ７８０×２００ピクセルに 合わせてリサイズしよう」 と書いてありました しかし、添付した写真が私の現背景写真なんですが 枠で囲んだ部分が、そのサイズなんでしょうか？ もし、そうだとしたら このサイズ、どうやって測るんでしょうか？ ちなみに右クリックでプロパティを見ようとしても 画像では無いからだと思いますが 右クリックの項目にプロパティの項目が出て来ません もし違うとしたら、どの様に解釈すれば良いんでしょうか？ 又、何か気を付ける事は、あるでしょうか？ 宜しく御願いします
- 締切済み
- ブログ
- gooブログオリジナルテンプレートの使い方
現在gooブログ（有料版）を使っています。テンプレートもカスタマイズ用のＣＬアドバンステンプレートを選択し、ＣＳＳを使ってオリジナルの写真を使ったテンプレートに変更したいのですが、使い方がわかりません、使い方には1.タイトルの背景に画像を表示するには CSS編集エリアから以下の行を見つけます。 #title-banner-body{background:url("");height:130px;} 「background:url("");」の（""）内に、画像のURLを記入します。 記述例：#title-banner-body{background:url("http://blogimg.goo.ne.jp/user_image/IMAGETITLE.jp");height:130px;}と書いてあるのですが、見つかりません、どなたか、テンプレートの変更の仕方詳しくわかる方はいませんでしょうか、どうか教えてくださいお願い致します。
- 締切済み
- ブログ
- html/css について質問です。
現在、htmlとcssを勉強しながら、トップページのコーディングしています。 以下の処理を行っています。 〇一番上に[幅136px高さ34px]のヘッダ画像を横方向にリピートして、background-attachmentはscrollで固定。上や左や右は余白なしにしたい。 〇一番下に[幅168px高さ42px]のフッダ画像を横方向にリピートして、background-attachmentはfixedでブラウザの下部分に常についてくるようにしたい。 〇javaScriptでランダムにトップの画像を表示している。 しかし、３点問題があります。 ●一番上の画像について、background-position: left bottom;にしても、ブラウザ等で確認してみると、 上や左に5px程度の余白(後ろの背景画像が隙間から見えている)ができてしまいます。 marginやpaddingを追加して0にしても、余白は埋まりません。余白を埋めてブラウザの上や左を埋めるにはどうすればよいでしょうか？ ●フッダの画像が、下にいけば消えてしまいます。CSSでheight: 42px;という設定をしているのですが、 この範囲がブラウザを大きくすると消えて見えなくなります。 だからといって、heightを設定しないと全くフッダ画像が表示されなくなります。消えずに常に表示されるようにするにはどうすればよいでしょうか？ ●またjavascriptで背景画像を表示させているにも関わらず、フッダ画像やヘッダ画像を背景画像のような記述でコーディングしてしまっています。これは普通の画像を右方向へリピートさせる方法がわからなかったため、background-repeat: repeat-x;というコードを書いてしまっています。このようなコーディングはやはり適当ではないでしょうか？ どなたかご指導お願いします。 [html] <body> <SCRIPT language="JavaScript"> bgc = new Array(); bgc[0] = "url(../image/bg1.jpg)"; bgc[1] = "url(../image/bg2.jpg)"; bgc[2] = "url(../image/bg3.jpg)"; bgc[3] = "url(../image/bg4.jpg)"; bgc[4] = "url(../image/bg5.jpg)"; n = Math.floor(Math.random()*bgc.length); document.body.style.backgroundImage = bgc[n] </SCRIPT> <div id="container"> <div id="top_header"></div> <div id="top_footer"></div> </div> </body> [css] #container{ width:100%; height:100%; } #top_header{ background-image: url(../image/top_header.gif); height: 34px; background-position: left top; background-repeat: repeat-x; background-attachment: scroll; z-index: 1; } #top_footer{ background-image: url(../image/top_footer.gif); height: 42px; bottom: 0; background-position: left bottom; background-repeat: repeat-x; background-attachment:fixed; z-index: 2; }
- ベストアンサー
- CSS
- GOOブログテンプレート編集
はじめまして。カスタム > CLアドバンス のテンプレートを使用してタイトルに画像を入れたいのですが、 /*-- ↓タイトルバナーに画像を入れる場合は、下記のコメントをはずし、画像URLを指定する --*/ /*-- background-image:url(/user_image/xx/xx/xxxx.jpg); background-position: center top; background-repeat:no-repeat; --*/ の部分の(/user_image/xx/xx/xxxx.jpg);に画像のアドレスを入れるのでしょうか？？ サッパリ分からず何度かトライしてみましたがプレビューしても反応ありません。 出来れば詳しく教えて頂きたいので宜しくお願いします。
- 締切済み
- ブログ
- FC2ブログのテンプレートについて
FC2ブログのテンプレートを探しています。 ３カラムで３プラグインが上部にあるもの 明るい系 プラグインと記事の背景が白色。 記事に丸みを帯びた枠があるもの。（記事一つ一つが区切ってあり境目がわかりやすいものでもいいです。） 近いものでもいいのでよいものがあれば教えてください。 ご回答よろしくお願いします。
- ベストアンサー
- ブログ
お礼
何から何まで回答して頂き本当にありがとうございます！ ド素人なのでビルダーがいいと思ってしまっていましたが プロの方から見たらそういう訳ではないのですね； 前述の通り無知もいいところなので!importantどころかCSSの意味も理解しておりませんでした； やっていることも何もかもどこかにあったものをコピーペーストしただけという有り様でした。 でもそんな中丁寧に解説していただけた上に活用できそうなCSSまで載せて頂けるとは・・・非常に助かります！ 何度も読み返して理解度を高めた上で、もう一度再チャレンジしてみようと思います！