テーマ「sincere」をリリースしました。

  • 2012年January20日(Fri) 22:32 JST
  • 投稿者:
    みるく

新テーマ「sincere」は、「WAIproCSS Ver2.5.1 for Geeklog1.8.1」をベースに2カラムのエラスティックレイアウトを採用してます。

そして、このテーマはCSS3を使用し「プログレッシブ エンハンスメント」を取り入れてます。
(プログレッシブ エンハンスメントの説明は、@kaz_wuiさんのサイト「Website Usability Info」のプログレッシブエンハンスメント(Progressive Enhancement)という考えかたで詳しく説明されています。)
ですので、CSS3に対応していないブラウザでは単調なデザイン(ヘッダ等の背景のグラデーションが単色になる等)になりますが、情報は正しく得られるよう作成しております。


テーマ「sincere」 Internet Explorer7のキャプチャ画像です。

また、サイトロゴのフォントは、Google Font APIを使って表示してます。
(Google Font APIについては、@yhassyさんのサイト「could」のGoogle Font API で手軽に始めるフォント遊びで詳しく説明されてます。)

テーマ「sincere」も「WAIproCSS」と同様、アクセシビリティに配慮して作成しています。

このサイトはGeeklog1.7.1ですが、テーマ「sincere」のデザインを見ていただく為に1.7.1仕様のテーマsincereをこのサイトに入れております。 テーマのお試しで「sincere」を選んでいただくとテーマをご覧頂く事ができるので、参考にしてください。

続きを読む (286 ワード)

  • 記事を友人にメールする
  • 印刷用ページ
  • この記事をtwitterでRTする

アクセシビリティ配慮型テーマ WAIproCSS 2.5.1 for 1.8.1 を発表しました。

  • 2011年December29日(Thu) 14:22 JST
  • 投稿者:
    みるく

アクセシビリティ配慮型テーマ WAIproCSS2.5.1を出しました。

2011年12月1日にリリースされたGeeklog 1.8.1-jp-extended-1.0日本語パッケージ拡張版に入っているWAIproCSSと同じものになります。

続きを読む (46 ワード)

  • 記事を友人にメールする
  • 印刷用ページ
  • この記事をtwitterでRTする

フォーカス時のアウトラインの役割をご存知ですか?

  • 2011年December 6日(Tue) 14:00 JST
  • 投稿者:
    みるく

アウトラインの役割

リンクなどにフォーカスした時、アウトライン(外郭線)が表示されるのですが、このアウトラインにはどんな役割があるかご存知ですか?

アウトラインの役割を知らずに「何?この点線!じゃま」とCSSでoutline: none;と設定しアウトラインを消されているかたがいらっしゃると思うのですが、アウトラインが表示されないとキーボードのみで操作しているかたが自分が今どの位置にいるのかわからなくなってしまうんです。

リンクフォーカス時アウトラインが表示されないサイト

リンクフォーカス時にアウトラインが表示されないサイトがありましたので(ボタンフォーカス時にはアウトラインが表示されます)、アウトラインが表示されない状態で目的のページに辿り着けるか、また辿り着くのにどれだけ時間がかかり大変か体験してみましょう。私達はこのサイトの商品を購入したいとします。無事、目的の商品詳細ページまで辿り着く事ができるでしょうか?
サイトは、プレミアムバンダイ|こどもから大人まで楽しめるバンダイ公式ショッピングサイトです。このページ内にある商品名「ふわふわでかチョッパー 新世界だぞコノヤロー!」の詳細ページ(予約ボタンのあるページ)を表示するのが目的になります。チョッパーは、アニメワンピースに出てくるキャラクターです。では、みなさんも私と同じようにキーボード操作のみで目的のページまで辿り着けるか試してみましょう。(FirefoxTabキーで移動していきます)

続きを読む (80 ワード)

  • 記事を友人にメールする
  • 印刷用ページ
  • この記事をtwitterでRTする

iPadは手が不自由なかたにもやさしいのか?

  • 2011年October11日(Tue) 12:00 JST
  • 投稿者:
    みるく

手足が不自由なため車椅子で生活されているAさんにiPad2を実際に使ってもらい、使えない事等ないかを教えてもらいました。

また、手がまったく使えないかたがiPad2を使うにはどうすればいいかを考え検証してみました。

続きを読む (45 ワード)

  • 記事を友人にメールする
  • 印刷用ページ
  • この記事をtwitterでRTする

Operaでのmark要素のバグ検証確認

  • 2011年October 3日(Mon) 13:00 JST
  • 投稿者:
    みるく

Twitterで@tomo_eさんが

ここれは…ツライ… http://www.memo.marguerite.to/WWW/%E5%B9%B3%E6%88%9023%E5%B9%B4/7%E6%9C%8809%E6%97%A5-%E3%82%AA%E3%83%9A%E3%83%A911%E3%81%AE%3Cmark%3E%E8%A6%81%E7%B4%A0%E3%81%AE%E3%83%90%E3%82%B0.html

とつぶやかれているのを見て、リンク先の記事を読んだところ「<mark>要素にCSSでdisplay: inlineと設定すれば改行してしまう事を解消できるのでは?出きるのであれば<p>要素にdisplay: inlineを設定するよりスマートでは?」と思い、各種ブラウザで検証してみました。

<mark>要素は、HTML5で新たに追加された要素です。

続きを読む (31 ワード)

  • 記事を友人にメールする
  • 印刷用ページ
  • この記事をtwitterでRTする

Geeklog1.7.1にアップグレード

  • 2011年March 2日(Wed) 22:59 JST
  • 投稿者:
    みるく

当サイトは、Geeklog1.5.2からGeeklog1.7.1にアップグレードしました。

続きを読む (1 ワード)

  • 記事を友人にメールする
  • 印刷用ページ
  • この記事をtwitterでRTする