質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1257閲覧

wordpress カスタム投稿ページのcss

Lyo

総合スコア12

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/04/06 11:15

カスタム投稿ページを作成し、そこに投稿したものの一部のみのcssを適用したいのですが
統一のcssが使用されるので一部のみ解除の上手なやり方がわかりません。

UTF

1<div class="Inner ExhibitionStyle Type01"> 2<?php dynamic_sidebar(sidebar1); ?> 3<?php $tax_posts = get_posts('post_type=exhibition&taxonomy=year&term=collection01'); if($tax_posts): ?> 4<ul> 5<?php foreach($tax_posts as $tax_post): ?> 6<li><div class="cntSummary"><h4><?php echo esc_html($tax_post->post_title); ?><font size="2" color="red">移転しました</font></h4> 7<dl><dt><?php echo esc_html($tax_post->cf_sch01); ?>〜<?php echo esc_html($tax_post->cf_sch02); ?></dt> 8<dd><?php echo esc_html($tax_post->cf_place); ?><br><?php echo esc_html($tax_post->cf_tel); ?></dd></dl></div> 9<div class="cntRight"><a href="javascript:;" onclick="window.open('http://maps.google.co.jp/maps?q='+encodeURI('<?php echo esc_html($tax_post->cf_access); ?>'));return false;" href="javascript:;"><img src="<?php bloginfo('template_url'); ?>/img/exhibition/btn_map01_off.gif" alt="アクセスマップ" width="95" height="50"></a> 10<p class="p-Accessmap">&raquo;&nbsp;<a href="<?php echo esc_html($tax_post->cf_map); ?>" rel="lightbox">交通アクセス</a></p></div></li> 11<?php endforeach; ?> 12</ul> 13<?php endif; ?> 14</div> 15<?php get_footer();?>

こちらのcntSummaryの<font></font>部分を3番目と4番目のliのみ適用し、1番目と2番目はdisplay: none;などで表示自体を消したいのですがよくわからないという状況です。

何か良い方法はございませんでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

font 要素は廃止されています。

【font 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/font

廃止

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.


1番目と2番目はdisplay: none;などで表示自体を消したい

そもそも取得の段階で offset を指定すると良いのでは?

【get_posts:WordPress私的マニュアル】
https://elearn.jp/wpman/function/get_posts.html


もしくはCSSの :nth-of-type(1) を使うとか。

CSS

1.Inner.ExhibitionStyle.Type01 ul > li:nth-of-type(1), 2.Inner.ExhibitionStyle.Type01 ul > li:nth-of-type(2) { 3 /**/ 4}

【E:nth-of-type(n)-CSS3リファレンス】
http://www.htmq.com/selector/nth-of-type.shtml

投稿2017/04/06 11:27

編集2017/04/06 11:28
kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lyo

2017/04/06 11:36

ありがとうございます! spanに置き換えます! すみません。。。質問の書き方が悪かったです。 1番目と2番目はdisplay: none;などで表示自体を消したい  これはspan内の内容のみを消したいということです。
kei344

2017/04/06 11:38

じゃあCSS案で。 か、PHP側で変数作ってカウントしてそこの処理を切り替えるという手もあります。
Lyo

2017/04/06 11:51

ありがとうございます。 div.cntSummary span:nth-child(1) {display: none;} これでは4つのli全てのspanが消えてしまうのですが、何が違うのでしょうか?
kei344

2017/04/06 11:55

リファレンスを読んでください。「子要素の中で1番目の子要素であるspan」を選べばそうなるでしょう。
Lyo

2017/04/06 12:05

すみません。色々やっているのですが、たどり着けません。。 せっかくたくさんヒントを頂いているのに申し訳ないです。
kei344

2017/04/06 12:09

.Inner.ExhibitionStyle.Type01 ul > li:nth-of-type(1) span, .Inner.ExhibitionStyle.Type01 ul > li:nth-of-type(2) span {display: none;} これでは?
Lyo

2017/04/06 12:12

ありがとうございます。 いけました。。でも理由がわかっていなくて非常に悔しいです。。
kei344

2017/04/06 12:15

li:nth-of-type(1) は ul の中の 1番目に適用されるので、その中の spanを指定するだけです。 使い方の説明しているサイトもあるから探してみてください。
guest

0

そのページ固有のidがあるはずなので(例えばページid)、
それを含めたCSSの記述をするとか?

body#xxx zzz yyy {}

あと、"font"タグは非推奨なのでspanとかに置き換えるのをお勧めします

投稿2017/04/06 11:27

yuki84web

総合スコア1857

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問