「最近の投稿」の「パネル」で表示した見出しの文字を一部太字、または色をつけたい

0
いいねをした人: 居ません
  • このトピックには7件の返信、2人の参加者があり、最後ににより3年、 7ヶ月前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #72653
    参加者
    14

    【お使いの Snow Monkey のバージョン】バージョン: 14.0.2
    【お使いの Snow Monkey Blocks のバージョン】バージョン11.0.2
    【お使いの Snow Monkey Editor のバージョン】バージョン 5.0.1
    【お使いのブラウザ】Chrome
    【当該サイトのURL】

    ### 実現したいこと

    「最近の投稿」の「パネル」で表示した見出しの文字を一部太字、または色をつけたいです。

    わたしが初心者ということも有り、ご教授いただければ幸いです。

    ### 発生している問題

    私の知識不足かとおもいます。

    ### 試したこと

    投稿ページの見出しに<b>営業は台本が9割</b>と入れてみましたが反映されませんでした。

    (投稿ページには反映されました)

    0
    いいねをした人: 居ません
    #72663
    Olein_jp
    参加者
    566

    はじめまして!

    管理画面→外観→カスタマイズ→追加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
    いいねをした人: 居ません
    #72666
    参加者
    14

    @Olein_jpさん

    早速ご返信いただきありがとうございます。

    追加CSSで入れてみたところ、全部がグレー&太字になりました。
    画像の最初の一行だけ変えることはできないでしょうか?

    0
    いいねをした人: 居ません
    #72685
    Olein_jp
    参加者
    566

    :first-line を追記してみてください。

    どのようにつけて良いかわからない場合には、「CSS 最初の行だけ」とかで検索してみるとすぐにわかるかと思います。

    1
    いいねをした人: 居ません
    #72866
    参加者
    14

    ありがとうございます。

    追記したのですがなりませんでした。

    他の方法はありますでしょうか?

    0
    いいねをした人: 居ません
    #72888
    参加者
    14

    ちなみに調べて以下の通りにも書いてみましたが
    色が変わりませんでした。

    何か私の書き方が間違っているのでしょうか‥

    0
    いいねをした人: 居ません
    #72905
    Olein_jp
    参加者
    566

    インラインで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構造まで確認できるスクリーンショットを共有いただくとスムーズかと思います。

    1
    いいねをした人:
    #72922
    参加者
    14

    ご返信ありがとうございます。
    無事できました!!!

    メディアクエリの後ろに書いていたため大画面で見ていても反映されておりませんでした。

     

    丁寧にご教示頂き大変勉強になりました。

    「投稿や固定ページのタイトル内に <br> を利用することが運用上の妨げにならないかが心配でありますが、本件とは別ですので言及は控えておきますね。」

    こちらのご指摘頂き助かります。
    もう少し調べて改善していきます。

    0
    いいねをした人: 居ません
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • トピック「「最近の投稿」の「パネル」で表示した見出しの文字を一部太字、または色をつけたい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。