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

応援チップとは?のアイキャッチ画像

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

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

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

応援チップとは

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

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

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

あとは…

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

上記の2つだけで完了!

参考 応援チップ 14種類の仮想通貨と日本円を受け取れる、3秒で作れるサービス応援チップ 14種類の仮想通貨と日本円を受け取れる、3秒で作れるサービス

 

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

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

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

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

 

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

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

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

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

 

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

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

 

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

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

CSSでデザインを整える

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

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

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

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

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

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

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 を見られるようになりました。

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

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

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

CSSを追加する

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

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

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

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

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

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

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

補足
Font Awesome」で好きなアイコンを探して、Unicode番号をcontentに設定しましょう。

 

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

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

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

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

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

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

 

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

 

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

まとめ

大事なポイント
  1. 「応援チップ」は手軽に仮想通貨(+現金)でチップを送れる・受け取れるWebサービス
  2. 「応援チップ」はSNSやブログなど、最低限URLを載せられればどこにでも設置できる
  3.  CSSを追加してデザインを馴染ませると、より見栄え良く配置できる

 

龍之介

絵描きや開発者さんなどにとって、良いサービスになりそうですね♪

コメントを残す

メールアドレスが公開されることはありません。