ブログのプロフィールにボタン付きソーシャルリンクを設置しよう

Posted on

Sponsored Link

ブログをやっている人は他のソーシャルメディアも使ってると思うのでブログにリンクを貼りたいところです。
僕は今まで味気ないテキストリンクを使っていましたが、すっきりしてたほうがいいので上の画像のようなボタンに変えました。
それどうやるのって聞かれたのでやり方書いておきます。

ボタンアイコンを入手

僕が使っているのはこちらのサイトからダウンロードできます。ミニ・ソーシャル・アイコン ヴォルフロッシュ
国内で使われているソーシャルメディアはほとんどカバーされてると思うので十分だと思います。
他にも無料のアイコンなどは探せばいくらでも出てきますので、お気に入りのアイコンを探してみてください。

アイコンをサーバーにアップロード

ここではWordPressを使って解説しますが、各サービス共に画像をアップロードする機能はあると思いますし、だいたい手順は同じだと思うので頑張ってください。
新規投稿画面に行って、アップロード/挿入をクリック。
そこでダウンロードした中で自分の使うアイコンだけを選択してドラッグしてアップロード。
アップロードされたら好きなボタンの「表示する」をクリックしてリンクURLの欄にアイコンのリンクさせるURLを入力して投稿に挿入をクリック。

するとこんな感じのテキストが挿入されます。
前半のa href=の後がリンク先のURLで、後半のimg srcの後のURLが画像の貼ってある場所です。普通の画像リンクは前半と後半が同じになっていて、クリックすると画像が拡大表示されるような使い方をしますね。

はい、こんな感じでどんどんリンク付きのボタンを作ってください。

各ソーシャルメディアの自分のページへのリンク

〇〇の部分を自分のIDに変更してください。
twitter:https://twitter.com/◯◯
mixi:http://mixi.jp/show_profile.pl?id=◯◯
tumblr:http://◯◯.tumblr.com/
instagrm:http://instagram.com/〇〇
foursuquare:https://ja.foursquare.com/〇〇
アメーバピグライフ:http://life.pigg.ameba.jp/user/◯◯
アメーバピグ:http://pigg.ameba.jp/?targetAmebaId=〇〇
Skype:skype:◯◯?userinfo (Skypeアプリが起動します)
メールアドレス:mailto:自分のメールアドレス(メーラーが起動します)

ウィジェットに表示させる

ボタン付きのリンクがひと通りできたら、一気にコピーしましょう。
WordPressの場合は外観→ウィジェットとクリックして編集画面へ。

利用できるウィジェットの中からテキストをサイドバーのほうにドラッグして先ほどコピーしたものを貼付けましょう。
皆様のサイドバーの表示やボタンのサイズがわからないのでなんとも言えませんが、4つおきぐらいに<br>をはさんで改行するといいのではないでしょうか。確認しながらいろいろ試してください。

うまくできたでしょうか。
アイコンなどいろいろ工夫して自分だけのプロフィールページを作ってみてください。




SHARE:)
このエントリーをはてなブックマークに追加 LINEで送る
Yahoo!ブックマークに登録

 
rss feed follow us in feedly Subscribe with livedoor Reader


コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>