WEBフォントで作ったクリックで沈むオリジナル3D・SNSボタンセット

3D・SNSボタン

WEBフォントでクリックすると沈むSNSボタンを作ってみました。(^^)
作ったのは、Facebook Twitter Google+ はてブ Line Pocket
カウント数無しタイプでサイドバーやスマホ表示用にぴったりサイズだと思います。

デモはこちら  (空リンクなので押しても大丈夫です)


スポンサーリンク

「icomoon」のインストール

これまで「FontAwesome」と「Ligature Symbols」を紹介しましたが Pocketのフォントがないため、Pocketボタンも欲しい!という方は新しく「icomoon」のWEBフォントをインストールする必要があります。

(「FontAwesome」も「Ligature Symbols」もインストールしてないけど、このボタンだけ作りたい方は「icomoon」だけで大丈夫です)

「icomoon」の使い方や、登録したSNSボタンセットを.zipで簡単にダウンロードできるようにしてくれてるサイトはこちら。 

Webフォントを使ったSNSアイコンの作り方【はてぶ/Pocket/Feedly/LINE】

アップロードサーバーの無い Bloggerの方や、
GoogleドライブへWEBフォントをアップロードして使用する方法を解説した過去記事はこちら 

デモと同じSNSボタンセットのコードはこちらです。

↑で紹介したJunkBlog様の「icomoon」.zipをアップロードした場合。
<head></head>内へ
4~8行目はアップロードした場所を指定して下さい。



ボタンのCSSはこちら
 


配置する場所へのHTMLはこちら 

<a href="#"></a>#部分をそれぞれのソーシャルリンクへ書き換えて下さい。

こちらが参考になります。
SNS投稿ボタンをオリジナル画像にするためのカスタマイズ/WebScripter.jp

http://webscripter.jp/technical-note/customizing_the_buttons_of_sns/

BloggerではオリジナルSNSボタンのリンクが貼れない?

せっかく作ったこのボタン。
自分も使用したいのに、ここ Bloggerではなぜか記事下などには入れられてもサイドバーやナビバーに配置することができません。(>_<)

Bloggerのexpr属性が関係してるようで1週間悪戦苦闘してみましたが解決できませんでした。(T_T)

expr属性を記述できる場所が決まってるようなので
jQueryでリンクを呼び出す方法も試しましたが、1度上手く行ったのにすぐに全然できなくなってしまいお手上げです。
参考にしたサイト
SNSシェアボタンをjQueryでオリジナルにカスタマイズする方法 | WEB制作ブログ
https://www.markernet.co.jp/blog/2015/01/14/post-4363/


おじぎする猫

BloggerのガジェットにオリジナルSNSボタンを配置して、
記事タイトル&URLを取得する方法をご存じの方がおられましたら、どうぞ教えて下さいませ。m(_ _)m

分からないので、重いから外したい「忍者おまとめボタン」です。(^^;)

解決しました♪(^^)/

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

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


スポンサーリンク

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

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

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

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

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

コメントをどうぞ

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

トップへ戻る