OFUSEのシェアボタンをAMPに対応させたい好きな色に変えたい

OFUSEは、様々なジャンルのクリエイターさんにメッセージと共にお小遣いを送れる応援プラットフォームです。
簡単に登録できるのが魅力ですが、シェアボタンがAMPに対応していないのが残念な点です。
また、用意されている色以外のものを使用したいですね。

そこで、AMPでもシェアボタンを使用できる方法と、色を自由に変更する方法をお伝えします。

AMPで使用できない理由

OFUSEのシェアボタンは、次のようなコードを貼り付けます。

このコードは、aタグでリンクを作っています。
しかし、これだけではボタンのような形状にはなりません。

よく見ると、scriptというタグを使っていますね。
これは、プログラムコードをサーバーから読み込む指示を出すタグです。

このプログラムコードは、aタグを削除して、ボタンを表示するiframeを挿入しています。

AMPは、scriptタグを使用できないようになっています。
そのため、リンクの置き換えがされずに、元の文字と下線のリンクが表示されます。

対処法

対処法は、とても簡単です。
ツールを使わずに、cssを駆使して自分でボタンの形状を作成すればいいのです。

とはいえ、cssが難しいという声も・・・

そこで、cssを用意しました。

リンクコード

まずは、記事に貼り付けるリンクコードです。

【URL】は、シェアツールの最初にあるシェアURLに置き換えてください。
【メッセージ】は、OFUSEで応援を送る などのボタンに表示する文字です。

OFUSE

共通CSS

次に、共通CSSをWordPressのカスタマイズにある追加CSSなどに貼り付けます。

サイズ

次にサイズです。

シェアツールは大中小の３種類あります。

ツールでは、小は文字を変更できません。
というか画像を貼り付けているだけです。
ここでは、文字を変更可能にしてあります。

次の３つのCSSから、一つ選んで貼り付けてください。

大：

中：

小：

カラー

次にカラーです。

シェアツールは５つのカラーが用意されています。
次の５つのCSSから、一つ選んで貼り付けてください。

緑：

青：

黒：

黒(塗なし)：

黄色：

スタイル

次にスタイルです。

シェアツールは２つのカラーが用意されています。
次の２つのCSSから、一つ選んで貼り付けてください。

角丸（大）：

角丸（大）：

自分好みに変更しよう

シェアツールは５つの色しか用意されていないので、もっといろいろな色を使いたいという要望がありそうですね。

その場合は、次のCSSの色部分を変更しましょう

background-colorは、塗りつぶしの色です。
colorは、文字の色です。
borderは、枠の種類と色・太さを表しています。

色指定については、次の記事を読んでみてください。

borderについては、次の記事を読んでみてください。

自分でCSSを用意すれば、自由に変更できます。
ぜひ、試してください。