仮想通貨が送れる「応援チップ」とは？ブログに綺麗に設置する方法も解説

Twitterでフォローしている「ひさしApp」さんが
仮想通貨を受け取れるWebアプリ をリリースされました！

ブロックチェーン系Webアプリ第二弾リリースしました！
「応援チップ」
１４種類の仮想通貨が受けとれるブログパーツ＆URL生成サービス
なんと日本円まで受け取れます。さらにコイン無くても投げれますｗ
クリエイター支援や仮想通貨系ブログ、プロフ、VTuberと相性良いかもhttps://t.co/LEIFjEYjDZ pic.twitter.com/zqcpZUTL8K

— ひさしApp@コイン系SNS じぶんコイン開発者 (@Hisashi_vc) March 16, 2018

今回は、実際にブログパーツを生成して、当ブログのウィジェットに置いてみたので、
体裁よく設置する方法もご紹介します。

※当ブログは「SANGO」という素敵なWordPressのテーマを使用しております。

応援チップとは

「14種類16種類の仮想通貨と日本円を受け取れる、3秒で作れるサービス」

Twitterの投げ銭サービスを利用した応援です。

「応援チップ」のサイトにアクセスして、Twitter ID を入力して生成ボタンを押すだけでOKです。

あとは…

1. 埋め込みタグをブログやWebサイトに貼り付けて設置
2. URLをTwitter等のSNSに貼り付け

上記の２つだけで完了！

当ブログでは試しにサイドバーに設置してみました。

ブログのウィジェットへの設置方法

設置場所はウィジェットに限定されているわけではありませんので、

特にこだわりがなければ 埋め込み用のタグを挿入するだけ で表示してくれます。

より綺麗にブログのデザインにマッチさせたい方は、以下を参考にしてみてください。

他のブログパーツの設置時にも応用できる方法です！

ウィジェットにカスタムHTMLとして貼り付ける

まずは……外観→ウィジェットを開きます。

ウィジェットに挿入できるパーツはテーマやプラグインごとに変わってきますが、

任意のHTMLを挿入できる「カスタムHTML」を選択します。

そして、作成した「応援チップ」の埋め込みタグをコピー＆ペーストしましょう。

タイトルは好きなものをつけてください（ここでは「応援チップ」としました）。

CSSでデザインを整える

この状態では、設置したブログパーツが端によっており、

背景も白いため何だか不恰好に見えます。

せっかくなので、見た目も整えていきましょう！

テーマによって変わってきますが、「SANGO」の場合は、

「外観」→「テーマの編集」からスタイルシート（style.css）を編集していきます。

最終的には以下のようなコードを記述します。

/* 応援チップウィジェット */
.sidebar div#custom_html-25 {
 background: none;
}
.sidebar #custom_html-25 .widgettitle:before {
 content: "\f06b";
}
.sidebar div#custom_html-25 table {
 margin: .5em auto;
}
.sidebar div#custom_html-25 table tr:nth-child(2) {
 background: white;
}

それでは、以下で一つずつ解説していきます。

カスタムHTMLの固有番号の調べ方

まず、「custom_html-25」の部分、これは応援チップが設置されているウィジェットパーツは「25番のカスタムHTML」であるということを指定しています。

この25という数字は、調べないと分かりません。

これが別の数字であれば、別の「カスタムHTML」を指定してしまいます。

そこで、この数字の調べ方ですが、少し特殊な操作が必要です。

まずは、このウィジェットパーツが実際に表示されているページを開いてください。

このブログの場合はこんな感じ（これはCSS追加後の表示）です。

ここでは一番使っている人が多いWebブラウザである「Google Chrome」を例にして説明します。

応援チップの上で右クリックして出てきたメニューの中から「検証」を選びます。

すると、下部またはサイドにHTMLとCSSのウィンドウが開きます。

これで、表示されている場所の HTMLとCSS を見られるようになりました。

<div id="custom_html-25" class="widget_text widget widget_custom_html">

僕の環境の場合はココでした。

カーソルをHTMLに合わせると、実際の表示箇所に色がつきます。

CSSを追加する

「カスタムHTML」の固有番号が分かったので、CSSでデザインを変えることができます。

一つずつ、記述したCSSの意味を説明していきます。

/* 応援チップウィジェット */
.sidebar div#custom_html-25 {
 background: none;
}

まずこれは好みの問題ですが、
ブログパーツの周囲の余白は白いと嫌なので、背景を消しました。

.sidebar #custom_html-25 .widgettitle:before {
 content: "\f06b";
}

「SANGO」は「Font Awesome」に対応しているので、好きなアイコンをつけることができます。

今回はギフトのアイコンを挿入しました。

.sidebar div#custom_html-25 table {
 margin: .5em auto;
}

デフォルトではブログパーツが左寄せになっているので、中央に配置します。

.sidebar div#custom_html-25 table tr:nth-child(2) {
 background: white;
}

このままだとブログパーツの下2/3部分の背景が透過されており、

後ろが透けてしまっているので、

改めて背景を白色に指定しています。

以上の手順で、このような見た目に設定できました！

このような手順で、HTMLを確認し、CSSを編集することで、サイトのデザインを柔軟に変えることができます。

まとめ

同じカテゴリーの他の記事もどうぞ

有名マンガの一コマをブログやSNSで無料で使える「マンガルー」とは？仮想通貨が送れる「応援チップ」とは？ブログに綺麗に設置する方法も解説OnePress Image Elevatorプラグインで画像貼り付けを簡単に！有料バージョンも使ってみました