「aquapple」バージョン9、細かいパーツをRetinaディスプレイに対応＆お祝いイラストを頂きました | aquapple
2013年4月に当サイトをリニューアルしてから1ヶ月。サイトの外観は大きく変わりました[1]が、実は細かい部分の更新が追いついていませんでした。 それが、「アイコン画像」だったり「特定のdiv要素の背景画像」でした。ゴールデンウィークの前半を利用してこれらのパーツも合わせてリデザイン、同時にRetinaディスプレイに対応しました。 今回リデザインしたパーツの一部をご紹介します。 h4タグとh5タグ h4タグは従来、左側に背景画像を用いていましたが、今回から画像の使用をやめ、css3のlinear-gradientに切り替えました。 Amazonの商品紹介 Amazonの商品紹介の背景画像もRetinaディスプレイに対応しました。ヘッダー部分の画像は2倍のサイズで作成し、background-sizeで縮小させています。細かいところですが「Amazon.co.jpで詳細を見る」ボタンも、Re
枠線付きの吹き出し
ミニブログの隆盛以降ウェブ上でよく見かける吹き出しをCSSで作るお話。単色のものはかなり前に書いた。今回はそれに枠線をつけてみよう！ みよう！ みよう！ Demo: Bordered Speech Bubble 枠線は単なるsolidなborderで少し角を丸めただけ。 尻尾を付ける :before擬似要素を使う。デモの3番目のサンプルのように、まず枠線と同じ色で三角形を作る。三角形は以前のエントリで書いた手法と同じで、左右のborderをtransparentにすることによって作る。 .speech-bubble:before { border-top-width: 16px; border-right-width: 16px; border-bottom-width: 0; border-left-width: 16px; border-color: #369 transparent;
Googleの新しい検索結果ページに採用された「ナビゲーションパネル」を非表示にするuserContent.cssを公開します | aquapple
Googleが2010年5月5日頃から本格的に検索結果のページをリニューアルしています。ネット上では賛否両論となっていますが、私はどちらかというと今回のリニューアルは改悪と考えています[1]。 特に左側に新設された「ナビゲーションパネル」が常時表示されているため、検索結果の1件目の表示領域が狭くなってしまい閲覧性が著しく低下していると考えています。 数日間静観していましたが、Google側で非表示にする選択肢が与えられませんでしたので、FirefoxのuserContent.cssを使ってスタイルを書き換えることにしました。このスタイルシートを使うとどうなるかというと… 改悪された検索結果ページが… こうなります。左側に常時されていたナビゲーションパネルが非表示になり、代わりにボタンを設置しています。このボタンにマウスを乗せると… 従来左側に表示されていたパネルが現れる仕組みです。 このス
Googleが検索結果のCSSを微妙に変更、userContent.cssを修正しました | aquapple
先々月のサーチウィキ機能導入に続き、今月もGoogleの検索結果が一部変更されています。 まずこちらが2009年5月、サーチウィキ導入直後の検索結果です。 そしてこちらが今日、同じ単語での検索結果。Googleのロゴマークが小さくなったほか、左側の余白が微妙に変化しています。 わかりやすく、2枚の画像を重ねてみました。これを見れば一目瞭然。代表的な変更点として、 Googleのロゴは縮小 ウェブの横に「＋検索ツールを表示」が追加 検索ボックス・ラジオボタン・検索ボタンはロゴ縮小に伴い、それぞれ大幅に左上へ移動 1件目の検索結果は左へ2ピクセル、上へ6ピクセル移動 などがあげられます。 前回は太字の部分が反対に下に押し下げられており、たまらずuserContent.cssを公開したわけですが、今回は逆にロゴが縮小されたため、かなり好印象。 しかし、「＋検索ツールを表示」のように余計な機能が追
WordPressに移行しました | aquapple
約4年半お世話になったレンタルブログサービス「JUGEM」に別れを告げ、CMSにWordPressを採用しました[1]。 過去の全ての記事を引き継ぎつつ同時にリデザインを行ったので、以下、以前のサイトからの変更点をつらつら。 CSSブラッシュアップに伴い、本文中のHTMLタグを削減しました これまで、本文はPタグで囲っていましたが、このPタグの余白を0としていたため、実際には改行を多用していました。 このため、CSSを解釈できないRSSリーダで見たときに余白が非常に多くなり、無駄になっていました。 今回、CSSでPタグの余白を調整したことにより、PタグとPタグの間の改行を取り除きました。これにより、本文中のHTMLを約2割削減しました。 リキッドレイアウトを調整しました 2008年8月より、このサイトはリキッドレイアウトを採用してきましたが、フッタの位置調整がうまくいかず、左右のサイドバー
NHKオンラインがリニューアル | aquapple
NHKオンラインがリニューアル 2009/03/17 15:40 NHKオンラインがリニューアルしました。主な変更点はリニューアルのポイント！から、過去のNHKのサイトデザインはNHKオンライン 「ヒストリー」 1995-2008から見ることが出来ます。 1995年のサイト開設からほぼ毎年リニューアルされており、今回が10回目になります。 驚いたのがそのソース。 実はコンテンツのほとんどはリストタグでくくられており、これらが14個の外部CSSによってレイアウトされています。リストタグと言えば、 リスト1リスト2リスト3 の様に、項目を羅列する際に使用したり、CSSと組み合わせてメニュー部分を構成するのに使う程度だと思っていましたが、ここまでも大胆にリストタグでサイトを構成するのは初めて見ました。 見た目もコーディングも美しいサイトリニューアルと言えるのではないでしょうか。 Tweet
ウノウラボ Unoh Labs: JavaScriptを使わないスターレイティングの作り方
こんにちわ、山下です。 Amazonなどで使われているような商品を☆の数で評価するスターレイティングというものがあります。今回は、CSS The Star Matrix Pre-loadedに紹介されている記事を参考に、その作り方を簡単に紹介しようと思います。 1.画像を用意する まず次のような1枚の画像を用意します。16×16ピクセルの☆が、横に5個、縦に11個並んでいて、下に向かうに従って色の付いている☆の数が増えているのがポイントです。 2.HTMLを書く HTMLはとてもシンプルで、ULリストを使います。 <ul class="rating onestar"> <li class="one"><a href="#" title="1 Star">1</a></li> <li class="two"><a href="#" title="2 Stars">2</a></li> <l
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
App Storeの10億ダウンロードカウンタがかっこいい | aquapple (archives)
ブログのデザインをブラッシュアップしました | aquapple (archives)
フッターの表示がFirefox 2と3で違う？ | aquapple (archives)
はてなブックマークをカスタマイズ | aquapple (archives)
リデザイン終了。 | aquapple (archives)
リデザイン中 | aquapple (archives)
CSSとJavaScriptで飾りつけする吹き出し風デザイン*ホームページを作る人のネタ帳