コリラックマに恋する男子の写真練習帖

北海道札幌市で写真を撮ってます。リラックマ・コリラックマ写真とネイチャー写真が多めです。オリンパスの「OM-D E-M1 Mark Ⅱ」「STYLUS TG-4」、フジフィルムの「X-T1」で主に撮影してます。

マウスオーバーで半透明になるSNSへのリンクボタンを作ってみました【はてなブログ・サイドバー】

どうも、madです。

 

先日、ブログFeedやSNSにリンクを貼るためにボタンを作ってサイドバーに設置してみました。

こんなのです。

 

f:id:madhatter87:20140127204351p:plain

 

書店で、フラットデザイン関係の本をパラパラ読んでて触発された感じ。

5分で分かる製作現場(8):5分で分かるフラットデザイン (1/5) - @IT

 

リンク先は以下の4つです。

  • ブログRSSフィード
  • Twitterアカウント
  • Facebookページ
  • Tumblr

 

それぞれのサービス固有の色のボタンにして、直感でどこにリンクが貼られているかわかるようにしてみました。

ちなみにマウスオーバーでボタン全体が半透明になります。

 

せっかくなので、ソースコードを晒してみます。

 

 

ボタンのHTMLとCSS

gist8647038

 

gist8647116

 

該当箇所を自分のアカウントのURLに書き換えした上記のHTMLファイルを、サイドバーに追加したHTMLモジュールに貼りつけて、デザインCSSの末尾に上記のCSSを貼りつければ動くはずです。

 

はてなブログにソースコードを貼るときはGistが便利 

はてなブログにソースコード貼るとき、どうやればいいんだろうと調べてみた結果こちらの記事にたどり着きました。

 

ソースコードを簡単に共有しよう! Gistからの貼り付けに対応しました - はてなブログ開発ブログ

 

Gistにコードを登録したら、はてなブログ編集画面のこのボタンからコードの貼りつけができます。

 

f:id:madhatter87:20140127211139p:plain

 

取得したはいいけれども、全くもって活用出来ていなかったGitHubのアカウントが役立つ日がやっと来ましたよ! 

 

今後もいろいろ作って公開していこうかと思います。