moreタグの中にCSSを反映させるには？/WORDPRESS

前へ 次へ
このQ&Aのポイント
  • WORDPRESSの記事で<more>タグを使用した後にCSSが反映されない現象についての解決方法を教えてください。
  • 記事内で<more>タグを使用した後にCSSが反映されない問題についての解決方法を教えてください。
  • WORDPRESSの記事で<more>タグを使用する際にCSSが反映されない問題についての解決策を教えてください。
回答を見る
  • ベストアンサー

moreタグの中にCSSを反映させるには？/WORDPRESS

はじめまして、この記事をご覧頂きましてありがとう御座います。 早速ですが、質問をさせて頂きたく思います。 現在、WORDPRESSにてウェブページを制作している最中なのですが、当方、記事をあげる際に<more>のタグをよく使います。 そこで問題なのですが、<more>タグを使っている記事自体には、CSSを指定しているのですが、何故か<more>タグを使用した以降の記事（同記事内）にはCSSが反映されないという現象が起きてしまい、困っております。 説明が下手で大変申し訳御座いませんが、この現象の解決方法などを知っている方が居られましたらアドバイスを頂けますと幸いです。 下記、問題部分のcssタグを表記させて頂きます。 ＊＊＊ 【CSSを反映しているタグ/index】 <div class="storycontent"> <?php the_content(__('(more...)')); ?> </div> 【CSS】 .storycontent { line-height: 130%; padding-top: 1px; margin-right: 5px; width: 568px; overflow: auto; } ＊＊＊ どうぞ宜しくお願い致します。

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

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

とりあえず、ブラウザで表示して、ソースを表示して、該当記事の部分が<div class="storycontent">～</div>の中に正常に納まっている事を確認しては？ 投稿している記事か、<?php the_content(__('(more...)')); ?>で行なわれている処理の中のどちらかで、余計な</div>があって<div class="storycontent">が閉じられているのではないかと思いますが。 使用しているテーマは、独自or自身でカスタマイズしたものなのでしょうか？

631122
質問者

お礼

skyfang様 御回答誠にありがとう御座います。また、ご返信が大変遅くなってしまいまして誠に申し訳ございません。 主題の件ですが、<div>タグを注意深く探しましたところ、やはり重複して同タグが閉じられておりました。使用しているテーマは自身でカスタマイズしたものですので、自分自身の基本的なタグに関する知識が浅かったものと思います。 この度はご指摘、心より感謝申し上げます。 また、何か分からない点等が出て来ました際に、お知恵を貸して頂けますと幸いです。 ありがとうございました！

  1. カテゴリ
  2. インターネット・Webサービス
  3. セキュリティ対策・ネットトラブル
  4. ネットトラブル

関連するQ&A

  • CSSで擬似的にフレームを作りたい

    CSSのoverflow:scrollを利用した、 フレームのように一部分をスクロールできるページを考えております。 画面左側をメニューにするには <body> <div class="menu"></div> <div class="content"></div> </body> のようなHTMLに *{margin:0px;padding:0px;} html{height:100%;} body{height:100%;} .menu{height:100%;float:left;width:100px;overflow:scroll;} .content{height:100%;margin:0 0 0 100px;overflow:scroll;} のようなスタイルシートという形で可能ですが、 上側をメニューにするにはどのようにすれば良いでしょうか？

    • ベストアンサー
    • HTML
  • divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。

    divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？

    • ベストアンサー
    • CSS
  • 急にCSSが反映されなくなった

    質問お願いします。自社サイトの更新を担当することになったのですが、数日前まできちんとサイト上でも CSSが反映されていたのに、先日からいきなりCSSが反映されなくなり原因が分からず困っています。 当方、コードは読める位の超初心者レベルです。。 因みに、コードは下記のようになっています。（途中省略してあります）また、Dreamweaver8を使用しています。 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta name="copyright" content="Nikukyu-Punch" /> <title>自社サイト</title> <meta name="description" content="○○" /> <meta name="keywords" content="○○" /> <link href="style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- .style2 {font-size: 16px} .style8 {color: #3366FF} .style11 {color: #b65313; font-size: 14px; } .style12 {color: #b65313} --> </style> </head> <body> <div id="container"> <div id="header"> <h1>○○</h1> <a href="index.html"><img src="images/logo1.gif" alt="○○" name="logo" width="653" height="114" id="logo" /></a></div> <!--/header--> <div id="contents"> <div id="wrap"> <div id="main"> <h2>○○</h2> <br /> <p >○○</p> <div class="item-box"><img src="images/item/3401.jpg" alt="○" width="164" height="164" /><div class="box-btn3"><a href="○"><img src="images/new1.gif" alt="new" />○○<br /> </a></div> </div> <div class="item-box"><img src="images/item/3403.jpg" alt="○○）" width="164" height="164" /> <div class="box-btn3"><a href="○○">○○</a></div> </div> </div> <!--/main--> <div id="sub"> </div> <!--/wrap--> <div id="side"> <!--/side--> <div id="footer"> Copyright(C)○○ All Rights Reserved.<br /> </div> <!--/footer--> </div> <!--/contents--> </div> <!--/container--> </body> </html> ---------------------CSS----------------------------------- @charset "shift_jis"; body { font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 90%; line-height: 2; color: #333333; margin: 0px; padding: 0px; text-align: center; } /*コンテナー ---------------------------------------------------------------------------*/ #container { text-align: left; width: 1091px; margin-right: auto; margin-left: auto; border-top: 5px solid #ff476d; background-color: #FFFFFF; } /*３カラムを囲むボックス ---------------------------------------------------------------------------*/ #contents { clear: left; width: 100%; } /*左・中央を囲むボックス ---------------------------------------------------------------------------*/ #wrap { width: 897px; float: left; padding-bottom: 50px; margin-top: 20px; } /*中央ブロック ---------------------------------------------------------------------------*/ #main { float: right; width: 703px; } #main .item-box{ foat:left; width:200px; height:300px; border:1px #CCCCCC solid; padding:5px 5px 0px 5px; float: left; margin-top: 0px; margin-right: 6px; margin-bottom: 15px; margin-left: 15px; } #main .item-box img{ /*margin: 5px 0px 5px 5px;*/ margin-left:15px; border:solid #cccccc 1px; } #main .box-btn3 { font-size:10px; color: #333333; width:164px; text-align:center; padding: 0px 0px 0px 0px; margin-left:15px; border:1px #CCCCCC solid; } /*フッター ---------------------------------------------------------------------------*/ #footer { clear: both; width: 100%; text-align: center; border-top: 1px solid #bfbfbf; padding-top: 1em; padding-bottom: 1em; } どなたかご教授頂けたら助かります

  • CSS-paddingが反映されません

    入れ子にしたCSSなのですが中にいれた方のボックスのpaddingが反映されません。 CSS---------------------------- #main { width:540px; float:left; background-color: #FFFFFF; padding-right: 25px; height: 100%; } #main2 { width:500px; background-color: #FFFFFF; padding-right: 20px; padding-left: 20px; } HTML---------------------------- <div id="main">□□□□□□□□□□□□□ <div id="main2">□□□□□□□□□□□□□</div> </div> 「main2」というボックスの左右に余白を作りたいのです。 ご教授ください。

  • 外部CSSと　HEAD内のCSSの違い

    現在、macで Dreamweaver8を使用してHPを作っています。 外部のcssがうまく反映されません。 そこで、head内に同じcssを入れたところ、きちんと反映されました。 どうして違いがでるのか教えてください。 『head内に入れた時』 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css"> body { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; font-weight: normal; background-position: center; padding: 0px; margin: 0px; } #page { background-color: #009900; height: 800px; width: 760px; margin-right: auto; margin-left: auto; position: relative; top: 0px; } #title { background-color: #CCFF00; height: 120px; width: 700px; position: relative; left: 0px; top: 0px; margin-right: 15px; margin-left: 15px; padding-right: 15px; padding-left: 15px; } </style> </head> <body> <div id="page"> <div id="title"> </div> </div> </body> </html> 『外部cssの時』 [styel.cssは] body { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; font-weight: normal; background-position: center; padding: 0px; margin: 0px; } #page { background-color: #009900; height: 800px; width: 760px; margin-right: auto; margin-left: auto; position: relative; top: 0px; } #title { background-color: #CCFF00; height: 120px; width: 700px; position: relative; left: 0px; top: 0px; margin-right: 15px; margin-left: 15px; padding-right: 15px; padding-left: 15px; } [反映されるhtmlは] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="page"> <div id="title"> </div> </div> </body> </html> です。 誰かお答えくださいませ。

    • ベストアンサー
    • Mac
  • iframeの機能をcss(divタグ)で表現する方法

    タイトル通りです。 cssでiframeの機能を使いたいです。 iframeのフレーム内にフレーム外からのリンクを表示する機能なんですが、iframeタグを使わずcssで代替した時の書き方がわかりません。 -----------------------ソース------------------------------ css----------- div.iframe { padding:10px; width:300px; height:200px; border:solid 1px pink; overflow:scroll; } <div class="iframe"> 内容 </div> ----------------------------------------------------------- わかる人がいたら教えて頂きたいです。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 外部CSSがIEで無反映

    Web制作初心者です。 ポートフォリオとしてサイトを2つくらい作ったのですが、2つとも Google Chromeで表示確認をしていて、出来上がってから Internet Explorerでも表示確認をしてみたら、IEでは 外部CSSが全く反映されていない状態でした。 何がダメなのか全くわかりません。 お手数ですがご助言お願い致します。 ------------HTML----------------- <!doctype html> <html> <head> <meta charset="text/html; charset=utf-8"> <meta name="descrption" content=""> <meta name="keywords" content=""> <link rel="stylesheet" type="text/style" href="common.css"> <link rel="stylesheet" type="text/style" href="index.css"> <title> Profile-TOP- </title> </head> <body> <div id="wrapper"> <!--*************ヘッダー部分*************--> <div id="header"> <h1>My Profile Site</h1> <!--ナビゲーション部分--> <div class="navi"> <ul> <li class="top">TOP</li> <li><a href="profile.html">Profile</a></li> <li><a href="design.html">Design</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div><!--/navi--> </div><!--/header--> <!--************コンテンツ部分************--> <div id="content"> 　<a href="profile.html"><img src="images/NY.png" alt="ny"></a> 　<p class="please">↑<br>Please click the image!</p> 　<p class="site">当サイトは私のプロフィールやポートフォリオを掲載しています。</p> </div><!--/content--> <!--*************フッター部分*************--> <div id="footer"> <p>Copyright &copy; 2013 nnn All Rights Reserved.</p> </div><!--/fotter--> </div><!--/wrapper--> </body> </html> --------------CSS----------------- -----common----- /*----------body部分---------*/ * { font-family: serif; } body,html { background: url("images/wood_texture4.jpg") ; color: #ffffcc; margin: 0; padding: 0; line-height: 20px; height: 100%; } img { border: none; } /*--------wrapper--------*/ #wrapper { width: 900px; margin: 0 auto; padding: 0; } /*---------header---------*/ #header { background-color: #000000; margin: 0; height: 120px; padding-top: 1px; } h1 { float: left; font-size: 40pt; padding-top: 10px; padding-left: 30px; padding-right: 60px; width: 440px; margin-top: 0; margin-right: 30px; } .navi ul { margin-top: 0; } .navi ul li { list-style-type: none; float: left; width: 80px; margin-top: 28px; margin-right: 2px; padding: 6px 10px; text-align: center; background-color: #151515; font-weight: bold; } a:link { color: #cccccc; text-decoration: none; } a:visited { color: #cccccc; } a:hover { color: #ff6600; } /*------------content---------------*/ #content { background-color: #6e6e3c; clear: left; color: #000000; margin: 0; height: auto; } /*-------footer-------*/ #footer { background-color: #000000; height: 40px; padding: 10px; clear: both; padding-right: 20px; margin-top: 0; margin-bottom: 0; } #footer p { text-align: right; vertical-align: middle; } --------index.css--------- /*content*/ #content img { position: relative; left: 50px; } p { text-align: center; margin-bottom: 0; } .please { color: #ffffff; font-weight: bold; font-size: 15pt; } .site { padding-bottom: 20px; } /*現在のページナビ*/ .top { color: #990000; }

    • ベストアンサー
    • CSS
  • CSSが正確に反映されません。

    ４つの枠を丸で囲み、かつそれぞれの枠を等間隔で空けたいと思います 丁度以下の2つを表示した場合の、contentsとmainの間の間隔が理想的です。 しかし書いたCSSの設定が正確に反映されません。 headerとfooterもこの大きさで広げたいと思うのですが、広がりません。 また、なぜheaderは丸くならず、footerはサイズからはみ出すのでしょうか。 背景を赤に設定しているのですが、それも反映されません。 なぜこうなるのかどなたかご存知の方、ご指摘いただけると助かります。 どうかよろしくお願いします。 以下、2つのファイルは同じフォルダに保存しました。 dreamweaverのアカデミック版で作り、firefox3.6.13で表示しています。 style.css ---------------------------------------------------------- @charset "utf-8"; /* CSS Document */ <!-- * { margin:0; padding:0; } h1, h2, p { margin: 0 1em; } <!--背景の設定--> body { background-color: red; } <!--コンテンツの幅を指定--> #wrapper, #main, #header, #menu, #footer { width:1120px; } <!--角を丸くする--> #header, #menu, #contents, #footer { background-color: #66FFFF; border:2px solid #999; padding: 8px; margin-bottom:5px; -webkit-border-radius: 5px; /* Safari,Google Chrome用 */ -moz-border-radius: 5px; /* Firefox用 */ } <!----> #wrapper { margin: 0 auto; line-height: 1.5; } #main { } #header { height: 50px; } #menu { width: 160px; float: left; } #menu ul { list-style: none; margin-left: 1em; } #contents { float: right; width: 900px; } #footer { clear: both; height: 50px; text-align: center; } --> ------------------------------------------------------------------------------------ index.html ------------------------------------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"><head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>勉強用</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrapper"> <div id="header"> <h1>Site Title</h1> </div> <div id="main"> <div id="menu"> <p><strong>float:left</strong></p> <ul> <li>Menu</li> <li>Menu</li> </ul> </div> <div id="contents"> <h2>Sub Title</h2> <p><strong>float:left</strong></p> <h2>Sub Title</h2> <p>text</p> </div> </div> <div id="footer"> <p>Footer</p> </div> </div> </body> </html>

    • 締切済み
    • CSS
  • HTML・CSSタグの書き方教えてください！

    画像では見づらいのですが、HOMEの左側にボーダーがピンク色で表示されています。 このHOMEの左側のボーダーを消したい（又は見えなくする）タグを教えてください。 最初のリンクのところだけグループ化して, CSSに{border-left-style: none;}と加えてみたり、 .menu ul li a .first {border-left: none;}等してみたのですが、 変わらず…。 どういうタグを加えれば、左側のボーダーが見えなくなりますでしょうか？ よろしくお願いいたします。 ＜HTML＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv= "content-style-type" content= "text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link href="css/style.css"rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <h1> 作りかけページ </h1> <p>テストページ</p> </div><!-- header終わり --> <div class="menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">サービス概要</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div><!-- menu終わり --> <div id="main"> <div id="contents"> ***コンテンツ*** </div><!-- contents終わり --> <div id="leftsidebar"> ***左サイドバー*** </div><!-- sidebar終わり --> </div><!-- main終わり --> <div id="rightsidebar"> ***右サイドバー*** </div><!-- sidebar終わり --> <div id="footer"> ***フッター*** </div><!-- footer終わり --> </div><!-- wrapper終わり --> </body> </html> ＜CSS＞ <style type="text/css"> * { margin: 0; padding: 0; } #wrapper{ width: 760px; /*全体の幅（#wrapper）を760pxの固定幅とする。 */ position: absolute;/*絶対位置*/ left: 50%;/*左端から右方向の位置を指定する */ margin-left: -380px;/*はみ出た半分を戻す */ } /*ヘッダー*/ #header{ width: 758px;/*ヘッダー部分の幅（#content）を758pxとする。*/ height: 200px; background-color:#ffd700; background-repeat: no-repeat; background-position: -50px -70px; text-align: right; border: solid 1px gray; } #header h1{ margin: 0; font-size: 30px; padding: 20px 10px 0px 0px; font-family:arial unicode ms; } #header p{ margin: 0; font-size: 1em; padding-right: 10px; margin-top: 8px; } /*ヘッダー終わり*/ /*body*/ /*menu部分*/ .menu {font-size:20px; height:30px; background-color:#0c907c; text-align:center; } .menu ul{ margin: 0; padding: 0; 760px; } .menu ul li{ float: left; list-style: none; margin: 0; padding: 0; } .menu ul li a{ display:block; width: 151.2px; line-height: 30px; border-left: solid 1px #FF3366; color:#ffffff; text-align: center; text-decoration: none; } .menu ul li a:hover{background-color: #99cc00} /*menu部分終わり*/ #contents{ width: 388px;/*コンテンツ部分の幅（#content）を388pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #leftsidebar{ width: 166px; /*左サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: left;/* 左に配置 */ } #main{ width: 574px; float: left;/* 左に配置 */ } #rightsidebar{ width: 166px;/*右サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #footer{ width:760px; background-color:#FF3366; clear: both;/* float解除 */ height: 50px; }

    • ベストアンサー
    • HTML
  • cssで、imgタグに、背景画像を敷きたい

    cssで、imgタグに、背景画像(影)を敷く方法を教えてください。 ※divタグに敷く方法は分かるのですが、imgタグに敷く方法が分かりません。 ■現状 ＜HTML＞ <div id="hoge"> <img src～ ＜CSS＞ #hoge img { background-image:url(/images/background_shodow.jpg); background-repeat: none; background:position: ？ width:？ height:？ margin:？ padding:？; ＜影の大きさ＞ ・width400px ・height200px ＜写真のサイズ指定＞ ・width390px ・height190px ※これまでは、 写真のサイズが違うので、 css部分の#hoge img で、 画像の大きさを強制指定してました。 出来れば、 画像の大きさは、html側で指定せずに、 css側で調整したいです。 ムリなら、html側で大きさ指定します。 div枠にcss設定できれば早いかと思いますが、 それが出来ないため(img タグにしかcss指定不可)の相談です。 よろしくお願いします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する