サポート » 使い方全般 » テキストのドロップシャドウについて

  • 解決済 frankincense

    (@frankincense)


    テーマ PIXGRAPHY を利用しています。
    URLを開いた最初のスライダーのテキストにのみ、グラーデーションンのついたドロップシャドウを付けたいです。
    もし可能ならば、ドロップシャドウをつけるテキストも、選択できたら嬉しいのですが。例えば、画面の真ん中に出てくるカテゴリー名 = 投稿のタイトルなのですが、ここだけとか。
    いかがでしょうか?
    宜しくお願いいたします。

    ヘルプの必要なページ: [リンクを見るにはログイン]

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • こんにちは

    最初のスライダーのテキストとは、スライダーのタイトルの「Advertising・・・」のことでしょうか?
    この場合の、スタイルのセレクターは、

    .main-slider .slides:first-child .slider-title {
    }

    スライダーのテキスト(説明)は、

    .main-slider .slides:first-child .slider-text {
    }

    のようになると思います。
    :first-child は最初のスライダーのみに限定するための疑似クラスです。詳細は下記をご覧ください。
    http://www.htmq.com/selector/first-child.shtml

    テキストにシャドウをつけるのは、text-shadow プロパティではどうでしょうか?
    http://www.htmq.com/css3/text-shadow.shtml

    例:

    .main-slider .slides:first-child .slider-title {
    	text-shadow: 2px 2px 10px #ffffff;
    }
    .main-slider .slides:first-child .slider-text {
    	text-shadow: 2px 2px 10px #ffffff;
    }

    ishitakaさま
    アドバイスありがとうございます。
    試してみたらうまく出来ました。感謝です!

    紹介されていたURLのリファレンスを参考に、ついでにopacityなど指定して、ちょっと気になっていたコメントを消してみたりしました。大変有益なサイトを教えて頂けたと感謝しています。

    なるべく自分で検索して自力でカスタマイズ出来たら遠慮なく出来て嬉しいのですが、例えば、今回の例で言うと.main-slider とか、.slider-title とか .slider-text が目的のオブジェクト(?)であると判断できる為の知識というか、そういった勉強の参考になるサイトや書籍が有ったら、もし良ければ教えて頂けると嬉しいです。

    Chrome のデベロッパーツール(開発者ツール)を使用すると、簡単にページのコード(HTML、CSS、JavaScript)を検証することができます。
    デベロッパーツールについては、下記ページが参考になると思います。
    https://saruwakakun.com/html-css/basic/chrome-dev-tool#section4

    スタイルは、ご利用のテーマのスタイル (style.css) や、気になったサイトのスタイルを見るのが参考になると思います。

    ありがとうございます!
    参考にさせていただきます。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「テキストのドロップシャドウについて」には新たに返信することはできません。