ファイルブロックの表示方法を画像とボタンに変更したい

0
いいねをした人: 居ません
  • このトピックには6件の返信、2人の参加者があり、最後にKokodarwinにより3年前に更新されました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #89201
    Kokodarwin
    閲覧者
    11

    【お使いの Snow Monkey のバージョン】15.10.0
    【お使いの Snow Monkey Blocks のバージョン】12.6.0
    【お使いの Snow Monkey Editor のバージョン】6.1.0
    【お使いのブラウザ】Chrome
    【当該サイトのURL】ローカル環境のため無し

    ### 実現したいこと

    下記の画像のように
    ダウンロードできる画像が上部に表示されて、
    ダウンロードボタンが下部にくるようなレイアウトにしたいです。

    ### 試したこと

    画像の右のレイアウトを無理矢理作りました。

    カラムを設置し上部に画像ブロックで画像を表示、

    下部にファイルブロックを設置しファイル名を見えなくしている。

    この場合、画像を差し替えたい時に、

    上部の画像ブロックと下部のファイルブロックの2箇所を差し替えなければならず、

    作業性が悪い。

    画像の差し替えは一箇所で済むようにしたい。

    0
    いいねをした人: 居ません
    #89202
    Kokodarwin
    閲覧者
    11

    失礼しました。画像の添付が漏れていました。

    0
    いいねをした人: 居ません
    #89212
    アバター画像キタジマ タカシ
    参加者
    2398

    画像ブロックとファイルブロックの親ブロック(この場合だとカラムブロック)に適当な class を付与し、それは positioin: relative に、その class の中のファイルブロックのリンクの ::afterabsolute で親カラムいっぱいに広げると、ファイルブロックのリンク範囲が画像のところまで広がると思います。

    Snow Monkey Blocks の項目ブロック(バナー)も似たような実装をしているので参考にみてみてください。

    0
    いいねをした人: 居ません
    #89264
    Kokodarwin
    閲覧者
    11

    キタジマさん

    早速のご回答ありがとうございます。
    申し訳ありません。私の説明が下手でうまく要望をお伝え出来ませんでした。

    別の言い方で再度ご説明してみたいと思います。

    ■前提
    ダウンロードするファイルは画像ファイルです。

    ■カスタマイズしない場合のファイルブロックのレイアウト
    画像のファイル名とボタンが表示されます。
    しかしながら、ファイル名だけだとどんな画像なのか、
    ダウンロードするまでわかりません。

    ■要望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
    いいねをした人: 居ません
    #89266
    Kokodarwin
    閲覧者
    11

    こちら実際に追加CSSにCSSを当てたページです。

    0
    いいねをした人: 居ません
    #89292
    アバター画像キタジマ タカシ
    参加者
    2398

    あーなるほど、その画像のダウンロードなのですね。残念ながら既存のブロックで実現する方法は無いのではないかと思います、ちょっと僕にはわからないです…。

    0
    いいねをした人: 居ません
    #89295
    Kokodarwin
    閲覧者
    11

    キタジマさん

    ご回答ありがとうございます。

    実現は不可なんですね!承知致しました。

    トピックを閉じます。

    1
    いいねをした人:
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • トピック「ファイルブロックの表示方法を画像とボタンに変更したい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。