[B! デザイン] hamacolaのブックマーク

はてなブログを一瞬でおしゃれにする最強のデザインカスタマイズ方法（テーマDUDEの手引き） - LITERALLY

以前、はてなブログのスマホデザインのカスタマイズ方法について書いた。はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 - Literally 多くの方に参考にして頂いたようでとても嬉しい。続編を書いて欲しいというご要望をいくつか頂いたので、僭越ながらまたデザインカスタマイズのTipsを書こう思う。前回はスマホデザインについてのみ触れたが、今回はPC表示のカスタマイズについて。主にコピペだけで「超カンタン」におしゃれなブログが作れるので、Webデザイン初心者の方にも是非読んでいただきたい。はてなブログユーザーでないのにこのページに辿り着いてしまった方、大変申し訳ありません… はてなブログテーマ「DUDE」を作りました。「はてなブログを一瞬でおしゃれに美しくする最強のデザインカスタマイズ方法」と仰々しいタイトルを先に決め、ブログのカスタマイズ記事を書き出し

hamacola 2016/04/30

リンク

ボタンにマウスを乗せた時のアニメーションCSSが簡単に作れるHover.css - #人生戦略実行マニュアル

HTMLのaタグにマウスを乗せたときの操作はa:hoverのCSSで記述できますが、アニメーションを作るのはちょっと面倒です。そういうときに便利なのがHover.css。 Hover.css - A collection of CSS3 powered hover effects GitHub：IanLunn/Hover アニメーションの種類が豊富サイトを見てもらえれば分かりますが、「Push」や「Pop」、「Rotate」に「Wobble」などすごくたくさんのアニメーションを使うことができます。使い方まずはここからダウンロード。 cssフォルダのhover.cssもしくはhover-min.cssを取り出す。 HTMLファイルのheadタグに下記のようにhrefパスを調整します。 <link href="css/hover.css" rel="stylesheet" media="