サムネイル画像のエフェクトができるかどうか

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など サムネイル画像のエフェクトができるかどうか

  • このトピックには12件の返信、1人の参加者があり、最後にChouchouにより7年、 5ヶ月前に更新されました。
12件の返信スレッドを表示中
  • 投稿者
    投稿
    • #46475
      chouchou
      ゲスト

      すみません、以前も初歩的なことでお世話になりましたが、また初心者丸出しの質問失礼します。

      サイドバーのウィジェットの[人気記事]を使用しています。
      「タイトルを重ねた大きなサムネイル」を選択しているのですが、このサムネイル部分のタイトルの表示方法を変えることはできるのでしょうか??

      やりたいことは、タイトルを中央に、画像に暗くなったようなエフェクトをかけたいのです。

      イメージするなら、googleの画像検索の「もっと見る」みたいな。(全然関係ないイメージですみません・・・)

      イメージ例

      よろしくお願いいたします。

    • #46477
      hidekichi
      ゲスト
      #sidebar .popular-entrys-large-on a:first-child::before {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0,0,0,.5);
          display: block;
          content: "";
      }
      #sidebar .popular-entrys-large-on .wpp-post-title {
          bottom: initial;
          right: initial;
          position: absolute;
          top: 50%;
          left: 50%;
          background: initial;
          -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%,-50%);
          width: 80%;
      }

      意味合い的にはこんな感じでそれっぽくなるので後は何かしらあった時に微調整かと思います。

      例えば画像の角を丸めるが入っている場合はimgに対してborder-radius: 10pxが入っていますが、それを0にして、

      #sidebar .popular-entrys-large-on li {
          border-radius: 5px;
          overflow: hidden;
      }
      #sidebar .popular-entrys-large-on img {
          border-radius: 0;
          margin: 0;
      }

      としてみたり、beforeで入れた背景の色を

      background-color: rgba(0,0,0,.5);
      ↓
      background-color: rgba(0, 30, 50, 0.8);

      ちょっと青黒くしてみたりとかでしょうか。

    • #46480
      Chouchou
      ゲスト

      hidekichiさん、いつもお早い回答をありがとうございます、本当に助かります。

      そしてバッチリ要望にもお応えいただき感激です・・・!
      CSSの中身もぼんやりとしかわからないので、ひとつひとつ調べて勉強させていただきます。
      難しいけど楽しいですね。

      もし簡単にできるようであればご教示いただきたいのですが、タイトル部分の背景をなくすことは可能ですか?文字だけが浮かぶようにできれば理想なのです。

      自分でやりたかったとこなのですが、やはりこの短時間じゃ無理でした。(時間があっても無理かもしれませんが)

    • #46482
      Chouchou
      ゲスト

      hidekichiさん、できました!わたしでもできました!
      background: transparent;
      とするだけですよね、あってますよね!??

      なんにせよ、解決です。
      今回もありがとうございました!

    • #46483
      hidekichi
      ゲスト

      > タイトル部分の背景をなくすことは可能ですか?

      背景入りました?タイトルに入っている背景の画像は、

      #sidebar .popular-entrys-large-on .wpp-post-title {
          background: initial;
      }

      ここで初期化しているんですが、もし入っているようなら、importantをつけてみたらどうでしょうか?

      > 文字だけが浮かぶようにできれば理想なのです。

      #sidebar .popular-entrys-large-on a:first-child::before {
          background-color: rgba(0,0,0,.5);
      }

      この部分が背景の色の部分ですが、例えばこれを外すと後ろにある画像が明るい場合文字が見えなくなると思うんですよ。
      テキストシャドウとかで影を入れたら見えるとは思いますが、そうすると上記で背景を消して、

      #sidebar .popular-entrys-large-on .wpp-post-title {
          bottom: initial;
          right: initial;
          position: absolute;
          top: 50%;
          left: 50%;
          background: initial;
          -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%,-50%);
          width: 80%;
          text-shadow: -1px -1px 3px black, 1px -1px 3px black, -1px 1px 3px black, 1px 1px 3px black;
      }

      こんな感じでテキストシャドウを入れればひとまずは文字だけ入れることは可能かと思います。

      > タイトル部分の背景をなくすことは可能ですか?
      > 文字だけが浮かぶように

      ここを実現するだけであれば、::beforeで追加した内容はいらないかと思います。擬似要素は背景を暗くするために入れているだけなので。

    • #46484
      hidekichi
      ゲスト

      例えばの例ですが、

      #sidebar .popular-entrys-large-on a:first-child::before {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0,0,0,.5);
          display: block;
          content: "";
          transition: .3s ease; /*追加*/
      }

      このようにしておいて最初は背景を黒に文字を入れておきます。

      #sidebar .popular-entrys-large-on li:hover a:first-child::before {
          background-color: transparent;
      }

      次にこれを追加して、リストアイテムをマウスオーバーした時に、背景の黒をアニメーションで透明化と言うことはできます。同様にして、.wpp-post-titleのテキストシャドウを予め入れずに、

      #sidebar .popular-entrys-large-on li:hover .wpp-post-title {
          text-shadow: -1px -1px 3px black, 1px -1px 3px black, -1px 1px 3px black, 1px 1px 3px black;
          text-decoration: none;
      }

      このように、リストアイテムをマウスオーバーした時にテキストシャドウを入れるようにすると、背景が透明になった所にテキストシャドウが入ってわかりやすくなるかも知れません。
      ここらは、何をどうしたいか、どうなれば正解が明確になれば、もう少し手を入れられるかも。

    • #46485
      hidekichi
      ゲスト

      むむ、やはり、コードは3つまでしか入れられないのですかね。
      #46483と#46484は連続して書いてたんですが、投稿できず分割したら投稿できました。

      めちゃくちゃ問題はどこか探しましたよ(笑)

    • #46487
      Chouchou
      ゲスト

      おっとー、これは無駄な工数をかけさせてしまいました・・・!すみません。

      そもそもわたしが「背景」と書いたのが問題でしたね・・・本当にすみません。
      もしまだご覧になっていなければ恐々諤々ながらに申し上げます、#46484のとおりなんです・・・
      背景っていうかタイトル文字の後ろの暗い部分だったわけでして。。。ほんとすみません。

    • #46489
      Chouchou
      ゲスト

      じゃなくて、、#46482 です。。。

    • #46495
      hidekichi
      ゲスト

      あ、問題がどこにあるかというのは、投稿についてです。
      コードブロックが6つあったら投稿できなかったので、投稿を分割したわけですが、自分が書いたソースのどこに投稿できない問題があるのかを探してしまったと言うことです。

    • #46629
      Chouchou
      ゲスト

      hidekichiさん、もう見ていらっしゃらないかと思いますが、もしご覧になれば・・・

      最初教えていただいて、設定したときにはバッチリ希望どおりになっていたはずなのですが、あれからこんな表示にかわってしまい・・・(3行以上になると下が欠ける、2行ならスッキリ収まります)
      私が以後変更をかけた際におかしくなったに違いないのですが、どこが関係しているのかわからず・・・

      もし万が一思いつくことがあればご教示いただければ幸いです。
      無理を申し上げているようで恐縮です、その際はどうぞお聞き流しください。
      discription

    • #46650
      Hidekichi
      ゲスト
      #sidebar .popular-entrys-large-on .wpp-post-title {
          max-height: initial;  /*追加*/
      }

      上記のセレクタにmax-heightを打ち消すプロパティを追加してください。
      デフォルトでは28%が入ってるかと思います。タイトル部分は縦センタリングするにあたりpositionがabsoluteで配置してます。なので限界値を入れるかその親にoverflowを入れるかして縦サイズが親のサイズを超えないようにする必要があります。

      デフォルトの28%は限界値を入れる方の対処で、それ以上にならないようにされてますが、タイトルをある程度コントロールして毎回3行以内に収めるというのであれば、max-height:3emとか、3.5emとかでもよいですし、上記のようにmax-height自体を打ち消しても良いです。

      heightを設定してしまうと、常にその高さになってしまいます。heightとmax-heightを設置した時、中身がいずれかを超えた高さになると、大きい数値の方に高さがなります。max-heightだけだと、その高さまでは自動で調整されます。

      親にoverflowを入れるとなった場合、その親は#sidebar .popular-entrys-large-on liになるかと思いますがデフォルトではoverflow: visibleが入っているかと思います。その値をhiddenにすることで仮に中身がはみ出た場合にその部分を非表示にできるわけですが、若干下にグレー線が入るかと思います。これは、画像の下にmargin-bottomが入っているからです。

      #sidebar .popular-entrys-large-on li img {
        margin: 0;
      }

      これを新たに追加することで画像下の何やらグレー線部分がなくなります。

      #sidebar .popular-entrys-large-on liをoverflow: hiddenに変更すると、左上のカウンタの上部が切れてしまいます。これはliの中にある要素がliの範囲を超えたからです。

      .widget_popular_ranking ul li::before,
      .widget_new_popular ul li::before {
          background: none repeat scroll 0 0 #FFF !important;
          color: #000 !important;
          top: -3px !important;  /*この値*/
          border-radius: 50px !important;
          border: solid 2px #000 !important;
      }

      オリジナルのcssの上記部分にネガティブマージンが入っていることで切れているように見えるので子テーマで同じセレクタを上書きしてしまえばよいかと思います。

      .widget_popular_ranking ul li::before,
      .widget_new_popular ul li::before {
          top: 0 !important;  /*この値*/
      }

      こんな感じでしょうか。

      overfolowを入れるかmax-heightで限界値を入れるかはお好きな方をどうぞ。

    • #46654
      Chouchou
      ゲスト

      hidekichiさん、ありがとうございます・・・!
      max-heightの打消しで成功しました。1日中悩みつづけましたが、ご回答頂けるとやはり到底たどり着けなったなと感じます。
      せめてご回答の意味を理解できるよう精進いたします、本当にありがとうございました!

12件の返信スレッドを表示中
  • トピック「サムネイル画像のエフェクトができるかどうか」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)