見出しタイトルに擬似要素で画像を追加する方法はありますか?

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

    お世話になっております。
    過去フォーラム情報等、確認しましたが、見当たらず質問させていただきます。

    【お使いの Snow Monkey のバージョン】13.2.3
    【お使いの Snow Monkey Blocks のバージョン】10.3.3
    【お使いの Snow Monkey Editor のバージョン】4.1.0
    【お使いのブラウザ】Chrome
    【当該サイトのURL】

    ### 実現したいこと

    h2タグに擬似要素を用いて、添付画像のような装飾画像(黄色斜め線)を入れて、以下のようにしたいです。
    (添付画像はメディアライブラリに格納済み)

    ### 発生している問題

    h2タグ(class名:c-entry__title)に対して、カスタマイズ>追加cssで疑似要素のコードを書いてみましたが、添付の装飾画像パスがおそらく正しくないのでしょうか、表示されないでおります。

    .c-entry__title :after{
    content:””;
    background:url(http://snowmonkeydemo4.local/wp-content/uploads/2021/03/bg-heading-xlg.png;)
    width: 100px;
    height: 100px;
    display: block;

    ### 試したこと

    上記の通りです。
    疑似要素で画像を追加したい場合の画像パスはどのように記述するのがよいのでしょうか。

    メディアと文章ブロックなどの他のブロックを使用して画像をあげると、画像はURLで表示されておりましたので、それを参考にメディアライブラリにアップしたときに表示されたURLをコピーして貼り付けましたが、表示されませんでした。

    以上、ご確認のほど、よろしくお願いいたします。

    0
    いいねをした人: 居ません
    #69655
    Olein_jp
    参加者
    565

    公開URLを共有いただけないと、素材画像の提供もないので確実な返答をしにくいです。

    ですが、恐らく Snow Monkey の利用方法を学習する上で私が作成した動画をご覧になって進められているのかと思いますので、公開可能な状態にすることは著作権の関係上無理だと思います。

    回答をする前に一点確認させていただきたいのですが、後藤さんが学習に使われている見出し背景に利用する画像は、ご自身で実際の該当サイトから調達されているものでしょうか?それともどこかで配布されているものですか?

    0
    いいねをした人: 居ません
    #69663
    Hisanori Goto
    閲覧者
    3

    オレイン様

    ご回答いただきまして、ありがとうございます。
    説明不足ならびに、配慮不足の質問となりまして申し訳ございません。
    おっしゃるとおり、添付いただいた動画と、実際の該当ウェブサイト(http://www.sakae-biyoushitsu.com/)を参考に学習させていただいておりました。
    著作権の兼ね合いもあるかと存じますので、ご回答難しい場合、トピックを閉じさせていただきます。
    また以後、著作権にも十分に留意してまいります。引き続きどうぞよろしくお願いいたします。

    0
    いいねをした人: 居ません
    #69666
    Olein_jp
    参加者
    565

    個人的な学習に使われる場合には、著作権の問題は発生しないという認識を僕は持っているので、そのような用途であれば問題ないと思われます。

    ただ、懸念として

    学習に使われている見出し背景に利用する画像は、ご自身で実際の該当サイトから調達されているものでしょうか?それともどこかで配布されているものですか?

    と質問させて頂いているように、

    • 個人的に画像をダウンロードして学習に使われている
    • どこか当方の把握していない所で誰かが採取した画像が教材のように配布されている

    こちらを確認させて下さい。前者であれば問題ありませんが、後者の場合は対応が必要になります。

    こちらお返事頂きますようお願い致します。

    0
    いいねをした人: 居ません
    #69667
    Hisanori Goto
    閲覧者
    3

    オレイン様

    お世話になっております。何度も申し訳ございません。前者となります。実際の該当ウェブサイト(http://www.sakae-biyoushitsu.com/)よりダウンロードして使用させていただいております。

    どうぞよろしくお願いいたします。

    後藤

    0
    いいねをした人: 居ません
    #69668
    Olein_jp
    参加者
    565

    ご返答ありがとうございました。

    該当ウェブサイトの素材を配布されている方がみえる可能性を考えたので、その点は安心しました。

    拝見したところ、個人としてお仕事をされているとお見受けいたしましたので、すでにご存知かと思いますが、著作権法第三十条をご理解いただいた上での使用に止めるようお願い致します。

    該当する箇所ですが、開発者ツールでソースコードを確認していただくと以下のようなコードを確認することができるかと思います。

    ***:after {
        content: "";
        background: url([PATH_TO_IMAGE]/bg-heading-xlg.png) no-repeat center top;
        width: 164px;
        height: 134px;
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        font-family: "Open Sans", "YuGothic", "游ゴシック", sans-serif;
        z-index: 1;
        margin-left: -10px;
    }

    上記を参考に挑戦していただければと思います。

    以下、本題から外れますが、当方が作成した Snow Monkey を活用したウェブサイト作成動画に関する質問を Snow Monkey サポートフォーラムで行われることが、適切な利用方法かどうか疑問を感じます。

    というのも、偶然私がこのトピックを拝見したので返答していますが、他の方であれば Snow Monkey コミュニティの方々のリソースを、私が作った動画チュートリアルに関する質問に使われることが、最適とは考えにくいです。(キタジマさんに本件は確認していませんので、私の個人的な感想です)

    少なからず、私の作成した動画チュートリアルなどへのご質問は、Youtubeコメント欄もしくは個別にTwitterでメンションを飛ばしていただくような形の方が良いかと感じました。

    個人的な感想ですが、ご確認いただけますと幸いです。

    0
    いいねをした人: 居ません
    #69672
    Hisanori Goto
    閲覧者
    3

    オレイン様

    お世話になっております。ご教示いただきまして、ありがとうございます。

    試みてみましたら無事解決いたしました。ありがとうございました。

    今回は一般的な内容かもしれないと判断し、こちらで質問させていただきましたが、

    おっしゃるとおり、著作権の関係もありますため、以後は個別にご相談をさせていただければ幸いです。

    この度はお手間を取らせてしまったこと、またご不快な思いをさせてしまい申し訳ございませんでした。

    当フォーラムならびに他コミュニティにおきましても、十分に留意してコミュニケーションをとるよう努めます。

    引き続きとなりますが、どうぞよろしくお願いいたします。

    0
    いいねをした人: 居ません
    #69673
    Olein_jp
    参加者
    565

    後藤さん

    試みてみましたら無事解決いたしました。ありがとうございました。

    解決されて良かったです!

    今回は一般的な内容かもしれないと判断し、こちらで質問させていただきましたが、

    おっしゃるとおり、著作権の関係もありますため、以後は個別にご相談をさせていただければ幸いです。

    はい、内容自体は一般的な内容ですのでサポートフォーラムでご質問頂くべきものであることは間違い無いと思います。ただ、課題の元が「Snow Monkey(とその関連プロダクト)」ではなく「私が作成した動画」という側面があったので、Snow Monkey サポートフォーラムのリソースを使っていいものかと不安になったということです(僕自身は良いのですが、僕発信の情報リソースにSnow Monkeyリソースを使って悪いな…というところです)。

    この度はお手間を取らせてしまったこと、またご不快な思いをさせてしまい申し訳ございませんでした。

    いえいえ、動画の視聴も大変喜んでおりますし、不快な思いはしておりませんのでご安心ください。ただ、ここだけの話、この動画シリーズでデモサイトを公開取り下げる事態が過去に発生していたりして、色々とあったりもしまして…。

    今後の個人的な情報発信の考察に活用させていただきます。ありがとうございます。ぜひ今後も Snow Monkey サポートフォーラム、ご活用くださいませ!

    0
    いいねをした人: 居ません
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • トピック「見出しタイトルに擬似要素で画像を追加する方法はありますか?」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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