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

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

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

AMPで使用できない理由

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

  • <a data-ofuse-widget-button href="https://ofuse.me/o?uid=49884" data-ofuse-id="49884" data-ofuse-color="middle-yellow" data-ofuse-style="rectangle">OFUSEで応援を送る</a><script async src="https://ofuse.me/assets/platform/widget.js" charset="utf-8"></script>
AFFS Simple Code Viewer
Copy

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

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

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

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

対処法

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

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

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

リンクコード

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

  • <p class="ofuse"><a href="【URL】"><span>【メッセージ】</span></a></p>
AFFS Simple Code Viewer
Copy

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

OFUSE

共通CSS

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

  • .ofuse a{
  • display: inline-flex;
  • text-align: center;
  • vertical-align: middle;
  • align-items: center;
  • justify-content: center;
  • font-weight:bold;
  • max-width:100%;
  • box-sizing: border-box;
  • }
  • .ofuse a:before{
  • content:"";
  • display: inline-block;
  • background-size: 100%;
  • background-repeat: no-repeat;
  • margin: 0 5px 0 0;
  • }
AFFS Simple Code Viewer
Copy

サイズ

次にサイズです。

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

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

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

大:

  • p.ofuse{
  • line-height: 2;
  • font-size: 15px;
  • }
  • .ofuse a:before{
  • width: 30px;
  • height: 25.35px;
  • }
  • .ofuse a{
  • min-width: 260px;
  • height: 60px;
  • }
AFFS Simple Code Viewer
Copy

中:

  • p.ofuse{
  • line-height: 2;
  • font-size: 10px;
  • }
  • .ofuse a:before{
  • width: 18px;
  • height: 15.21px;
  • }
  • .ofuse a{
  • min-width: 180px;
  • height: 40px;
  • }
AFFS Simple Code Viewer
Copy

小:

  • p.ofuse{
  • line-height: 2;
  • font-size: 15px;
  • }
  • .ofuse a:before{
  • width: 18px;
  • height: 15.21px;
  • }
  • .ofuse a{
  • min-width: 120px;
  • height: 26px;
  • }
AFFS Simple Code Viewer
Copy

カラー

次にカラーです。

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

緑:

  • .ofuse a{
  • background-color: #29cece;
  • color: #12779d;
  • border: solid #29cece 1px;
  • }
  • .ofuse a:before{
  • background-image: url(https://ofuse.me/assets/images/icon_ofuse.png);
  • }
AFFS Simple Code Viewer
Copy

青:

  • .ofuse a{
  • background-color: #fff;
  • color: #12779d;
  • border: solid #12779d 1px;
  • }
  • .ofuse a:before{
  • background-image: url(https://ofuse.me/assets/images/icon_ofuse_c.png);
  • }
AFFS Simple Code Viewer
Copy

黒:

  • .ofuse a{
  • background-color: #000;
  • color: #fff;
  • border: solid #000 1px;
  • }
  • .ofuse a:before{
  • background-image: url(https://ofuse.me/assets/images/icon_ofuse.png);
  • }
AFFS Simple Code Viewer
Copy

黒(塗なし):

  • .ofuse a{
  • background-color: #fff;
  • color: #000;
  • border: solid #000 1px;
  • }
  • .ofuse a:before{
  • background-image: url(https://ofuse.me/assets/images/icon_ofuse_b.png);
  • }
AFFS Simple Code Viewer
Copy

黄色:

  • .ofuse a{
  • background-color: #ffea00;
  • color: #000;
  • border: solid #ffea001px;
  • }
  • .ofuse a:before{
  • background-image: url(https://ofuse.me/assets/images/icon_ofuse_b.png);
  • }
AFFS Simple Code Viewer
Copy

スタイル

次にスタイルです。

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

角丸(大):

  • .ofuse a{
  • border-radius: 100px;
  • }
AFFS Simple Code Viewer
Copy

角丸(大):

  • .ofuse a{
  • border-radius: 6px;
  • }
AFFS Simple Code Viewer
Copy

自分好みに変更しよう

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

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

  • .ofuse a{
  • background-color: #29cece;
  • color: #12779d;
  • border: solid #29cece 1px;
  • }
  • .ofuse a:before{
  • background-image: url(https://ofuse.me/assets/images/icon_ofuse.png);
  • }
AFFS Simple Code Viewer
Copy

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

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

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

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