Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › サムネイル画像のエフェクトができるかどうか
- このトピックには12件の返信、1人の参加者があり、最後にChouchouにより7年、 5ヶ月前に更新されました。
-
投稿者投稿
-
-
2016年10月20日 8:10 PM #46475chouchouゲスト
すみません、以前も初歩的なことでお世話になりましたが、また初心者丸出しの質問失礼します。
サイドバーのウィジェットの[人気記事]を使用しています。
「タイトルを重ねた大きなサムネイル」を選択しているのですが、このサムネイル部分のタイトルの表示方法を変えることはできるのでしょうか??やりたいことは、タイトルを中央に、画像に暗くなったようなエフェクトをかけたいのです。
イメージするなら、googleの画像検索の「もっと見る」みたいな。(全然関係ないイメージですみません・・・)
よろしくお願いいたします。
Attachments:
-
2016年10月20日 10:08 PM #46477hidekichiゲスト
#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);
ちょっと青黒くしてみたりとかでしょうか。
-
2016年10月20日 11:02 PM #46480Chouchouゲスト
hidekichiさん、いつもお早い回答をありがとうございます、本当に助かります。
そしてバッチリ要望にもお応えいただき感激です・・・!
CSSの中身もぼんやりとしかわからないので、ひとつひとつ調べて勉強させていただきます。
難しいけど楽しいですね。もし簡単にできるようであればご教示いただきたいのですが、タイトル部分の背景をなくすことは可能ですか?文字だけが浮かぶようにできれば理想なのです。
自分でやりたかったとこなのですが、やはりこの短時間じゃ無理でした。(時間があっても無理かもしれませんが)
-
2016年10月20日 11:23 PM #46482Chouchouゲスト
hidekichiさん、できました!わたしでもできました!
background: transparent;
とするだけですよね、あってますよね!??なんにせよ、解決です。
今回もありがとうございました! -
2016年10月20日 11:52 PM #46483hidekichiゲスト
> タイトル部分の背景をなくすことは可能ですか?
背景入りました?タイトルに入っている背景の画像は、
#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で追加した内容はいらないかと思います。擬似要素は背景を暗くするために入れているだけなので。
-
2016年10月20日 11:52 PM #46484hidekichiゲスト
例えばの例ですが、
#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; }
このように、リストアイテムをマウスオーバーした時にテキストシャドウを入れるようにすると、背景が透明になった所にテキストシャドウが入ってわかりやすくなるかも知れません。
ここらは、何をどうしたいか、どうなれば正解が明確になれば、もう少し手を入れられるかも。 -
2016年10月20日 11:54 PM #46485hidekichiゲスト
むむ、やはり、コードは3つまでしか入れられないのですかね。
#46483と#46484は連続して書いてたんですが、投稿できず分割したら投稿できました。めちゃくちゃ問題はどこか探しましたよ(笑)
-
2016年10月21日 12:03 AM #46487Chouchouゲスト
おっとー、これは無駄な工数をかけさせてしまいました・・・!すみません。
そもそもわたしが「背景」と書いたのが問題でしたね・・・本当にすみません。
もしまだご覧になっていなければ恐々諤々ながらに申し上げます、#46484のとおりなんです・・・
背景っていうかタイトル文字の後ろの暗い部分だったわけでして。。。ほんとすみません。 -
2016年10月21日 12:04 AM #46489Chouchouゲスト
じゃなくて、、#46482 です。。。
-
2016年10月21日 2:43 AM #46495hidekichiゲスト
あ、問題がどこにあるかというのは、投稿についてです。
コードブロックが6つあったら投稿できなかったので、投稿を分割したわけですが、自分が書いたソースのどこに投稿できない問題があるのかを探してしまったと言うことです。 -
2016年10月24日 5:32 PM #46629Chouchouゲスト
hidekichiさん、もう見ていらっしゃらないかと思いますが、もしご覧になれば・・・
最初教えていただいて、設定したときにはバッチリ希望どおりになっていたはずなのですが、あれからこんな表示にかわってしまい・・・(3行以上になると下が欠ける、2行ならスッキリ収まります)
私が以後変更をかけた際におかしくなったに違いないのですが、どこが関係しているのかわからず・・・もし万が一思いつくことがあればご教示いただければ幸いです。
無理を申し上げているようで恐縮です、その際はどうぞお聞き流しください。
-
2016年10月24日 9:19 PM #46650Hidekichiゲスト
#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で限界値を入れるかはお好きな方をどうぞ。
-
2016年10月24日 10:54 PM #46654Chouchouゲスト
hidekichiさん、ありがとうございます・・・!
max-heightの打消しで成功しました。1日中悩みつづけましたが、ご回答頂けるとやはり到底たどり着けなったなと感じます。
せめてご回答の意味を理解できるよう精進いたします、本当にありがとうございました!
-
-
投稿者投稿
- トピック「サムネイル画像のエフェクトができるかどうか」には新しい返信をつけることはできません。