ブログのちから

副業やマネタイズ方法、アクセス解析やSEO、Wordpress、SNSの活用、ビジネス書の書評、育児、ダイエットなどを中心にお届けしてます。

フッターのカスタマイズついでにソーシャルアイコンを追加してみた。

   

昨日、カスタマイズしたフッターですが、

せっかくなので、Author, About の部分にソーシャルサービスのアイコンや、フィードアイコンを追加する事にしました。

 

こういう時に、ウィジェット化しておくと、変更するのがラクで良いですね。^^

 

SPONSERD LINK

まずはアイコンをゲットしてくる。

facebook-48 twitter-48 googleplus-48 rss-48

まずは、ソーシャルサービスやフィード系のアイコンを取得してくるところからですね。

Facebook, twitter, google+, RSS Feedの4つについては、下記のサイトからDLさせて頂きました。

Icons DB – free custom icons

このサイトでは、基本的に16px~512pxの各サイズが揃ってますので、お好みで使えます。

今回は48pxを利用しました。

 

feedly-follow-48

あと、Feedlyについては、FeedlyのサイトからDLさせて頂きましたが、

サイズを合せるために、サイズ調整の加工を施しました。

feedly. your news. delivered.

以上のアイコンをメディアにアップロードしておきます。

 

ウィジェットに書き込むむコードを書く。

次に、ウィジェットに書き込むむコードを作りますが、

アイコン部分のコードは下記のような感じですね。

 

※<イメージのURL>については、先ほどのアイコンのアップロード先のURLを取得して下さい。

これでアイコンの表示と、サービスに飛ばすためのリンクが出来上がります。

念のため、これらを<p>タグで囲みました。

 

feedlyの場合は、アイコンをクリックしたらfeedlyに登録させたいので、

Feedlyのサイトからアイコン作成し、そのURLを流用。

feedly make icon

 

ウィジェットに貼りつける。

後は、作成したコードをウィジェットに貼りつけて完成です。

update widget

完成形は、こんな感じ。

footer customize3

 

まずまずの出来栄えです。^^

まぁ、フッター部分は余り見られない部分なので、自己満足に近いかもしれませんが。www

SPONSERD LINK

 - ブログカスタマイズ ,

最後までお読み頂きありがとうございます!

よければシェアしてみませんか?
  • このエントリーをはてなブックマークに追加
  • Pocket
  • 471 follow us in feedly
SPONSERD LINK

  関連記事