Subscribed unsubscribe Subscribe Subscribe

nerumae

ほぼねるまえに更新してます 読んだ本/聴いた音楽/マラソンみたいに続けていきたいふつうの日記

ソーシャルアイコンをフリー素材の夏っぽい水彩調に変更

備忘録_tech

抹茶です。自分用備忘録です。

twitter フォローアイコンがはてなデフォルトのものだとなんだか野暮ったい。
というわけで好みのソーシャルアイコンをフリー素材から探して挿入しました。
わたくしhtmlとか全くわからないので、また変更したくなったとき用にログ。

フリー素材を探す

Free Watercolour Social Media Icons

こちらのフリー素材を使わせていただきました。
色の種類はアクア、グリーン、ブルーパープル、ピンク、オレンジ。
甘すぎないのがとても素敵で好みです。

さっそくダウンロード。

はてなフォトライフにアップロード

http://f.hatena.ne.jp/macchauno/blogicon/
f:id:macchauno:20140622204433p:plain

アクアグリーンのアイコンを採用。
blogiconフォルダを作っておき、そこに素材をアップロード。
サイズ:100px→50pxに修正。

画像を右クリック→URLをコピーしておく。


サイドバー→htmlモジュールを追加

f:id:macchauno:20140622205006p:plain

htmlモジュールに以下コードをカスタムして挿入。





<a href=\"twitterのフォロー画面\"> <img src=\"さっきコピーしたアイコン画像URL\" target=\"_blank\"> </a>

あ、こういうのもあるんですね・・・
【ブログツール】ソースを「そのまま表示する為のHTMLソース」に変換


twitterのフォロー画面の出し方
一度サイドバー→プロフィール編集からtwitterフォローアイコンを表示。
リンク先URLをコピペして挿入。

f:id:macchauno:20140622211100p:plain

めんどくさいので普通に自分の公式twitterプロフのURLでもいいかもしれない。




f:id:macchauno:20140622211617p:plain


とりあえずfeedly登録ボタンと並ばせてみました。なんかバランス悪いのであとでまた修正します。
あとがんばってつくったもののtwitter以外のSNSをやっていなかった私...。
もっと簡単なやり方の模索も合わせて精進します。

Related Posts Plugin for WordPress, Blogger...