WordPressでのスタイルシートの設定が反映されない

前へ 次へ
このQ&Aのポイント
  • WordPressでオリジナルテーマを作成中。スタイルシートの設定をするも反映されない。
  • 初心者なので、説明不足かもしれない。解決方法を教えてください。
  • MySQLデータベースはロリポップで設定。phpテンプレートでのheadで外部スタイルシートを適用しているが、プレビューしても反映されない。
回答を見る
  • ベストアンサー

wordpressでのスタイルシートの設定が反映しない

wordpressでオリジナルテーマを作っています。MySQLデータベースはロリポップで設定しました。 phpテンプレートでのheadでの設定で、 <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" /> とcssを外部スタイルとして適用する設定をし、bodyのヘッダーで、 <div id="header"> <h1><a href="<?php bloginfo('url'); ?>"> <?php bloginfo('name'); ?></a></h1> <p><?php bloginfo('description'); ?></p> </div> と　ブログタイトルをブロック要素のdivでまとめて、スタイルシートでは、 div#header {background-color: #a8d1ff} と設定したのですが、まったくプレビューしても反映されません。 初心者なので、これが説明不足かどうかわからないので、 とりあえずここでいったん区切ります。 教えてくれる方いらっしゃいましたら、補足説明もしますので、 ぜひお手数ですが宜しくお願い致します。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

質問を読んで今の所思いつくのは以下２点ですが… ●スタイルシートのファイル名か置き場所が違う bloginfo('stylesheet_url');はアクティブテーマのルートディレクトリにあるstyle.cssというファイル名のものしか読みません。 ●スタイルシートそのものが404 Not Foundになっている 他のスタイルは適用されている、という場合であれば 書式のミスである可能性が高いです。

tugumu
質問者

お礼

ご回答ありがとうございます。このサイトで何日か回答を待っていたのですが来なかったので、別の方法で解決したところでした。ありがとうございました。

  1. カテゴリ
  2. インターネット・Webサービス
  3. SNS・掲示板・ブログ
  4. ブログ

関連するQ&A

  • Wordpress スタイルシートが反映されない

    Wordpress 初心者です。 「Wordpress レッスンブック」という本を見ながら学習中なのですが、サンプルテーマのスタイルシートで設定した内容が全く反映されません。ネットでいろいろ調べたのですが解決方法が見当たりません。 どのような原因が考えられますでしょうか？よろしくおねがいします。 Sample Theme: メインインデックスのテンプレート (index.php) <!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="Content-Type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo ('charset'); ?>" /> <title><?php bloginfo('name'); ?><?php wp_title(); ?></title> <link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" /> </head> <body> <!-- ヘッダー --> <div id="header"> <h1><a href="<?php echo home_url(); ?>"> <?php bloginfo('name'); ?></a></h1> <p id="desc"><?php bloginfo('description'); ?></p> <p id="image"><img src="<?php bloginfo('template_url'); ?>/header.jpg" alt="*" width="760" height="200" /></p> </div> </body> </html> Sample Theme: スタイルシート (style.css） /* Theme Name: Sample Theme Theme URI: http://makoto.pcnoah.com/wp/ Dscription: This is my sample theme. */ /* ヘッダー */ div#header h1 {font-size: 1.875em; margin: 0; float: left; margin-bottom: 4px} div#header h1 a {text-decoration: none; color: #000000} div#header p#desc {font-size: 0.75em; color: #444444; margin: 0; float: right; margin-top: 18px} div#header {border-bottom: #a3d2f2; padding-bottom: 10; margin-bottom: 20px}

  • wordpressのjqueryが動かない

    wordpress3.8.1で作業しています。 会社のHPの作成用途でwordpressを使用しています。 何度か作成経験がありphpもなんとなく分かっているのですが、ここだけ解決せずです。 トップページにスライドショーのプラグインを入れたのですが動きません。 プラグインはWP-Cycleというプラグインです。 function.phpにはまだ何も記載していません。 header.phpはこんな感じの記載です。 ******************************************* <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="description" content="<?php bloginfo( 'description' ); ?>"> <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title> <link rel="shortcut icon" href="<img src="<?php bloginfo('template_url'); ?>/images/favicon.ico" /> <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" /> <?php wp_head(); ?> </head> <body> <a name="pagetop_here"></a> <div class="wrap"> <div class="header"> <h1 class="h_logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_logo.png"/></a></h1> <ul class="h_nav"> <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_01.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/news' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_02.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/about' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_03.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/works' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_04.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/faq' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_05.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/company' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_06.png"/></a></li> <li><a href="http://ameblo.jp/ecoblue-smile/" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/h_07.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/contact' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_08.png"/></a></li> </ul><!--h_nav--> </div><!--header--> ******************************************* <?php wp_head(); ?>を無効にして外部の jqueryを読み込むにすると、スライドはおろか、縦に並んでしまいます。（cssが効いていないみたいです。） どこが原因なのかも分からないです。 ただ過去に同じheader.phpで同じプラグインが実装しています。 よろしくお願い致します。

    • ベストアンサー
    • PHP
  • wordpressのタグ設定がうまくいかない

    wordpressでオリジナルテーマを作っています。MySQLデータベースはロリポップで設定しました。 wordpressの場合、コンテンツタイプは「text/html」・エンコードは「UTF-8」でないといけないのですが、phpテンプレートで <meta http-equiv="Content-Type" content="<?php bloginfo(`html_type`); ?> ;charset=<?php bloginfo(`charset`); ?>" /> と指定して、ブログをプレビューすると、ソース表示が <meta http-equiv="Content-Type" content="自分で設定したブログタイトル;charset=ブログタイトル" />　 になってしまいます。 また、ヘッダーも、 <h1><a href="<?php bloginfo(`uri`); ?>"> <?php bloginfo(`name`); ?></a></h1> <p><?php bloginfo(`description`); ?></p> と入力しても、ソースが <h1><a href="ブログタイトル"> ブログタイトル</a></h1> <p>ブログタイトル</p> と全て同じ内容になってしまいます。 そして、スタイルシートも設定が反映しません。 初心者なので、これが説明不足かどうかわからないので、 とりあえずここでいったん区切ります。 教えてくれる方いらっしゃいましたら、補足説明もしますので、 ぜひお手数ですが宜しくお願い致します。

  • wordpressで

    wordpressを使ってブログを作っています。しかしcssを読み込んでくれません。 index.phpの内容は <!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="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?><?php wp_title(': '); ?></title> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please --> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?>（RSS 2.0）" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?>（Atom）" href="<?php bloginfo('atom_url'); ?>" /> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" /> </head> <body> <div id="rap"> <div id="header"> <div id="headerimg"> <h1><a href="<?php echo get_settings('home'); ?>/"><img src="img/title.gif" alt="芦澤治療院はやさしいマッサージで施術いたします。" /></a></h1> </div> <div id="headernavi"> <div id="navi"> <ul> <li><a href="#"><img src="img/link.gif" alt="" border="0" /></a></li> <li><a href="#"><img src="img/sitemap.gif" alt="" border="0" /></a></li> <li><a href="#"><img src="img/inquary.gif" alt="" border="0" /></a></li> </ul></div> <div id="size"> <img src="img/sizeword.gif" alt="" /> <a href="#"><img src="img/sizesmall.gif" alt="" border="0" /></a> <a href="#"><img src="img/sizemiddle.gif" alt="" border="0" /></a> <a href="#"><img src="img/sizebig.gif" alt="" border="0" /></a></div> </div> </div> <div id="navcontainer"> <ul> <li class="news"><a href="#">ニュース</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="work"><a href="#">施術の案内</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="stuff"><a href="#">スタッフ</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="qa"><a href="#">よくある質問</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="inq"><a href="#">お問い合わせ</a></li> </ul> </div> <!-- end header --> <div id="content"> <div id="main"> <?php if(have_posts()):while(have_posts()):the_post();?> <div class="post"> <h2><?php the_title();?></h2> <?php the_content();?> <p class="postmetadate"> <?php the_time('Y年m月d日 H:i')?>|<?php comments_popup_link ('コメント(1)','コメント(2)','コメント(%)');?> </p> </div> <?php comments_template();?> <?php endwhile;endif;?> </div> </div> </div> </body> </html> です。 ディレクトリ構造はindex.htmlとstyle.cssは同じフォルダにあります。

    • 締切済み
    • PHP
  • WordPressのヘッダー上部の余白

    WordPressでテーマを自作しているのですが、ヘッダー上部に余白ができてしまいます。 調べてみると、多くの場合は http://hello-design-world.com/2011/04/wordpress31head.html のように管理バー関連の設定に問題があったようなのですが、私の場合は管理バーの表示を外しても直りません。 以下のようなソースでやっているのですが、何が原因かわかる方いたら教えてください！ ※まだ作成途中なので、ファイルは以下の２つだけです。 ----------------------php--------------------- <!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/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}

  • DreamweaverとWordPressの連携

    Xamppを使用してローカルサーバーにWordpressをインストールしました。 DreamweaverとWordpressを連携させてサイト作りをしようと思っています。 ソシム社の「WordPressレッスンブック」という本を読みながら勉強をしているのですが、Dreamweaver（ＣＳ５）上からファイルのパーミッションの変更ができません。 何度試みて更新してみてもパーミッションは０のままです。 FFFTPソフトを使わないと出来ないのでしょうか？ またＦＦＦＴＰソフトからホストに接続しようとすると、Xamppに適したユーザー名やパスワードが見つからず接続できません。 xamppディレクトリ制御、Mysql、ベーシック認証のいずれのパスワードを入力しても接続できません。 こちらのサイトも参考にしましたが分かりませんでした。（http://d.hatena.ne.jp/k3akinori/20100118/1263780463） wp-includesの中にあるindex.phpをdreamweaverのライブビューで見るところまでは成功しましたが、「WordPressレッスンブック」のやり方で作ったindex.phpは全く反映されず真っ白なままです。 index.phpとcssどちらも本に付属していたCDから正式なソースを抜き取って記述してみましたが、全く変わりません。 Wordpressの本サーバーで同じ事を試みるとほぼ問題はありませんが、効率化を図るためにローカルサーバーでサイト作りを試みたいと思っております。 ヒントでもよいので、何か教えていただければ幸いです。 index.php記述（「WordPressレッスンブック付属CDの記述）」 <!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="Content-Type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo ('charset'); ?>" /> <title><?php bloginfo('name'); ?><?php wp_title(); ?></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> <p id="image"><img src="<?php bloginfo('template_url'); ?>/header.jpg" alt="*" width="760" height="200" /></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> <?php the_content(); ?> <p class="postinfo"> <?php echo get_the_date(); ?> <?php the_time(); ?> | カテゴリー：<?php the_category(', '); ?> </p> </div> <?php if(is_single()): ?> <p class="pagelink"> <span class="oldpage"><?php previous_post_link(); ?></span> <span class="newpage"><?php next_post_link(); ?> </span> </p> <?php endif; ?> <?php endwhile; endif; ?> <?php if(is_home()): ?> <p class="pagelink"> <span class="oldpage"><?php next_posts_link('&laquo; 古い記事'); ?></span> <span class="newpage"><?php previous_posts_link('新しい記事 &raquo;'); ?></span> </p> <?php endif; ?> </div> <!-- フッター --> <div id="footer"> <address>Copyright &copy; <a href="mailto:<?php bloginfo('admin_email'); ?>">Hidamari Diary</a>, All rights reserved.</address> </div> </div> </body> </html> style.cssもコピー＆ペーストして「Wordpressレッスンブック」と同じ記述になっています。

  • スタイルシートが反映されない。

    htmlに <link rel="stylesheet"type"text/css" href="style.css" media"all"> と記入 style.cssに <style type="text/css"> <!-- body{ text-align:center; padding-top:20px; h1{ text-align:center; font-size:1.5em; color:♯800000; backgraund-color:♯FFFFFF; padding-top:20px; padding-bottom:20px; } --> </style> と記入 bodyは反映されるのにh1が反映されません。 原因がまったくわかりません。 なにが悪いのでしょうか？。 よろしくお願いします。

  • wordpressのタグについて

    ワードプレスの教科書の本に沿って勉強しているのですが、さっそく躓いてしまいました。。 よろしくお願いいたします。 テーマ作成で、プライムストラテジーのサイトからpacificという練習用テーマをダウンロードし、 xamppでローカル開発環境を準備した中に入れ、ソースをｗｐテンプレートタグに置き換えを行っているのですが、ｃｓｓファイルの置き換えは問題ないのですが、テーマファイルディレクトリの置き換えがうまくできません。。 たとえば、ｃｓｓは、 <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" /> 　　　↓↓↓ <link rel="stylesheet" type="text/css" media="all" href="http://localhost/wordpress/wp-content/themes/pacific/style.css" /> で、ちゃんと表示されている。 テーマファイルディレクトリは、 href="<?php bloginfo('templete_url'); ?>/images/touch-icon.png" 　　　↓↓↓ href="wp/images/touch-icon.png" ソースの一部↓ ----------------------------------------------------------- <!DOCTYPE HTML> <html dir="ltr" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>title</title> <link rel="apple-touch-icon" href="wp/images/touch-icon.png" /> <link rel="shortcut icon" href="wp/images/favicon.ico" /> <link rel="stylesheet" type="text/css" media="all" href="http://localhost/wordpress/wp-content/themes/pacific/style.css" /> ・・・ ----------------------------------------------------------- <?php bloginfo('templete_url'); ?>の部分は、wp　とだけ表示されてしまうのですが、 http://localhost/wordpress/wp-content/themes/pacific　と表示させたいのですが、 この部分はどこを参照しているのでしょうか。 （どこを修正したら、ちゃんと出るようになりますでしょうか。） 不足している情報があれば追加しますので、わかる方がいらっしゃいましたらご教示いただけますと幸いです。 どうぞよろしくお願いいたします。

  • スタイルシート２

    １．スタイルシートで、外部スタイルシートがありますが これはそんなに使い勝手がよいでしょうか？ <link rel="stylesheet" type="text/css" href="style.css"> と記述する上で、これはルールですからしょうがないでしょうが、<link rel="stylesheet" type="text/css" とここで、stylesheetを指定していて、さらにtext/css" でも、”スタイルシート”ですよ！！ といっているのですから、最後のhref"URL"後のstyle.css の記述は無駄になるような（くどい＾＾）気もします。 これは、しょうがないですよねー。 個人で使うなら、HTMLで充分なような・・ あと、埋め込みスタイルでよういような・・ ２．さらに、スタイルシートはたしかに軽くなりますが、 記述が面倒で、フルスペル（省略できない）。 HTMLでは、<Li></LI>や、<tr></tr>で 表示できますが、こちらはすべて書かなくてはならないので便利とはいえ、つかいやすいでしょうか＾＾ リンクできるのは、見やすく便利ですが・・・

  • スタイルシートの設定

    スタイルシートをリンク設定したく、文頭に下記の記述をしました。 ++++++++++++++++++++++++++++++++ <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> ++++++++++++++++++++++++++++++++ まったく、反映されません・・ どうして何でしょうか？ どなたかお助けください。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する