MoonNote

はてなブログテーマ / CSS / jQuery

Webデザイン

line-height と padding の関係

記事やサイドバーの見出し、あるいはボタンなどに上下左右均等に余白を取りたいとき、例えば padding: 10px と指定しても妙に上下方向だけ伸びていることがあるが、これは余白を指定した要素に含まれる文字が親要素に指定された line-height の影響を受けて…

Web サイト向けの「Material Design」コンポーネントが公開される

Android 5.0 から採用されている「Material Design」を Web で使うためのコンポーネント「Material Design Lite」が Google によって公開された。内容的には CSS、JS および HTML のセットで、Github では「こういうページが作れますよ」というテンプレート…

フォントサイズの変更とデザイン性の維持

はてなブログテーマ製作用のテストブログに青空文庫から引用した「吾輩は猫である」を投稿して、実際に投稿したときテキストがどのように表示されるかをテストしてみた。何度見ても余白の取り方やボーダーの引き方が Themehaus の New Standard に似すぎてい…

「Tokyo Aerial Cityscapes Photo Bundle」が素晴らしい

Tokyo Aerial Cityscapes Photo Bundle ~ Graphics on Creative Market 以前にも紹介した Creative Market の Free Goods of the Week キャンペーンで、通常 $10 で販売されている「Tokyo Aerial Cityscapes Photo Bundle」という東京の空撮写真セットが6月8…

はてなブログの広告を Stylish で消す

有料プランを契約しないと1ページに最大5つの広告が表示されるはてなブログの守銭奴体質は前も書いたと思う。 広告そのものは AdBlock Plus とか uBlock を導入すれば簡単に非表示にできるのだけど、ただ1つだけ、有料プランの契約を促す「広告を非表示にす…

Creative Market で WordPress の有料テーマを無料で手に入れる

Free Goods Of The Week ~ Creative Market Creative Market というWebデザイン向けの有料素材を販売する海外サイト。このサイトは、週替りで数万アイテムの中から選ばれた6種類のアイテムを無料で配布する Free Goods of the Week というキャンペーンを開催…

CSS3で斜線

はてなブログのテーマストアを眺めていたら、使用中のテーマ、Fresh Green のデザインが実使用時とスクリーンショットとで差異があることに気づいた。記事タイトルとサイドバーウィジェットの背景に斜線が入っていない。CSS を見るとストライプを表示する背…

HTML5/CSS3事典を購入

リビングに置いている電波時計の時刻が若干遅れていた。観察すると、分針が動いたり動かなかったり、電池切れっぽい挙動。脚立を持ってきて壁から外して裏側を見たらなんてこった単3じゃねーか!エネループしかストックが無いんだが! ということで自転車に…