痔になりやすい生活習慣とは?

WordPressでテーマを自作しているのですが、ヘッダー上部に余白ができてしまいます。
調べてみると、多くの場合は
http://hello-design-world.com/2011/04/wordpress3 …
のように管理バー関連の設定に問題があったようなのですが、私の場合は管理バーの表示を外しても直りません。

以下のようなソースでやっているのですが、何が原因かわかる方いたら教えてください!
※まだ作成途中なので、ファイルは以下の2つだけです。

----------------------php---------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/TR/xhtml/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

</head>
<body>


<!-- コンテナ -->
<div id="container">


<!-- ヘッダー -->
<div id="header">
<h1><a href="<?php echo home_url(); ?>">
<?php bloginfo('name'); ?></a></h1>
<p id="desc"><?php bloginfo('description'); ?></p>
</div>
<!--ヘッダー終わり -->


<!-- コンテンツ -->
<div id="content">
<?php if(have_posts()): while(have_posts()):
the_post(); ?>

<div class="post">
<h2><a href="<?php the_permalink(); ?>">
<?php the_title(); ?></a></h2>

<p class="postinfo">
<?php echo get_the_date(); ?> <?php the_time(); ?>
|
カテゴリー:<?php the_category(', '); ?>
</p>

<?php the_content(); ?>

</div>


<?php endwhile; endif; ?>
</div>



</div>


</body>
</html>



----------------------css---------------------
/*
Theme Name: Testtheme
Theme URI:
Description: テストテーマ
*/


/* コンテナ */
div#container {
width: 1000px;
margin-right: auto;
margin-left: auto;
}



/* ヘッダー */
div#header{background-image: url(header.jpg);
margin-top: 0px;
margin-left: 0px;
margin-bottom: 20px}

div#header h1{font-size: 1.875em;
font-weight: bolder;
padding: 10px 0px 0px 10px;
margin-top: 0px}

div#header h1 a{text-decoration: none;
color: #ff8c00}

div#header p#desc{font-size: 1em;
color: #ffffff;
font-weight: bolder;
padding: 0px 0px 10px 10px}


/* 記事 */
div.post {padding: 15px;
margin-bottom: 30px}

div.post h2{background-color: #1e90ff;
font-size: 1.3em;
padding: 10px;
margin: 0}

div.post h2 a{text-decoration: none;
color: #ffffff}

div.post p{font-size: 0.875em;
line-height: 1.6;
margin-top: 10px}

p.postinfo{color: #0c8bcd;
text-align: right;
margin: 20px 0 0;
clear: both}

p.postinfo a{color: #0c8bcd}

このQ&Aに関連する最新のQ&A

A 回答 (3件)

初期値のリセットCSSを忘れてるのでは?



html,body{ margin:0; padding:0;}
    • good
    • 2
この回答へのお礼

ありがとうございます!
その通りでした!!

お礼日時:2012/06/28 22:12

あ、失礼しました。



管理バーのことはご存知でしたね・・・。
#wpadminbar{
display:none;
}

で管理バーのところが消せると思います。
    • good
    • 0
この回答へのお礼

いろいろ親切にありがとうございました!

お礼日時:2012/06/28 22:12

どうも。


おはようございます。


貼ってもらったソースはindex.phpなのでしょうか?
category.phpやsingle.phpなどでも同じようなことが言えるのですが、必ずWordPressにはwp_head()とwp_footer()を入れないといけません。

> ヘッダー上部に余白ができてしまいます。
ログイン状態であなたのサイトを見たらおそらくあいているのでしょう。
表側(ログインしていない私側)は余白はついていないように思えます。
これは、上部にWordPress側でCSSが読み込まれてはいて、管理バーの高さ分高さが取られているのですが、
肝心の管理バーが上に出ていないのではないかなと思います。

管理バーを出すにはwp_footer()を記述しないといけません。


■wp_head()の入れるところ
<head>内に記述します

~略~
<head>
<?php wp_head(); ?>
</head>
~略~


■wp_footer()の入れるところ
</body>手前に記述します
<?php wp_footer(); ?>
</body>
</html>

■上記に関する記事
http://begi.net/blog/20100114/148
http://eienmukyu.com/2012/04/wphead-wordpress-th …
http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0% …
http://eienmukyu.com/2012/04/wphead-wordpress-th …
http://ja.forums.wordpress.org/topic/562
    • good
    • 1

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qヘッダーの上にほんのわずかに隙間ができる

ウェブサイト製作の練習をしております。解決できないことがあり、質問させていただきます。
ヘッダーボックスにmargin topを設定していないにも関わらず、ヘッダーボックス上にほんのわずかに隙間ができてしまいます(1~2px程度です)。ヘッダーボックスにCSSで設定しているのは
margin-left:auto;
margin-right:auto;
width:1000px;
のみです。
bodyにはなにも設定しておりません。ちなみにIEのバージョンは8でございます。宣言は・・・
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="&rdquo;Content-Type&rdquo;" content="&rdquo;text/html;" charset="utf-8&rdquo;" />

でございます。教えてgooのトップ(http://oshiete.goo.ne.jp/)も一番上("質問&回答 (Q&A) コミュニティ - 教えて!goo"のところです)は画面上部にぴったりくっついていますよね。どうすればこのような形にできるのでしょうか?どなたかアドバイスをお願いします。

ウェブサイト製作の練習をしております。解決できないことがあり、質問させていただきます。
ヘッダーボックスにmargin topを設定していないにも関わらず、ヘッダーボックス上にほんのわずかに隙間ができてしまいます(1~2px程度です)。ヘッダーボックスにCSSで設定しているのは
margin-left:auto;
margin-right:auto;
width:1000px;
のみです。
bodyにはなにも設定しておりません。ちなみにIEのバージョンは8でございます。宣言は・・・
<!DOCTYPE htm...続きを読む

Aベストアンサー

<body>タグの属性に topmargin="0" を指定してみて下さい。
隙間がなくなると思います。

同様に<body>タグに leftmargin="0" なんて指定したら左にピタっとくっついたページになりますよ^^

<!-------------------------------------------------------->

<html>
<head>
<title>詰めテスト</title>
</head>
<body topmargin="0">
<div style="border:1px solid blue">上詰めテスト</div>
</body>
</html>

<!-------------------------------------------------------->

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

QCSS、width100%でもできる余白

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<div id="logo"></div>
<div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
</div>
</div>
<div id="contents"><div class="centerbox">contents</div></div>

<div id="footer"><div class="centerbox">footer</div></div>

</body>
</html>


CSS

body{color:white; width:100%;}
.centerbox{width:500px; height:100%;}
a:hover{background-color:red;}

/*base layout*/
#header{width:100%; height:auto; text-align:center; background-color:black;}
#lang{text-align:right;}
#lang li{list-style:none; display:inline; margin-left:10px}
#logo{float:left; width:150px; height:80px; background-color:white;}
#menu{text-aign:right; margin-top:50px;}
#menu li{list-style:none; display:inline; margin-left:10px}
#contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
#footer{width:100%; height:100px; text-align:center; background-color:black;}

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<di...続きを読む

Aベストアンサー

スタイルシートの書き始めに、
html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
 これは常に入れておきましょう。

 なお、今後のために・・・どの部分が影響しているかは
*{border:solid 1px red;}
を入れてみると、わかりやすいです。

また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。

Q上部の余白を消すには?

上部の上の部分の余白を消したいのですが
イマイチソースの使い方が分かりません。
TOPマージンを使えばよいとの事ですが
どのように使えばいいのでしょうか?

そのページには画像があって、
画像をなるべく上部に載せたいのです。

Aベストアンサー

>テーブルで囲った画像にでは余白を消して
>一番上部に持って行くことができません。

<TABLE>タグのCELLSPACINGとSELPADDINGを0にすれば余白は消えますよ。

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Q訪問済のリンク色を変えない方法

テキストリンクをクリックすると、次から色が変わりますよね?クリック前とクリック後と一緒の色にしたいんです。前に教えてもらったんですが、ページ内の全てのリンクの色が同じ色になってしまったんですが、そういうものなんですか?文字別に色を変えて指定することはできますか?どういうタグを入れたら良いか教えて下さい。

Aベストアンサー

BODYタグをいじります。
<body link="クリック前の色" vlink="クリック後の色">
のようにします。色の部分は#3333FFとか#FFFFFFのように
お好みの色をいれます。

文字別に色を指定するときも
<a href="link_saki.htm"><font color="#FF0066">リンク</font></a>
のように<a>の中に<font color>で指定すれば可能です。

Qimgタグは何で囲むのが良いか

皆さんはimgタグは何で囲んでいますか?

<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<img src="xxxx.jpg" alt="">
</div>

例えばこういうような時に、何で囲むべきかというのをいつも迷います。

ブロック要素で囲むべきである、というのは何となく認識していますが、ここをdivで囲むのも何か違うような気がするし、
pで囲むのも「段落」と見なせるような画像でないと何となく気持ち悪いです。
最近はaltのある画像は「これは段落だろう」と自分を納得させてpで囲み、
altを空にしているものは囲まずにそのまま置いたりしています。
レイアウト上、ブロック要素が必要になった時にはdivで囲んでみたり…。

私はイメージ的な画像(情報としては必要ない画像や、直前のテキストとかぶっている画像文字等)にはあえてaltは付けずに空にすることが多いので、ちょいちょいこういう事で迷います。

スマートなやり方をご教授ください。

Aベストアンサー

>「alt="---------"」と入れるくらいなら「alt=""」の方が良いのではないでしょうか?
 そうです。そもそも、文字(内容)を画像に置き換えてしまうのは、感心できない手法ですが、味気ないHRの代わりに画像ラインを入れる手法はかっては行われていました。もしHRの代わりに画像を入れるのでしたら、このように書くべきと言っているのである---画像に置き換えて記述するのは誤りと言うことを言いたいのです。

>この写真にaltで候補者名を入れてしまうと、画像が見れない環境の人に対しては候補者が2回表示(もしくは読み上げ)されることになります。
 その場合は、
・altをalt=""としておく
・alt="山田太郎の正面からの写真"
 あるいは、alt="本人の写真"
 と画像が表示されない人も画像から得られるはずの情報をいれておく。

 になるでしょうね。

<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<img src="xxxx.jpg" alt="">
</div>
 これは、書きましたが、Validator上はエラーになりませんが、やはり間違いなのです。この場合、ここに仮想的なブロックが存在するとしてDOMを構成しますが、その処理はHTML4以前は決まった解釈が定められていなかったために解釈上差が出てしまう可能性があります。

気が進まないが
<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト<br>
<img src="xxxx.jpg" alt="">
</p>
</div>

とか
<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<p><img src="xxxx.jpg" alt=""></p>
</div>
それは、その画像がどのような段落にあるのかによって判断します。DIVはDIVで目的・用途があります。文法上のエラーを回避するため、単にデザインのためのような使い方は極力避けるほうがよいと思います。それは、突き詰めればHTMLで文書構造を正確にマークアップしすること、最終的にメンテナンスしやすい結果になるからです。

 <p class="figure main">
  <img src="" width="" height="" alt="麓から見た紅葉の城山">
 </p>
 <p>紅葉も終盤を迎えた先週、子供達を連れて近所の城山にハイキングに言ってきました。</p>
 <p class="figure sub">
  <img src="" width="" height="" alt="玄関で見送る妻">
 </p>
 <p>
  妻は、このような山歩きなど、実利がないものには付き合ってくれない。昔は・・
 </p>
このように書かれていると、後で写真を一枚追加したいときに前後を見ればどのようにマークアップすればよいかわかりますし、スタイルシートを書く際も、
*.figure{margin:10px;text-align:center;}
*.figure.sub{float:right;}
*.figure img{padding:5px;border-shadow:10px 10px 10px rgba(0,0,0,0.4);}
とか・・

>「alt="---------"」と入れるくらいなら「alt=""」の方が良いのではないでしょうか?
 そうです。そもそも、文字(内容)を画像に置き換えてしまうのは、感心できない手法ですが、味気ないHRの代わりに画像ラインを入れる手法はかっては行われていました。もしHRの代わりに画像を入れるのでしたら、このように書くべきと言っているのである---画像に置き換えて記述するのは誤りと言うことを言いたいのです。

>この写真にaltで候補者名を入れてしまうと、画像が見れない環境の人に対しては候補者が2回表示(もし...続きを読む

Qテーブルの行の高さを指定する時全てのtdタグに?

スタイルシートでテーブルの行の高さを指定する時は、
全てのtdタグにスタイルシートを指定するべきか、
1つだけ(一番左だけ)指定すればいいのかわからないので押してください。


全てのtdタグに指定しても、一つのtdタグに指定しても、結局はその行の高さは指定した高さになります。

コードを書く上でどちらが適切か教えてください。
--------------------------------------------------


<style type="text/css">

td.test {height: 50px;}

</style>

<body>

1の例<br>(2列ともclass="test"を入れた)<br>

<table border=1>
<tr><td class="test">1</td><td class="test">2</td></tr>
<tr><td class="test">3</td><td class="test">4</td></tr>
</table>

<br><br>

2の例<br>(一番左の列だけclass="test"をいれた)<br>

<table border=1>
<tr><td class="test">1</td><td>2</td></tr>
<tr><td class="test">3</td><td>4</td></tr>
</table>

<br><br>

3の例<br>(スタイルシートは何も指定していない)<br>

<table border=1>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

スタイルシートでテーブルの行の高さを指定する時は、
全てのtdタグにスタイルシートを指定するべきか、
1つだけ(一番左だけ)指定すればいいのかわからないので押してください。


全てのtdタグに指定しても、一つのtdタグに指定しても、結局はその行の高さは指定した高さになります。

コードを書く上でどちらが適切か教えてください。
--------------------------------------------------


<style type="text/css">

td.test {height: 50px;}

</style>

<body>

1の例<br>(2列ともclass="test"を入れた...続きを読む

Aベストアンサー

テーブルの行の高さ、なので <tr> タグに指定するのが素直でしょうか。

<style>
table tr { height:1em; } /* 全ての行に適用 */
table tr.test { height:3em; } /* 特定の行のみ適用 */
</style>

<table border>
<tbody>
<tr> <td> 1 <td> 2
<tr> <td> 3 <td> 4
<tr class=test> <td> 5 <td> 6
</table>

Qjpgの画像を画像サイズを変えずにファイルサイズを軽くしたい

フォトショップを使用して、画像を加工しています。
背景は同一の物を使用して、(つまり全ての画像のサイズをそろえています)そこにいろいろな画像を一点づつペーストしています。

保存の際にJPGにしていますが、画像オプションの画質を変更して、
保存されるファイルサイズをほぼ同じ(20k~30kくらい)にそろえています。
しかし、中には色が多いものなど、画質だけではファイルサイズを小さくしきれないものが出てきました。
(最低画質にしても30kを超えてしまう)
画像の縦横サイズ(解像度)を変更しないで、ファイルサイズを軽くする方法はありませんか?

Aベストアンサー

とっておきの方法を教えましょう。私もphotoshopユーザーですが、この場合、以下のフリーソフトを使うのがいいです。絶対お薦めです。

(お薦めのやり方)
フリーソフトのJtrim(Woodybells社)という画像編集ソフトがあります。このソフトの特筆すべき点は画像サイズを変更しないでファイル容量を自由に設定できるという点です。→つまり複数の画像の容量を30KBにしたかったらそういう設定が簡単に出来るということです。

(ダウンロード)
下記のサイトからDLして下さい

(使い方)
例えばファイル容量を30KBにしたいならこうします。
(画像は「ファイル」→「開く」で開いておいて下さいね)

メニューバー「イメージ」→「JPEG品質」(一番下の項目です)と進む

開いたダイアログを以下のように設定

ファイルサイズで設定にチェックを入れる
最大(  )キロバイト---→ここに例えば30と入れてOKボタンを押す

これだけで画像容量は30KBになります。しかも驚くべきことに画像の劣化はほとんど分かりません。いろいろやってみましたが元画像の50%程度のファイル容量までならほとんど画像劣化が気にならないほどです。(画像の物理的サイズは同一の条件で)

Photoshopには無い素晴らしい機能なので是非お試し下さい。初めて使ったときあまりの素晴らしさに目から鱗が落ちる思いでした。

だまされたと思って一度やってみてください。Adobeだけが世界一ではないことが分かります。

参考URL:http://www.woodybells.com/jtrim.html

とっておきの方法を教えましょう。私もphotoshopユーザーですが、この場合、以下のフリーソフトを使うのがいいです。絶対お薦めです。

(お薦めのやり方)
フリーソフトのJtrim(Woodybells社)という画像編集ソフトがあります。このソフトの特筆すべき点は画像サイズを変更しないでファイル容量を自由に設定できるという点です。→つまり複数の画像の容量を30KBにしたかったらそういう設定が簡単に出来るということです。

(ダウンロード)
下記のサイトからDLして下さい

(使い方)
例えばファイル容...続きを読む

Qpタグによる段落間のアキ調整について

こんにちは。
HTMLのpタグでくくった段落が連続すると、
多くのブラウザでは段落間に1行程度のアキが生じると思います。

このアキをCSSによってなくしたいのですが
どう指定すればいいのでしょうか?

たとえば段落の「margin-bottom」に0ではなく
マイナス値を入れればなくせるようですが、
「pによる1行アキ」というのがすべてのブラウザでの
共通仕様なのか分からず、マイナス値使用に怖さを覚えます。

どういうやり方がすべてのブラウザに通用する
正しいやり方なのでしょうか?

Aベストアンサー

> > まあ、0などにすれば空きは見えなくはなりますが…
> え? できますか?
 できますよ。
ただ、pが上部にマージンをもうけるか下部にマージンをもうけるかは分からないので、
下部マージンは元々0だった(空白に見えていたのは上部マージンだった)と言う可能性があると思いますよ。

margin:0;などとして上下左右をいっぺんに指定すれば、ブラウザのデフォルトスタイルの介入がなくなるので、良いのではないかと思います。

このようにして略記した場合は、四辺を一度に指定することが出来、
しらべてみたところ、Operaでは
margin:0; ← 上下左右0に指定
margin:0 1px; ← 上下0, 左右1pxに指定
margin:0 1px 2px; ← 上0, 左右1px, 下2pxに指定
margin:0 1px 2px 3px;上右下左という順番で、0, 1, 2, 3pxに指定
 という風になっているようです。
まあ、使いうるのは全方向指定と上下左右指定ぐらいなものかもしれませんが(^_^;


人気Q&Aランキング