Twenty Sixteenのタイトルフォントカラーを変更したい

  • 解決済 pilocc

    (@pilocc)


    9年、 1ヶ月前

    先日、「投稿タイトル」のフォントサイズ変更でお世話になりました。
    最終的に、末尾にご指導いただいた以下を記述してうまく動作しております。
    .entry-title {
    font-size: 20px;
    font-size: 1.25rem;
    }
    そこで、フォントカラーを変更しようとしまして、以下を加えました。
    .entry-title {
    font-size: 20px;
    font-size: 1.25rem;
    color: #1e73be;
    }
    プレビューでは、変更が反映されましたが、PCブラウザでは反映されません。
    スマートフォンでは、反映されます。（リンクが張られていないからかもしれません）
    ご助言いただければ幸いです。
    *サイトのカスタマイズでは、メインのテキストカラーを#333333と設定しております。

    また、できれば
    「サイトタイトル」「キャッチフレーズ」のカラーも同様に変更できればと思っております。合わせてご指導いただけましたらありがたく存じます。

13件の返信を表示中 - 1 - 13件目 (全13件中)
  • 천궁 메텔

    (@digitmaetel)

    9年、 1ヶ月前

    スマートフォンでは、反映されます。

    いつもとは違うブラウザ、あるいは友達や公共からアクセスしてみましょう。
    そこで反映されていれば、pilocc さんの使用しているブラウザのキャッシュがクリアされていないということです。

    천궁 메텔

    (@digitmaetel)

    9年、 1ヶ月前

    「サイトタイトル」「キャッチフレーズ」のカラーも同様に変更できれば

    カスタマイズで指定したテキストカラーとは違うカラーを「サイトタイトル」「キャッチフレーズ」では使いたいということですかね。
    そうしたスタイルシートの詳細な要素は『デベロッパーツール』を使いましょう。

    .site-branding がサイトタイトル」「キャッチフレーズ」を内包しています。

    tg29359

    (@tg29359)

    9年、 1ヶ月前

    以下の様な修正ではどうでしょうか。私の実験サイトをPCのGoogle Chromeで見てる限りではそこそこいけてそうです。「サイトタイトル」を緑に、「キャッチフレーズ」を青に、「投稿タイトル」を赤にする場合の設定例です。

    .entry-title {
font-size: 20px;
font-size: 1.25rem;
color: red;
}
.entry-title a {
color: red;
}
.site-title, .site-title a {
color: green !important;
}
.site-description {
color: blue;
}

    ただ、このやりかただと「サイトタイトル」はマウスオーバーした時とか、訪問済みリンク・未訪問リンクの状態が変わった際にも常に緑になってしまってるように見えますが。

    以下が私の実験サイトです。
    http://meta-scheme.sakura.ne.jp/jikken/

    トピック投稿者 pilocc

    (@pilocc)

    9年、 1ヶ月前

    맹조さま
    キャッシュがクリアしましたが、うまく機能しません。
    『デベロッパーツール』は、初耳なものですから、少し勉強いたします。
    ありがとうございました。

    トピック投稿者 pilocc

    (@pilocc)

    9年、 1ヶ月前

    tg29359さま
    今回も、まことに相済みません。
    ご指導いただいた記述をコピーペーストいたしました。

    1.まず実験サイトは、PCブラウザですべて問題なく変更を確認できます。
    2.管理者カスタマイズ画面のプレビューでは、
    「サイトタイトル」「投稿タイトル」が変更されています。
    「キャッチフレーズ」は、変更されません。
    3.pcブラウザでは、「サイトタイトル」のみ変更されています。
    4.スマートホンでは、
    「サイトタイトル」「投稿タイトル」ともに変更されています。
    「キャッチフレーズ」は、表記がなく、確認できません。

    以上のような状況です。
    よろしくお願い申し上げます。

    tg29359

    (@tg29359)

    9年、 1ヶ月前

    完全に望むとおりの効き方はしていないということですね。う～ん、直接的に「では、こう書き直したら」というアイデアは無いのですが、問題点の調べ方のヒントを以下に書きます。

    • PC上にGoogle Chromeを用意します（私のPCの場合だとWindows10にGoogle Chromeのバージョン 47.0.2526.106 mがインストールしてあります）。
    • 望み通りの効き方をしていない画面をGoogle Chromeで開きます。この場合で言えば、例えば、管理者カスタマイズ画面のプレビュー画面を開きます。かなり大きめの画面で開くと作業しやすいです。
    • 望み通りの色に変わっていない部分にマウスカーソルをあてて右クリックします。この場合で言えば、例えば、「キャッチフレーズ」にマウスカーソルをあてて右クリックします。
    • メニューがポップアップするので「検証」を選択します。
    • HTMLソース風の画面が開きますので、その画面上で、マウスカーソルをあてたあたりの要素部分の背景色が選択状態を示す感じの色合いになっているのを確認の上、その右隣にある、「Style」「Computed」といったタブが並んでいる領域の、「Computed」タブをアクティブにします。
    • Filterと書いてある行の右端の「Show all」チェックボックスがオフ状態になっていたらオンにします。
    • Filterの下の方にあるColorの行を探します。Color行の右側に、最終的に採用されたRGB値が示されています。例えば、青ならばRGB(0,0,255)と表示されています。
    • Colorの左横にある三角形をクリックして、Colorについての詳細な表示内容を展開します。
    • 展開すると、どのCSSファイルのどの部分の指定内容をColor設定の候補として検出したか、そして、最終的にどれが採用されたのかが、何となくわかる表示になっている（棄却された設定に取り消し線が引かれている）時があります。それを見て、自分の用意した設定が他の部分の設定によって取り消されていないかどうか調べます。
    • 取り消されていたら、取り消されないような書き方を考えてみます。

    経験から想像するには、

    • !important付きの指定は他の指定より強くて、他を取り消すことが多い
    • !important指定が無いもの同士だと、細かい指定の方が大ざっぱな指定より強いことが多い。例えば、単に.site-descriptionと書いたのとh2.site-descriptionと書いたのとでは、h2.site-descriptionの方が細かい指定として扱われ、採用されやすい。
    • 細かさの点で同じレベルのもの同士だと、後に書いてあるものの方が先に書いてあるものより最終的に効くことが多い気がする。

    といった傾向が見られるので、自分の書いた設定が最終的に採用されるように、上記の点を考慮して書き方を変えると、効果が出るかもしれません。

    천궁 메텔

    (@digitmaetel)

    9年、 1ヶ月前

    http://wp.me/P5ZPvS-2V
    わかりやすいように、「サイトタイトル」と「キャッチフレーズ」の頭の文字だけを

    color: #1e73be;

    指定しています。

    トピック投稿者 pilocc

    (@pilocc)

    9年、 1ヶ月前

    맹조さま
    毎々すみません。
    ソースの記述を拝見させていただきました。
    どのようにしたものか、ゆっくり考えます。
    たぶん理解できるとおもいます。
    ありがとうございました。

    トピック投稿者 pilocc

    (@pilocc)

    9年、 1ヶ月前

    tg29359さま
    お世話になります。
    google Chromeの記述は、以下のとおりです。
    ■は、黒色で表記されています
    □は、青色で表記されています
    (取り消し線）の前の記述が取り消し線ありです。
    #1e73be は、私がbluekから変更したものです。

    サイトタイトル
    ▼color □rgb(30, 115, 190)
    ■#333333(取り消し線）body, blockquote cite, blockquote small,
    .main-navigation a, .menu-toggle, .dropdown-toggle, .social-navigation a,
    .post-navigation a, .pagination a:hover, .pagination a:focus, .widget-title
    a, .site-branding .site-title a, .entry-title a, .page-links >
    .page-links-title, .comment-author, .comment-reply-title small a:hover,
    .comment-reply-title small a:focus
    ■#1a1a1a(取り消し線）.site-branding .site-title a
    □#1e73be !important.site-title, .site-title a
    □#007acc(取り消し線）a
    -webkit-link(取り消し線）user agent stylesheeta:-webkit-any-link
    ■#1e73be !important(取り消し線）.site-title, .site-title a
    ■#333333(取り消し線）body, blockquote cite, blockquote small,
    .main-navigation a, .menu-toggle, .dropdown-toggle, .social-navigation a,
    .post-navigation a, .pagination a:hover, .pagination a:focus, .widget-title
    a, .site-branding .site-title a, .entry-title a, .page-links >
    .page-links-title, .comment-author, .comment-reply-title small a:hover,
    .comment-reply-title small a:focus
    ■#1a1a1a(取り消し線）body, button, input, select, textarea
    color-interpolation
    sRGB
    color-interpolation-filters
    linearRGB
    color-rendering
    auto

    キャッチフレーズ
    ▼color ■ rgb(68, 68, 68)
    ■#444444blockquote, .post-password-form label, a:hover, a:focus, a:active,
    .post-navigation .meta-nav, .image-navigation, .comment-navigation,
    .widget_recent_entries .post-date, .widget_rss .rss-date, .widget_rss cite,
    .site-description, .author-bio, .entry-footer, .entry-footer a,
    .sticky-post, .taxonomy-description, .entry-caption, .comment-metadata,
    .pingback .edit-link, .comment-metadata a, .pingback .comment-edit-link,
    .comment-form label, .comment-notes, .comment-awaiting-moderation,
    .logged-in-as, .form-allowed-tags, .site-info, .site-info a, .wp-caption
    .wp-caption-text, .gallery-caption, .widecolumn label, .widecolumn
    .mu_register label
    □#1e73be(取り消し線）.site-description
    ■#686868(取り消し線）.site-description
    ■#333333(取り消し線）body, blockquote cite, blockquote small,
    .main-navigation a, .menu-toggle, .dropdown-toggle, .social-navigation a,
    .post-navigation a, .pagination a:hover, .pagination a:focus, .widget-title
    a, .site-branding .site-title a, .entry-title a, .page-links >
    .page-links-title, .comment-author, .comment-reply-title small a:hover,
    .comment-reply-title small a:focus
    ■#1a1a1a(取り消し線）body, button, input, select, textarea
    color-interpolation
    sRGB
    color-interpolation-filters
    linearRGB
    color-rendering
    auto
    cursor
    auto
    cx
    0px
    cy
    0px
    direction
    ltr

    投稿タイトル
    ▼color □rgb(30, 115, 190)
    □#1e73be.entry-title
    ■#333333(取り消し線）body, blockquote cite, blockquote small,
    .main-navigation a, .menu-toggle, .dropdown-toggle, .social-navigation a,
    .post-navigation a, .pagination a:hover, .pagination a:focus, .widget-title
    a, .site-branding .site-title a, .entry-title a, .page-links >
    .page-links-title, .comment-author, .comment-reply-title small a:hover,
    .comment-reply-title small a:focus
    ■#1a1a1a(取り消し線）body, button, input, select, textarea
    color-interpolation
    sRGB
    color-interpolation-filters
    linearRGB
    color-rendering
    auto
    cursor
    auto
    cx
    0px
    cy
    0px
    direction
    ltr

    わたしには、意味不明の記述ですし、なにやら大事になってきたようで気がひけます。
    ダメなときはあきらめますので、お知らせください。
    よろしくお願いいたします。

    tg29359

    (@tg29359)

    9年、 1ヶ月前

    ？？？。これは難しいですねぇ。私には対処方法がまったくわかりません。ダメです。ギブアップします。なんでおんなじテーマ使ってこんなに状況変わるんだろう？。お力になれずすみませんでした。

    トピック投稿者 pilocc

    (@pilocc)

    9年、 1ヶ月前

    tg29359さま
    こちらこそ、いろいろとご検討いただきまして、感謝申し上げます。
    ありがとうございました。

    tg29359

    (@tg29359)

    9年、 1ヶ月前

    えー、多分効かないと思いますが、ダメ元でもう一発だけ。

    以下は、サイトタイトル、キャッチフレーズ、投稿タイトル、の三要素全てを、明るめの青（というか、水色）に、常に（訪問済みリンクであろうが、未訪問リンクであろうが、マウスがその辺りをよぎろうが、常に）するように意図した設定値で、私の実験サイトでは意図した色になってますが。。。

    .entry-title {
font-size: 20px;
font-size: 1.25rem;
color: #1e73be !important;
}
.entry-title a {
color: #1e73be !important;
}
.site-title, .site-title a {
color: #1e73be !important;
}
.site-description {
color: #1e73be !important;
}
    トピック投稿者 pilocc

    (@pilocc)

    9年前

    tg29359さま
    重ねてご検討いただき、まことにありがとうございました。
    改めてスタイルシートを見ますと、上から下まで記述が「赤波線」の状態でして、
    ？？？状態となりました。
    そこで、アンインストール（実際には、lolipopではインストールフォルダ内削除及びFTP設定の削除）を行いました。
    再度インストールを行ったのですが、初回に行った記述変更も含めて、すべて不可状態です。再々度同様にフォルダ内削除を行いましたが、同様の結果です。
    このwordpressというテンプレートは、ダメですね。あきらめて他の手を考えます。
    いずれにせよ、お手数をおかけいたしまして、まことにありがとうございました。

13件の返信を表示中 - 1 - 13件目 (全13件中)
  • トピック「Twenty Sixteenのタイトルフォントカラーを変更したい」には新たに返信することはできません。