ネットワークエンジニア系ブログ。エンターテイメント、おすすめ映画、本、キッズ系などお役立ち情報を紹介!

GOISBLOG

WordPress

ソーシャルボタンをお好みの画像にする方法

投稿日:2014年6月12日 更新日:

ブログを運営していく上で、じぶんの記事を見てくれた方ってどう思っているんだろうって思います。

その為に、ソーシャルボタンを設置することで、良かった記事は「いいね!」や「ツイート」ボタンを頂いたり、RSSボタンなどで定期購読をしてくれたりもします。

いまや、ブログを運営していくのには必要不可欠なソーシャルボタンをじぶんの好みのデザインに変えたいって思ったのでいろんなサイトをまねしながらやっちゃいましたので、やり方をメモっておきます。

ソーシャルボタンをオリジナルデザインに

いろんなサイトで見られるソーシャルボタン。
中にはホントお洒落な奴ありますよね。

実際にデザインも作成されている方もいるし。
じぶんもオリジナルデザインを作成したいですが、今の所は辞めておいて、ソーシャルボタンのデザインサイトがあるので、まずはそこからお好みのデザインを探しましょう。

スクリーンショット 2014-06-11 22.53.14

https://zocial.smcllns.com/

最近気になったソーシャルアイコンセット 40

スポンサーリンク


気に入ったアイコンをアップロード

これだって思ったアイコンをダウンロードし、じぶんのサイト(ここではWorePress)にアップロードします。

  1. ダッシュボードの「メディア」から「新規追加」を選択します。
  2. スクリーンショット 2014-06-11 22.59.37

  3. メディアのアップロードから「ファイルを選択」をクリック
  4. スクリーンショット 2014-06-11 23.00.20

  5. アイコンを保存したフォルダから該当のアイコン画像を選択します。

これで「メディア」のライブラリにアイコン画像が保存されます。

お好みの画像と連携する設定コマンド例

まずは、メディアのライブラリから先ほどアップロードした画像を選択します。
編集画面に来たら右側にある「ファイルのURL」を確認しておきましょう。

後は、それぞれじぶんのSNSのアカウントのURLを使って以下のコマンドで好きな所に貼ってみましょう。

スクリーンショット 2014-06-11 23.07.07

あとは、それぞれのSNSで以下のコマンドを書いちゃえばいい感じ。
じぶんはウィジェットに書いています。

右側のソーシャルボタンが以下のコマンドで書いております。

  • ツイッター編
  • <a href=&quot;https://twitter.com/ツイッター名&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot; style=&quot;text-decoration:none;&quot;><img src=&quot;https://ファイルのURL.png&quot; width=&quot;64&quot; height=&quot;64&quot; style=&quot;margin: 0 3px 0 5px;&quot; alt=&quot;twitter&quot;></a>
    
  • facebook編
  • <a href=&quot;https://www.facebook.com/ページURL&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot; style=&quot;text-decoration:none;&quot;><img src=&quot;https://ファイルのURL.png&quot; alt=&quot;facebook&quot;></a>
    
  • google+編
  • <a href=&quot;https://plus.google.com/プロフィールページの数字の羅列/posts&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;><img src=&quot;https://ファイルのURL.png&quot; alt=&quot;googleplus&quot;></a>
    
  • feedly編
  • <a href=&quot;https://feedly.com/feedlyページのURL&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot; style=&quot;text-decoration:none;&quot;><img src=&quot;https://https://ファイルのURL.png&quot; alt=&quot;rssfeed&quot;></a>
    

出来上がりはこんな感じ
twitter

ということで、こんな感じで作れます。
一度やってみると後は応用なので、試してみてください。

ついでに”nofollow”コマンドはGoogleロボットがサイトを訪問したときに外部サイトが貼付けられていることを嫌うみたいなので、無視してもらうように設定しております。

この記事が気に入ったら
いいね!しよう

Twitter で
スポンサーリンク

-WordPress
-, ,

Copyright© GOISBLOG , 2016 AllRights Reserved.