教えて！ホームページ作成Q&AコミュのHPを作ってはみたものの・・・

HP制作初心者です。
とりあえず、なんとか仕上げてみたものの、改善点が克服できず、困っています。
以下の拙作HPをご覧いただいたうえで、アドバイスをいただけますと助かります。
よろしくお願いいたします。
-------------------------------------
Home:http://higenabe.boy.jp/portfolio/
-------------------------------------

制作環境はワードプレス3.3.1です。
テンプレートは、WPFolio1.75
画面を大きく表示するプラグインは、jQuery Colorbox
Flash表示のプラグインは、WP-SFWObject
コンタクト表示のプラグインは、Contact Form7です。

最初、制作途中までは、全画面にキャンバスの布模様の地紋が表示されていましたし、
Firefoxで見ているかぎり、何の支障もありませんでした。
ところが、I.E.で表示すると、上のタイトル下のナビ部分（トップ　Baseball～）の文字の下に
四角い白地が表示されて、とても見栄えが悪くなってしまいました。

何人かに相談したところ、「外観」の「テーマ編集」つまり「スタイルシート」で修正するしかないし、
その修正箇所は、ひとつひとつ試していくしかない、ということでした。
しかしながら、かなりの時間をかけて修正作業を進めてみたものの、上記の改善には至りませんでした。

そこで再度、相談したところ、WPFolio Theme Optionsを調整してみれば、とアドバイスされ、
とりあえず、Biog Title Visibilityを「visible」から「hidden」に変更してみました。
これはタイトルのテキストが表示されなくなるだけでしたので、すぐに元に戻してSave Optionsをしました。
そうしたら、今まで全面に表示されていたキャンバス地紋が、現状のように白地になってしまいました。
あとは、何をどうやっても「白地」は消えてくれません。
これを、当初のように全面キャンバス表示に戻したいのですが、なにか解決法はあるでしょうか。
ぜひともお力添えをいただけますと助かります。よろしくお願い申し上げます。

以下、関係ないかもしれませんが、とりあえず念のため、記しておきます。
スタイルシートは、text-weight, text-align, line-height などを調整するため、かなり変更しています。
また、メイリオ・フォントを表示するため、option-stylrsheet.phpの二カ所に「Meiryo」を追加してあります。
ただし、上記二点を変更した時点では、バックの白地は表示されていませんでした。

ついで、と言ってはなんですが、後もう一つ改善したいのは、
ナビ部分を、text-align：centerにしたいのですが、これもどうしても修正できません。
知人に相談したところ、システムのかなり深い部分をいじらないと直せない、とのことでした。
・・・深い部分って、なんなのでしょうか？いったいどこの部分なのでしょうか？　
まったく見当もつきません。正直、途方に暮れています。

もし、必要でしたらWPFolioのcssのコピーを送信いたします。
何卒、よろしくお願い申し上げます。

コメント(13)

最初
全て
最新の40件

[1] mixiユーザー 02月04日 09:41

IE9ではFirefoxなどと同じように表示されているようなので、IE7などで表示されるナビ下の空白のことでしょうか？
IE9とIE7はmarginやpaddingの動作が異なるようなので、「～/wp-content/themes/wpfolio/style.css」の300行目「margin: 0 30px 3.5em」の「3.5em」が怪しい気がします。削除したり数値を変えてみて表示がどう変わるか試してみてください。

ナビをセンタリングする方法はこちらを参照ください。
http://hail2u.net/blog/webdesign/centering-floated-list.html

[2] mixiユーザー 02月05日 10:07

はい、早速のコメント、ありがとうございました。
「ナビ下の空白」ではなくて、画面全体の白地が気になっています。
ですので、marginやpaddingの問題では無いように思います。
センタリングについては、上記にアクセスして試してみようかと思います。
取り急ぎ、御礼まで。

[3] mixiユーザー 02月05日 22:17

添付画像のようにしたいということですか？
.containterにbackground-color:#FFFFFFが設定されているのが原因のようなので、「～/?wp_folio_css=css」にある、

.container, .sf-menu li a, .sf-menu li li, .sf-menu li li li{
background-color: #FFFFFF;
}

の「.container」を「.nav ul」に書き換えれば良さそうです。

下の白いボックスも削除したいなら、

div.footer {
background-color: #FFFFFF;
border-top: solid 1px #;
}

も削除してください。

[4] mixiユーザー 02月07日 15:48

うわっ、はい、お返事、遅くなりまして、申し訳ありませんでした。
添付画像まで、付けていただいてありがとうございます。

たしかに作っている途中までは、ほぼこのような見え方でした。
ただし、下の白いボックスなどはありませんでしたし、
タイトル下のnaviも、Firefoxでは白いボックスは見えていませんでした。

とにもかくにも、上記の方法で試してみます。
本当にありがとうございました。

[5] mixiユーザー 02月07日 16:18

たびたびスイマセン。
はぎりんさんからの指示に従って・・・と早速CSSを開いてみたのですが、どうも、それらしき箇所が見つかりません。

お手数をお掛けいたしますが、再度の指示をいただきたいのですが・・・
以下、手元のCSSのコピーを転記します。

以下、.container{付近のコードです。

.container{
/* color: ($WPFolio_body_color)*/
/*background-color: ($WPFolio_foreground_color)*/
margin-top: 30px;
width: 960px;
margin: 0px auto;
text-align: center;
padding: 0px;
}

以下、.sf-menu{　.sf-menu li a{　.sf-menu li{　.sf-menu li li, .sf-menu li li li{　付近のコードです。

/*** SUPERFISH SKIN ***/
.sf-menu{
float: left;
font-size: .8em;
}
.sf-menu li a{
font-weight: boldl;
font-style: normal;
text-decoration:none;
padding: .65em 1em;
line-height:.5;
/*text-align: center;*/
}
.sf-menu li{
margin-right: .3em;
}
.sf-menu li li, .sf-menu li li li{
/* border top/left get_theme_mod( 'background_color' );*/
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active{
background: rgba(225, 225, 225, 0.8);
}
outline: 0;
}
div.menu-header ul li.current-menu-item a{
text-transform: uppercase;
background: none;
}
div.menu-header ul li ul.sub-menu a{
font-weight: normal;
text-transform: none;
background: none;
}

以下、footer付近にも指示されたコードが見当たりません。

/* @group footer */
.footer{
text-align: left;
font-size: 11px;
clear: both;
margin-top: 10px;
padding: 10px 30px 20px;
overflow: auto;
}
.footer a{
font-weight: normal;
}
.footer .center{
width: 100%;
text-align: center;
}
.footer .left{
padding-top: .8em;
float: left;
padding-right: 10px;
width: 440px;
}
.footer .right{
padding-top: .8em;
float: right;
text-align: right;
padding-left: 10px;
width: 440px;
}
.footer .right img, .footer .left img, .footer .center img{
vertical-align: text-top;
}

[6] mixiユーザー 02月07日 16:52

ヒゲナベさん
はぎりんさんが指摘されているのは、下記ではないでしょうか？
http://higenabe.boy.jp/portfolio/?wp_folio_css=css

[7] mixiユーザー 02月07日 18:13

⊂(巻添)⊃さん、コメントありがとうございます。

たしかにWPFolio: スタイルシート (style.css)本体ではなくて、
その横に表示されていたテンプレートに

WPFolio: option-stylesheet.php

というのがありまして、そして
そのなかに下記のコードが見つかりました。
以下、転記します。

.container, .sf-menu li a, .sf-menu li li, .sf-menu li li li{

background-color: #<?php echo wpfolio_getSetting('WPFolio_foreground_color'); ?>;

となっていました。
#FFFFFF; となっていないことが、なにやら怪しげな・・・
そして、その下のほうに

div.footer {

background-color: #<?php echo wpfolio_getSetting('WPFolio_foreground_color'); ?>;

border-top: solid 1px #<?php echo get_theme_mod( 'background_color' ); ?>;

}
.sf-menu li li, .sf-menu li li li {

border-top: solid 1px #<?php echo get_theme_mod( 'background_color' ); ?>;

border-left: solid 1px #<?php echo get_theme_mod( 'background_color' ); ?>;

というのが見つかりましたが、これを削除する、ってことでしょうか？
・・・下手に変更すると、元に戻らなくって壊れてしまった、という痛い経験があるので、少々ビビっているんですが・・・ど、どないしょ～

[8] mixiユーザー 02月07日 18:55

⊂(巻添)⊃さん、補足ありがとうございます。

PHPを使用したCSSでしたか。
<?php echo ～; ?>はそこを「～」部分の変数の内容に書き換える命令です（厳密に言うとこの場合は変数ではなく関数ですが）。

この場合は「.container」を「.nav ul」に、「div.footer {～}」を削除しちゃっても問題なく動作すると思います。
ご心配ならその現在のファイルを他のフォルダなどにコピー保存して、問題が起きたらすぐに戻せるようにすれば良いですよ。

[9] mixiユーザー 02月07日 19:11

はぎりんさん、⊂(巻添)⊃さん、いろいろとありがとうございます。

基本的には、上記の場所で良い、ってことですね。
う～ん、でもな～、なんだかな～・・・ちょっと恐いような気がするなあ・・・

おっしゃるように、コピー保存などをしっかりしてから、覚悟を決めて実行しようかと思っています。
腹くくるのに、今晩一晩かかっちゃうかも～・・・
明日またご連絡させていただきます。乞うご期待！

気弱なヒゲナベでした。

[10] mixiユーザー 02月08日 17:59

はぎりんさん、⊂(巻添)⊃さん、ご報告です！

上記の変更の変更の結果、だいぶ見栄えが良くなりました。
本当にありがとうございました。

・・・ただ、タイトル下のnavi部分には、
残念ながら、しつこく白地が残っちゃいました。
まだ、E.I.では確認していませんが、どんなもんでしょうかね・・・

残る課題は、このnavi部分の白地を見えなくすることと、
テキストのセンター揃えですねえ・・・
はぎりんさんから、最初にいただいたセンタリングする方法、
http://hail2u.net/blog/webdesign/centering-floated-list.html
を読んではみたものの、スイマセン、全く理解できませんでした。

具体的に、どのCSSのどのあたり、というのを
教えてもらえると助かるんですが・・・

[11] mixiユーザー 02月08日 21:34

あ、メニュー部分の背景色も取り除きたかったんですね。

それなら、
.nav ul, .sf-menu li a, .sf-menu li li, .sf-menu li li li{
background-color: #<?php echo wpfolio_getSetting('WPFolio_foreground_color'); ?>;
}
も削除しちゃってください。

メニューのセンタリング、試してみましたが私もできませんでした。
自分でも紹介した方法でセンタリングしているサイトがあるんですが、なぜか同じ方法ではうまくできないようです。
jQueryで何かやってるのかな？とも思いましたが、その先はわかりませんでした。

力不足で申し訳ないです。

[12] mixiユーザー 02月08日 22:13

はぎりんさん、重ね重ねありがとうございます。
上記さっそくやってみます。

センタリング、やっぱり無理でしたかあ・・・残念～～～！

力不足なんて、とんでもありません。
おかげさまで、ずいぶんと見栄えが良くなりました。
感謝感激雨霰とはこのことです。
本当にありがとうございました。

[13] mixiユーザー 02月08日 22:15

やった～～～！
ナビのところのカッコ悪い白地が消えてくれました～～～！
もう、すっごく嬉しいで～～～す。

はぎりんさん、ありがとうございました！！！

ログインすると、みんなのコメントがもっと見れるよ