ITエンジニア系ブログ。格安SIM、健康、エンターテイメント、映画・ドラマ、本、キッズ系、FXまで!お役立ち情報を紹介!

GOISBLOG




WordPress

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

更新日:

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

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

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

※これからアフィリエイトを始めたい方はもしもアフィリエイトがおすすめです。
無料登録で報酬10%アップ・ランクによって別途報酬も!





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

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

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

スクリーンショット 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 , 2018 All Rights Reserved.