フォーラムへの返信
-
投稿者投稿
-
インラインでCSSを書かれている場合には、そちらが最優先されますので、
span
要素で指定しているcolor
プロパティは削除してください。投稿や固定ページのタイトル内に
<br>
を利用することが運用上の妨げにならないかが心配でありますが、本件とは別ですので言及は控えておきますね。こちらで確認したところ、前述いただきましたように、投稿タイトルに
span
にてスタイルを指定してもCSSは効いていますし、上述したソースコードも有効であることは確認しました。スクリーンショットで書かれたコードを共有いただきましたが、
:first-line
の前のスペースは必要ありません。このようになります。.c-entries--panel .c-entry-summary__title:first-line { font-weight: bold; color: #cccccc; }
基本的なCSSのご理解がない場合、カスタマイズを無理やり行っても運用上のトラブルの原因になることもありますのでご注意ください。
一点、懸念点としては、本トピックタイトルに
『「最近の投稿」の「パネル」で表示した見出しの文字を一部太字、または色をつけたい』
見出し、とあるところが、こちらが指している部分なのかが明確に断定できていないため、CSSが効かないとなってしまう可能性があります。ですので、この言われている「見出し」が「投稿タイトル」であるかどうかの確認がまず必要です。
該当箇所を開発者ツールで表示し、DOM構造まで確認できるスクリーンショットを共有いただくとスムーズかと思います。
:first-line
を追記してみてください。どのようにつけて良いかわからない場合には、「CSS 最初の行だけ」とかで検索してみるとすぐにわかるかと思います。
♥ 1いいねをした人: 居ませんはじめまして!
管理画面→外観→カスタマイズ→追加CSSを開いて、以下のCSSコードを入力してみてください。
.c-entry-summary__title { font-weight: bold; //太文字にする color: #cccccc; //文字色を灰色に }
これで灰色の太文字になるかと思います。
レイアウトがパネルの時だけそうしたい、という場合には、
.c-entry-summary__title
の前に.c-entries--panel
を併記します。.c-entries--panel .c-entry-summary__title { font-weight: bold; color: #cccccc; }
また、トップページだけや投稿詳細ページだけというように限定していきたい場合には、
<body>
タグに表示されているページの属性に応じたCSSクラスが出力されるので、以下の資料を参考に追記してみてください。例)トップページのみの場合
.home .c-entries--panel .c-entry-summary__title {...
♥ 2いいねをした人: 居ませんありがとうございます!
♥ 1いいねをした人: 居ません皆さま、コメントありがとうございます!
確かに
pre_get_posts
でいけますね!その結果、株式会社 蔵守さんからのコードを参考に以下のように書いて意図した結果を得ることができました!add_action( 'pre_get_posts', function( $query ) { if ( is_admin() || ! $query->is_main_query() ) { return; } if ( $query->is_category() ) { $query->set( 'orderby', 'date' ); $query->set( 'order', 'ASC' ); return; } }, 1 );
全然頭の中に
pre_get_posts
でいけるという発想が出てきていなくて、めちゃくちゃ助かりました!ありがとうございます!閉じさせていただきます!
♥ 1いいねをした人: 居ませんもう一つ質問ですがカスタマイザーはどこにありますか?
カスタマイズとは違いますか?
管理画面内左サイドバー【外観】内の「カスタマイズ」のことをよく「カスタマイザー」と読んだりします。ちょっと混乱しちゃいますよね。
カスタマイズですとデザイン→
・基本デザイン設定
・ヘッダー
・フッター
しかありません。
上記カスタマイズに進むと、右側に実際の表示を確認することができると思いますが、そちらの実際の表示の方で任意の固定ページへ進んでみてください。
該当する固定ページが表示されたときに、上記の固定ページ専用のパネルが表示されます。
♥ 1いいねをした人: 居ません本件、僕は全然急がないのでゆっくりで大丈夫ですよー!
♥ 0いいねをした人: 居ません個人的な感覚だと、通常「横スクロールできる」という観念がない(何かしらナビゲートがないと)ので、基本左揃えの右が見切れであれば自然とそう認識させるUXになるかなーという印象ですねー。
あと
c-navbar--center
が付いていたので「ん?どこかに中央寄せの設定項目あるのかな?」と思って調べましたがなかったですね…w様々な用途があるので、CSSカスタマイザブルな形で用意しておくくらいでもいいのかもしれませんね。
♥ 1いいねをした人: 居ません画面幅を広げた時の挙動などにも影響してくるので、意向を完全に把握していない上でカスタマイズ方法をお伝えするのはちょっと怖いので、方法の一つですが、
c-navbar--center
でjustify-content: center
が指定されていますので、こちらを何かしらの方法で上書きなどしてよしなに変更することで、左が見切れる対応は可能かと思います。♥ 1いいねをした人: 居ません確認しましたが、こちらは画面幅よりも横に広くなるくらいのメニュー項目数になった場合には、メニュー項目部分が横スクロールできるという仕様の可能性もあります。(要作者確認)
テーマ側で対応されるかもしれませんが、暫定的に対応されるのであれば、
.p-footer-sub-nav .c-navbar { flex-wrap: wrap; }
を追加CSSなどから追記されると全ての項目がみられるようになります。
しかし、テーマ側で今後対応される場合にはスタイルが交錯する可能性もあるため、今後の動向は継続して確認していただくことをお勧めします。
♥ 2いいねをした人: 居ません残念ながら、上記添付いただきましたソースコードを、こちらのテスト環境に掲載してみましたが、問題なく掲載されました。
ですので、ちょっと原因が特定できませんねぇ…
♥ 1いいねをした人: 居ませんpreタグを使用して、phpソースコード(wordpressのプラグイン)を記載すると
カスタムHTMLブロックなどを利用して記入されているのですか?
実際にどのように作業を進められているのか、具体的にお教えいただければと思います。
♥ 0いいねをした人: 居ませんテキストが切れてしまう部分の修正、確認できました!ありがとうございます!
トピック閉じさせていただきます。
♥ 1いいねをした人: 居ません「画像にテキストエリアが重なる」のは仕様です。モバイルでもブロークンな感じを出すためにそのような形にしています。確かに写真によってはかなり見えづらくはなっちゃいますね…。
なるほど!了解です!
そちらは画像とテキストが重なった際に視認性の落ちる場合には、別途個別にモバイルのみ背景半透明とかを入れるとかで対応した方がよさそうですね!その方向で進めます!
「下部のテキスト部分が見切れている」のはバグなので調査して修正いれます!
ご確認ありがとうございます!
♥ 0いいねをした人: 居ませんTwitterのタイムラインを埋め込むためにソースコードを出力してきていると思いますが、その際に公式のドキュメントはすでにご確認いただいていますか?
data-height
の値でコントロールできると思いますがいかがでしょうか?♥ 3いいねをした人: 居ません -
投稿者投稿