本ページはプロモーションが含まれています

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

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

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

 

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

 

スポンサーリンク

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

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のサイトからダウンロードしましたが、

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

feedly. your news. delivered.

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

 

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

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

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

 

//イメージ+リンク
<a href="<サービスのURL>" target="blank"><img src="<イメージのURL>" alt="<サービス名>"></a>

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

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

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

 

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

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

feedly make icon

 

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

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

update widget

完成形は、こんな感じ。

footer customize3

 

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

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

タイトルとURLをコピーしました