- このトピックには6件の返信、2人の参加者があり、最後に
により2年、 6ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】15.10.0
【お使いの Snow Monkey Blocks のバージョン】12.6.0
【お使いの Snow Monkey Editor のバージョン】6.1.0
【お使いのブラウザ】Chrome
【当該サイトのURL】ローカル環境のため無し### 実現したいこと
下記の画像のように
ダウンロードできる画像が上部に表示されて、
ダウンロードボタンが下部にくるようなレイアウトにしたいです。### 試したこと
画像の右のレイアウトを無理矢理作りました。
カラムを設置し上部に画像ブロックで画像を表示、
下部にファイルブロックを設置しファイル名を見えなくしている。
この場合、画像を差し替えたい時に、
上部の画像ブロックと下部のファイルブロックの2箇所を差し替えなければならず、
作業性が悪い。
画像の差し替えは一箇所で済むようにしたい。
いいねをした人: 居ませんキタジマさん
早速のご回答ありがとうございます。
申し訳ありません。私の説明が下手でうまく要望をお伝え出来ませんでした。別の言い方で再度ご説明してみたいと思います。
■前提
ダウンロードするファイルは画像ファイルです。■カスタマイズしない場合のファイルブロックのレイアウト
画像のファイル名とボタンが表示されます。
しかしながら、ファイル名だけだとどんな画像なのか、
ダウンロードするまでわかりません。■要望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を実現する方法をご教示頂きたく思います。
宜しくお願いします。
いいねをした人: 居ません
- トピック「ファイルブロックの表示方法を画像とボタンに変更したい」には新しい返信をつけることはできません。