【動く】Twitter BirdでSNSボタンを作ってみました♪

Twitter

お遊びでTwitterの鳥さんを飛ばしてみました。
画像はPhotoshopですぐにできるけど、それをコードで動かすのが難しい!
アニメーションGIFなど動画の方がはるかに簡単に思えるほどHTMLやCSSは覚えることが多すぎて大変ですね~(^^;)

スポンサーリンク

羽ばたけ!Twitter Bird!

作ったのは記事下にあるTwitterボタンのアイコンです。
(引っ越し しました。)

こんな風にボタン自体を作ることもできます。

WordPress用ならこのボタンにPermalinkを貼ってJSでシェア数を取得し、数をバルーン表示するコードが出回ってますが、expr属性に書換えなければいけない Bloggerでは難しくて分からない!(T_T)

前回作った3Dボタンもそうですが、せっかく作っても設置できないことばかりで悔しい~!

羽ばたく  Bird の画像

私が作ったものなので自由に保存してお使い下さい。
ただし、アニメーションボタンは規約違反となるかもしれないので自己責任でお願いします。

カスタムボタンなどで背景が青の場所へ設置する場合の白い鳥。

Twitter Bird Animation

↑背景を透過してるので見えませんが、右クリックで画像を保存してお使い下さい。

公式ボタンサイズ、背景白に設置する場合はこちら 

Twitter Bird Animation Blue

実際に動かすには、

↑これは公式ボタンサイズ用ですが、
16、20、24行目に-120pxとなってるのは20px四方の画像が6ステップで
20×6=120pxということです。
拡大・縮小などでheight: 30px; width: 30px; とした場合は
30×6=180pxとなり左から右へ動かすので-180pxとなります。

設置する場所へのHTMLは、
クラス名は適当に付けてるので書き直して下さいね。

Twitterのフォローボタンにするならテキストを書き換えて自分のページへリンクを貼るだけで簡単に設置できますが、
ページ情報をツイートするボタンにする場合は各ブログの変数があるので難しいですね。
前述したようにWordPressなら分かりやすく解説してくれたサイトがたくさんあります。

私も最近は真剣に引っ越ししてWordPressにしようかと悩み中・・・(´~`)う~ん

最後までご覧いただき ありがとうございました。

この記事が役に立ったと思った方はシェアして頂けると嬉しいです。(^^)

スポンサーリンク

このページをシェアしてくれたら嬉しいな~(*'∀'人)

テスト
おじぎ猫 訪問ありがとうございました。

お知らせ
スパムが多いため、コメントは承認制になっています。
確認次第、承認と返信をいたしますね。(^^)/

My Youtube
石巻貝を助けるコリドラス 石巻貝を助けるコリドラス
morphing morphing
恐竜体操で食べられた!? 恐竜体操で食べられた!?
ゴジラのパロディ ゴジラのパロディ
アナと雪の猫王 アナと雪の猫王
Prince PURI #2 Prince PURI #2
トカゲ酒飲んで変身!! トカゲ酒飲んで変身!!

 15日月末ポイント消滅 !? 確認はこちら 楽天市場

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る