[ブログ] きてる！あいさつボタン設置がきてる！俺の中で！俺の中で！

インターネットってバーチャルで冷ややかですよね。

SNSで友達！と思っていても大抵裏で悪口言ってますよね。

そんな悲しく淀んだインターネッツに一筋の清涼剤を見つけたのでご紹介。あいさつって、いいですね！

文章や写真以外のコミュニケーションって、いいよね！

たかが挨拶ぐらい、できなくてもいいんじゃない？ : まだ東京で消耗してるの？

リアルでは「2年住んでいるマンションでようやくご近所の方に会釈できる程度のコミュニケーション能力」な私です。でもですよ、こんな場末のブログを読みに来てくれるあなたと文章以上のやりとりはできまいか？とそこそこ熟考しているんです。わりと、けっこう。

ツイッターで話しかけてよね！って言っても知らない人にメンション飛ばすのはなかなか憚られますよね。なので、僕から一方的にあいさつさせていただきます。

きっかけは……

▲面白ステキなこの記事です。

「テキストとか画像より、もっと自分をアピールしたいんだけど、実顔や動画はちょっと…」と思っている方に、「声だけ」というのはちょうどいいんじゃないでしょうか。 …

via.【スマホ対応】クリックすると音が鳴る！「あいさつボタン」の設置方法

なんですか、この、明後日な（いい意味で）アイデアは！

顔出しはしないけど声出しするっていう、頭かくしてなんとやら感は！（いい意味で）

いいじゃないですか、しかもあらゆさんの記事では特別な録音環境や音声編集環境が必要ない方法や、ボタンのスマホ対応までできてるじゃないですか。

Tooltip & Audio Test – jsdo.it – Share JavaScript, HTML5 and CSS

▲あらゆさんとは別にこちらでもあいさつボタン（CSSアニメ・スマホ対応版）のコードも覗けます。

というわけで録音してぼたん設置

これ、来てんちゃうの？あいさつボタン！

全体の手順は……

1. 録音・編集（スマホで出来るよ）
2. ボタン画像設置（なくてもCSSで出来るよ）
3. 素材のアップロード
4. javascriptをコピペ（ありがたいね）
5. てすと・調整

ボタン画像がなくてもリンクをCSSでボタンぽく出来るよ！※音がなります。

.botan-poi-yatu {
background:red; /* 好きな色でどうぞ */
padding:10px;
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
border-bottom:2px solid rgba(0, 0, 0, 0.57);
color:#fff !important;
text-decoration:none !important;
-webkit-box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
   -moz-box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
        box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
}

頂いたコードでは、ボタン画像の時もテキストリンクの時もホバーした時にマウスカーソルがリンク時のものにならなかったので、ホバーでマウスカーソルを変えるCSSを一応足しておきます。

.hover_no_yatu:hover {
    cursor: pointer;
}

擬似クラスのhoverにカーソルを変えるCSSの命令を与えておきます。

カーソルが変わらないとクリックできるって気が付けない人もいるかもしれないので。

記事下やサイドバーにルールはない

いやぁー、いろいろおもしろいことを考える人がいますね。そして、面白いことをちゃんと技術をもって実現できちゃう人もいますね。

via GIFMAGAZINE

僕なんかはありがたくコードを拝借するだけですけど、改めてブログの形や、設置するウィジェットにルールや定形はないなぁと、柔らかい頭って大事だなと、ふんどしを締め直す次第です。

パンツはボクサータイプです。

音声なんかはスマホで録音できたりしますからね、声ウィジェット、簡単に差別化できて、顔出しじゃない人もいろんなアピールができるのでいいですね。

季節で音声とか入れ替えたりしたら長いこと遊べそうです。あいさつボタン！ぜひお試しあれ。

文：シンタロヲフレッシュ

はてブ

pocket

twitter