[星乃 みなみ]

別スレッドで公開されていたCSSはコメントアウトして、頂いたCSSに入れ替えました。

所有している検証機では正常にヘッダコンテンツが表示されていることを確認しました！

これでiPad miniでもプレゼンできます。ありがとうございました！

♥ 0

Who liked: No user

[キタジマ タカシ]

下記試してみてください。

/* 一旦打ち消す */
@media (min-width: 64em) {
  .l-1row-header .u-hidden-lg-up {
    position: static!important;
    clip: auto!important;
    speak: normal!important;
    visibility: visible!important;
  }
}

/* 再定義 */
@media (min-width: 1280px) {
  .l-1row-header .u-hidden-lg-up {
    position: absolute!important;
    clip: rect(1px,1px,1px,1px)!important;
    speak: none!important;
    visibility: hidden!important;
  }
}

/* グローバルナビゲーション + ヘッダーコンテンツの表示を上書き */
@media (min-width: 64em) and (max-width: 1279px) {
  .l-1row-header .c-row__col.u-visible-lg-up {
    flex: 1;
  }
  .l-1row-header .c-row__col.u-visible-lg-up .c-row {
    justify-content: flex-end;
  }
  .l-1row-header .c-row__col.u-visible-lg-up .c-row .c-row__col--auto {
    display: none;
  }
}

♥ 0

Who liked: No user

[星乃 みなみ]

ブレークポイントについては、その考えで結構です。
現在、比較的古いiPad2と、新しいiPad miniがありますので、その2台でヘッダコンテンツがみれればOKです。比較的新しいiPadは、どっかのお店にいってこっそり見てきます。

知りあいのiPad Proの大きいほうはPC用画面が表示されていました。

引き続きよろしくお願いします。

♥ 0

Who liked: No user

[キタジマ タカシ]

CSS で消すのがかんたんだと思います。

/* h3 以下は消す */
.c-entry__content .contents-outline ol ol {
	display: none;
}

or

/* h4 以下は消す */
.c-entry__content .contents-outline ol ol ol {
	display: none;
}

♥ 0

Who liked: No user

[キタジマ タカシ]

現状は

• 0〜
  • ハンバーガーボタンとヘッダーコンテンツ（モバイル用）を表示
  • グローバルナビゲーションとヘッダーコンテンツ（グロナビ横）は非表示
• 1024〜
  • ハンバーガーボタンとヘッダーコンテンツ（モバイル用）は非表示
  • グローバルナビゲーションとヘッダーコンテンツ（グロナビ横）を表示

となっています。おそらく小山さんのやりたいことは上記のブレイクポイントを切り替えるだけではだめですよね？ タブレットサイズではグローバルナビゲーションは非表示にするけどヘッダーコンテンツ（グロナビ横）は表示とかをされたいんですよね？

なので、「どのブレイクポイントで切り替えるか」を決めるのはもちろんですが、「どの要素をどうする」というのも一緒にまとめて書いてほしいです。

♥ 0

Who liked: No user

[星乃 みなみ]

 

iPadの横の場合に、でてないのが問題なのですが、iPadも沢山でていて悩みます。

iPhone/iPad/Apple Watch解像度(画面サイズ)早見表 – Qiita

サイズ端末　　　　　ポイントRetinaピクセル倍率デバイスアスペクト比3.5iPhoneiPhone 3GiPhone 3GS320x4801320x4801320x4802:33….

qiita.com

上記のページを見ると、1024pxをブレークポイントの候補とする形になるでしょうか
あとは、7世代以降の1112pxをどう扱うかですね

ハンバーガーメニューの出現ポイントを変更したい

タグ: ハンバーガー このトピックには6件の返信、2人の参加者があり、最後に土居 安佳里により1年、…

snow-monkey.2inc.org

頂いたCSSは、1286px未満がブレークポイントになっているようですね
パソコンでもちょっと縮めると、すぐメニューがでるので、少し広めなきがします

 

♥ 0

Who liked: No user

[キタジマ タカシ]

その場合だと「.category-a ではない要素の中の .c-entry__title」ではなくて、「.category-a を持たない .c-entry__title」になります。

:not() を使いこなすのは結構難しいので、僕ならこうしますかね。一旦全部消して、特定の条件のときだけさらに上書きさせてます。

.category .c-entry__title {
  display: none;
}

.category-a .c-entry__title {
  display: block;
}

♥ 0

Who liked: No user

[キタジマ タカシ]

いえ、設定はないですね。下記の CSS をカスタマイザー > 追加 CSS に追加してください。

/* スマホではロゴ下のキャッチフレーズを消す */
@media (max-width: 639px) {
  .l-header .c-site-branding__description {
    display: none;
  }
}

♥ 0

Who liked: No user

[*****]

[ プライベートトピックのため非表示 ]

♥ 0

Who liked: No user

[Takeru]

できました、ありがとうございます！

特定のカテゴリー以外へのCSS適用は、以下の書き方で反映されません（全部非表示になります）がどこが間違っていますかね…

.c-entry__title:not(.category-a) {
display: none;
}

♥ 0

Who liked: No user

[*****]

[ プライベートトピックのため非表示 ]

♥ 0

Who liked: No user

[キタジマ タカシ]

.category-a .c-entry__title {
  display: none;
}

ですかね？

♥ 0

Who liked: No user

[Takeru]

知識不足ですみません。

例えばカテゴリーA（スラッグ→a）の場合に記事タイトルを非表示にしたい場合は、

.c-entry__title

にどのようなCSSを書けばよろしいですか？

CSSに書くだけではない話のような気もしますが…初歩的な質問ですみません。

♥ 0

Who liked: No user

[キタジマ タカシ]

これでどうでしょう。

@media (max-width: 639px) {
  .error404 .l-sidebar-widget-area .widget_search {
    display: none;
  }
}

♥ 0

Who liked: No user

[キタジマ タカシ]

あ、すみません、一行抜けていました。一応ちゃんとしたやつはこちらです。

add_filter(
	'inc2734_wp_seo_description',
	function( $description ) {
		if ( ! $description ) {
			global $post;
			return str_replace(
				[ "\r", "\n" ],
				'',
				wp_trim_words( wp_strip_all_tags( strip_shortcodes( $post->post_content ) ), 110 )
			);
		}
		return $description;
	}
);

♥ 0

Who liked: No user