Q&A
勝手に変えると他のサービスと誤解されませんか？
ネットショップBASE（https://thebase.in/）のテンプレートカスタマイズをしているのですが、
Twitterシェアボタンの背景色を変更したいと思っています。
現在テンプレートでは
<a href="https://twitter.com/share" class="twitter-share-button" data-url="{ItemRedirectUrl}" data-lang="ja" data-hashtags="{TwitterDataHashtags}" data-via="{TwitterDataVia}">Tweet</a>
と表記されています。
twitter-share-buttonのclassにbackground-colorを当ててみたのですが、iframeが上に重なってしまい反映されませんでした。
また、BASEはトップページから商品ページまで１ファイルで管理されている為、一般的な
<a href="https://twitter.com/intent/tweet? text={ツイートテキスト}& url={ウェブページのURL}& hashtags={ハッシュタグ}& via={Twitterユーザー名}& related={追加のTwitterユーザー名}＆ in-reply-to={親ツイートのID}" target="_blank" rel="nofollow noopener noreferrer" >Twitter</a>
にどう入力して良いのかがわかりません。
タグを普通に当てはめたところ、エラーになりました。
何か方法がございましたらご教授お願いいたします。
申し訳ありませんが今回は背景色変更の解決方法を探しているのでそういった提案はまた次回検討させていただきます。
規約確認されてますか？
使える色も形も決められています。
https://about.twitter.com/ja/company/brand-resources.html
こちらに背く内容なのであれば、次回はありません。
そちらはすでに確認済みです。
また、この規約に関してはロゴの規約であり、ツイッターのシャアボタンに関するものではありません。
今回はボタンの背景色の話をしております。
書いてないことは誰にも伝わりませんので、自身が持っている情報は全て質問本文に記載してください。
後だしほど、他者のモチベーションを下げる行為はないですよ。
それは大変失礼いたしました。
質問内容に「シェアボタンの色」と書いたのでまさかロゴの色と捉える方がいらっしゃるとは思っておりませんでした。
申し訳ありません。
また、後学の為にどこで「ロゴの色を変更したい」と捉えられたのかお聞きしても宜しいでしょうか？
今後のご質問する際に参考にさせていただきます。
実際にやろうとしたコードがないからです。
どこまでやろうとしているか見えません。背景色であっても、ブランドイメージと遠い色は推奨されないものと解釈はできます(だからソース取得で起動するものは加工しにくくなっている)。
それより私が指摘しているのは後出しです。
質問は編集できますので適宜調整してください。
https://libra-nk.net/sns-share-button-url/
仕様は都度確認する必要はあるものの、各SNSのシェアボタンのURL形式は決まっているのでそのURLさえ埋め込めばどんなレイアウトも可能です。
自己責任なので回答にはしません。
申し訳ありません、質問に対する回答をいただいても宜しいでしょうか
書いてないことは誰にも伝わりませんので、自身が持っている情報は全て「質問本文に」記載してください。
質問は編集できますので。
＞どこで「ロゴの色を変更したい」と捉えられたのか
こちらのご回答がいただけておりません。
なるべく誤解のない内容にしたいと思っておりますのでよろしくお願いいたいします。
> Twitterシェアボタンの色を変更したい
というのは、ロゴの色を変更したい、というのとは違うんですか？
ところでよく分からないんですが、
> twitter-share-buttonのclassに色を当ててみたのですが、iframeが上に重なってしまい反映されません
aタグを記述するだけで、こんな事起こってるんですか？
>> Twitterシェアボタンの色を変更したい
> というのは、ロゴの色を変更したい、というのとは違うんですか？
シェアボタンのみでしたらロゴを使用せずとも作成は可能です。
シェアボタン＝ロゴと捉えられていらっしゃるのでしょうか…？
aタグに記述するだけで、とありますが、そちらに関しては貼ったコードをみてご理解していただいて宜しいでしょうか
書いてます。
2020/09/17 11:16
ご提示のコードを試してみましたが、「シェアボタン」は表示されませんでした。
おそらく、ご提示いただいていない部分のコードに原因があるのだと思います。
BASEというのは、フレームワークか何かですか？
BASEはネットショップのサービスです。
https://thebase.in/
こちらのテンプレートをカスタマイズをしていたところ、Twitterシェアボタンの背景色の変更ができず困っておりました。
>twitter-share-buttonのclassに色を当ててみたのですが、
とありますがどこにもそのコードがないので、どのような影響範囲を与えるものをしようとしているか分からない
と指摘しています。
なかなか追記してもらえないのでみんな困っています。
事例に挙がっていたサイトを見てきました。
https://shop.youange.com/items/12868325
ソースコードとDOMを見た感じ、a要素はJavaSciptでiframe要素に差し替えられているので、CSSが効かないのは仕方がない、というか、色を変えるのは難しい、というか、できない、と理解した方がいいと思います。
もし、同じサービスを利用して色を変えているページがあるのであれば、何かヒントがあるかもしれませんね。
まとめて追記したいので「どこで「ロゴの色を変更したい」と捉えられたのか」のご返答いただいても宜しいですか？
私の貼り付けたコードですとimgタグは含んでおらず、CSSで色が変更可能なSVGファイルがないことはご確認いただけると思います。
しかしながら「twitter-share-buttonのclassに色を当ててみた」の一文でロゴの色変更の可能性を考慮されたのであれば、その誤解の内容な記述をしたいと考えております。
よろしくお願いいたします。
横からすみませんが、「どこで「ロゴの色を変更したい」と捉えられたのか」に返答してもいいですか？
一般に、ロゴのブランディングポリシーには、大抵の場合は背景色・余白・文字色などが含まれており、ツイッターの場合でもそうなっているようです。
ですので、「ロゴの色変更」には「ロゴの背景色・文字色の変更」も含まれている、と理解しても無理のない解釈だと思います。
そして、シェアボタンの「色変更」となると、ボタンの構成要素上「ロゴのアイコン・背景色・文字色の変更」と解釈するのは自然だと思いますし、私もそう理解しました。
ですから、「Twitterシェアボタンの色を変更したい」を「ロゴのアイコン・背景色・文字色の変更」と読んで、それをおおまかに「ロゴの色変更」を表現するのは、それほど無理のないことかと思います。
「Twitterシェアボタンの色を変更したい」で検索をかけてみたらいかがでしょうか？
ただ、ブランディングガイドラインを読むと「When using the logo in white, the background color may be set in any color.」となってますから、背景色は変えていいようですね。
ああ、コメントが行き違いましたね。
「Twitterシェアボタンの色を変更したい」で検索をかけてみましたところ、埋め込み式ではないボタンを使っているようですね。
その場合であればCSSでコントロールできるはずです。参考にされてはいかがでしょうか？
埋め込み式ではない（ウィジェットではない）シェアボタンの設置方法は、↓がわかりやすいかもしれません。
https://note.com/ytk141/n/nc76dd06aaff4
ご不明の点がありましたら、ご返信ください。
ありがとうございます。
不明点の詳細を追記致しました。
BASEのシステムを利用したことがないので詳細は分かりませんが、普通にタグで入力すればいいのではないかと思いました。via、related、in-reply-toは、なくてもいいと思いますので、お試しになられては？
または、BASEのサポートを受けた方が早いのではありませんか？
ググってみたところ、テンプレートタグのドキュメントを見つけました。
参考にしてみてはいかがですか？
https://docs.thebase.in/docs/template/syntax/page
回答1件
0
ベストアンサー
たとえば、最低限の内容ですが、以下のようにすればツイートできるリンクを作成できるはずです。
html
1<a href="https://twitter.com/intent/tweet?url={ItemPageURL}" 2 target="_blank" 3 rel="nofollow noopener noreferrer" 4>Twitter</a>
あとは、CSSで好きな色を付ければいいかと思います。
投稿2020/09/17 04:15
総合スコア36115
あなたの回答
tips
プレビュー
