- このトピックには6件の返信、2人の参加者があり、最後にKokodarwinにより3年前に更新されました。
-
投稿者投稿
-
2021年10月13日 12:54 PM #89201
【お使いの Snow Monkey のバージョン】15.10.0
【お使いの Snow Monkey Blocks のバージョン】12.6.0
【お使いの Snow Monkey Editor のバージョン】6.1.0
【お使いのブラウザ】Chrome
【当該サイトのURL】ローカル環境のため無し### 実現したいこと
下記の画像のように
ダウンロードできる画像が上部に表示されて、
ダウンロードボタンが下部にくるようなレイアウトにしたいです。### 試したこと
画像の右のレイアウトを無理矢理作りました。
カラムを設置し上部に画像ブロックで画像を表示、
下部にファイルブロックを設置しファイル名を見えなくしている。
この場合、画像を差し替えたい時に、
上部の画像ブロックと下部のファイルブロックの2箇所を差し替えなければならず、
作業性が悪い。
画像の差し替えは一箇所で済むようにしたい。
♥ 0いいねをした人: 居ません2021年10月13日 12:55 PM #89202失礼しました。画像の添付が漏れていました。
♥ 0いいねをした人: 居ません2021年10月13日 2:02 PM #89212画像ブロックとファイルブロックの親ブロック(この場合だとカラムブロック)に適当な class を付与し、それは
positioin: relative
に、その class の中のファイルブロックのリンクの::after
をabsolute
で親カラムいっぱいに広げると、ファイルブロックのリンク範囲が画像のところまで広がると思います。Snow Monkey Blocks の項目ブロック(バナー)も似たような実装をしているので参考にみてみてください。
♥ 0いいねをした人: 居ません2021年10月13日 5:06 PM #89264キタジマさん
早速のご回答ありがとうございます。
申し訳ありません。私の説明が下手でうまく要望をお伝え出来ませんでした。別の言い方で再度ご説明してみたいと思います。
■前提
ダウンロードするファイルは画像ファイルです。■カスタマイズしない場合のファイルブロックのレイアウト
画像のファイル名とボタンが表示されます。
しかしながら、ファイル名だけだとどんな画像なのか、
ダウンロードするまでわかりません。■要望1
そのため、ファイル名の代わりにダウンロードされる画像を、
表示したいです。サムネイルが表示されるイメージです。■要望2
続いて上記スレッドの添付画像の右側のように、画像とボタンを上下に配置したいです。■キタジマさんの回答を実施した結果
1. wp-block-columnにparentsというclassをつけてposition:relative.parents{
position:relative;
}2. aタグのafterに項目ブロック(バナー)のCSSをコピペ。
wp-block-file a::after{
bottom: 0;
content: “”;
left: 0;
position: absolute;
right: 0;
top: 0;
}3. タイトルを削除
.wp-block-file a:first-child{
display:none;
}4.結果
ダウンロードボタンだけが表示されて、ダウンロードされる画像は表示されません。わかりづらく恐縮ですが要望1と要望2を実現する方法をご教示頂きたく思います。
宜しくお願いします。
♥ 0いいねをした人: 居ません2021年10月13日 5:10 PM #89266こちら実際に追加CSSにCSSを当てたページです。
♥ 0いいねをした人: 居ません2021年10月14日 6:23 AM #89292あーなるほど、その画像のダウンロードなのですね。残念ながら既存のブロックで実現する方法は無いのではないかと思います、ちょっと僕にはわからないです…。
♥ 0いいねをした人: 居ません2021年10月14日 6:51 AM #89295 -
投稿者投稿
- トピック「ファイルブロックの表示方法を画像とボタンに変更したい」には新しい返信をつけることはできません。