WordPress 新テーマ、Metro UI っぽくしてみた

WordPress 新テーマ作成

WordPress の新テーマを作りました。
ブラウザ要件などは以前と変わっていません。Firefox、Webkit 系、Internet Explorer 8 & 9 にて確認しています(IE 7 までは未対応)。
一部色を変えるスウィッチャーが iOS デバイスでは機能しないのですが、これはそのうちなくすかもしれないのでとりあえずそのままで。
もし崩れていたり明らかに統一のとれていない箇所があったら教えてください。

今回は、Windows Phone や 次期 Windows である Windows 8 (仮称)で採用されている Metro UI を意識して作ってみました。

Metro UI – Wikipedia

簡単に言えば、地下鉄の案内表示のような、指示に従っていけば目的に必ず辿り着く簡潔・明瞭性、そしてスイス・デザインを基調に据えた単色のタイルデザインが特徴です。
私はまだ Windows Phone を所持していませんが、今のところのスマートフォンの本命だったりします。Metro UI は結構好きなのでテイストだけでも取り入れてみようと思った次第。

Lessons From Swiss Style Graphic Design | Smashing Magazine
なぜ Windows Phone のアプリバーのボタンは丸い線で囲まれているのか? – ななふぉ

本当はフォントも Segoe 使いたいのですが… Win 8 には入ってるのかなあ。

おそらく Windows 8 が発売されたら Metro UI っぽいサイトはわんさか出てくると思いますが、そうなったらたぶん変えると思います、性格的に(笑)。
でもタイルデザインってほんとタッチデバイスと相性いいですね。

  • Posted at 14:48 on Mar 28, 2012
  • | (Closed)

WordPress 新テーマ作成、HTML5 & CSS3 に移行

久しぶりの更新になっちゃいました。
このブログ、WordPress で作ってるんですが、それのテーマ(cf. Wikipedia)を作ってました。作ってるあいだはなかなか記事を書く気になれず><。
ぼちぼち再開しますー。

さて大事なお知らせから。
今回から、サポートブラウザから Internet Explorer 6 と 7 を外しました。やはり今でもそれらを使っておられる方は、敢えてそうしているのではなく知らないからだと思うんですね。そもそも「ぶらうざ? それってなぁに?」というような。別にそれは悪いことでも恥ずべきことでもないのでいいんです。問題は、知らずに古いブラウザを使っていることにより、様々なリスクに晒されているということです。
例えば現地の状況に無知な旅行者が、現地住民でも普段行かないような危ないところに行こうとしていたら、教えてあげますよね? そこは危ないです、行かない方がいいですよと。もしジャーナリストのようなプロであれば「気をつけてくださいね」と言うでしょう。
それはやはり知っている人が教えてあげるべき事だと思うんです。
そういう目的もあり、敢えてここで Internet Explorer 6 と 7 をサポートせず、注意喚起のメッセージを表示させることにより、一ブログとして「更新した方がいいですよ」と言うことにしました。べ、別にめんどくさくなったわけじゃないんだからねッ!!

あと今のところ Internet Explorer 8 でもちょっと表示が不安定です。ずれたりすることがあります。原因がいまいち分からず、分かれば対応したいですが、少しずれるだけでクリティカルな問題ではないのでそのままにするかもしれません。次期 IE の 9 ではほとんど OK です。
その他、Firefox や WebKit 系(Google Chrome、Safari)、Opera では問題ないです。
少し修正するところがあるので、折を見て修正していきます。もしお気づきの点があれば教えてください。

Read the rest of this entry »

  • Posted at 13:25 on Jan 21, 2011
  • | (Closed)

HTML5 でサイトりにゅ~ある!

HTML5 で書いてみたよ!
XHTML やめて HTML5 で書いてみたよ!(画像をクリックで原寸表示)
サイトの内容も足したり引いたりしてますので、よろしければご覧になってみてください。まともに更新したの2年ぶり;

http://site-ichijo.net

今回から Internet Explorer 7 以下のブラウザをご利用になっている方にはモダンブラウザにしてみない? なお誘いを表示させています。
IE7 以下をお使いの方へのお知らせ
IE7 以下をお使いの方へのお知らせ。(画像をクリックで原寸表示)

HTML5 と関係ないところでは、上記スクリーンショットを見比べていただくと分かるかと思いますが、罫線が本来は綺麗な画像なんですけれども、IE6 & 7 ではただの灰色の線になっています。IE8 は OK です。

HTML5 に対応していない Internet Explorer 8 以下への対応に関しては後述しますが、フォローしていますので表示崩れなどはないはずです。

Read the rest of this entry »

  • Posted at 03:42 on Apr 19, 2010
  • | (Closed)

ブログ変更点まとめ

ブログ周りを色々変更
ずいぶん時間が経っていますが、いくつかブログ周りに手を加えました。

◆やっと命名。
HTML日記からウェブログシステムに移行して何年? って感じですが、やっと名前が決まりました。(今までの「site-ichijo.net * blog」はその通り暫定のもの)
で、決めたのが「*n.on.log(のんろぐ)」。
一応込めた意味は、
・non log – のんのログ。「のん」は子供の頃よりの愛称。
・nonlog – ただのログ(記録)にあらず。
・n on log – n(ori) on log. のりがここにいるよ、みたいな感じ。

◆favicon、iPhone/iPod touch向けアイコンを設定。
ブラウザでサイトを見ていると、URLバーの左側に小さいアイコンが表示されることがあります。これはfavicon(favorite icon)というもので、サイト作成者は自由に設定することが出来ます。
私は今までなんとなく押しつけがましい気がしてfaviconは好きではなかったのですが、iPhoneでホームにブックマークすると、(faviconとは別の、iPhone/iPod touch向けの)アイコンを設定していないとただのスクリーンショットになってしまうので、これを機にfaviconと併せて設定しました。

iPhone/iPod touch向けのアイコンはこういう感じです。
iPhone向けアイコン

faviconのほうはグレーにしました。(表示面積が小さいので色数は少ない方が分かりやすい。)

このアイコンですが、トレードマークみたいなもの? (聞いてどうする。)
花が好きっていうのもありますが、この7という枚数には意味があります。正7角形というのは、実際に描いてみると正確には描ききることが出来ません。そういう意味で「掴みきれないもの」みたいな感じの印象があります。虹のような光もそう。捉えどころのなさというのは憧れます。「蓴菜な人」になりたい。(蓴菜[じゅんさい]はお店のお澄ましなどに入っているぬめりのある芽。掴みにくいことから「蓴菜な人」とは「捉えどころのない人」などの意味。関西の方で遣う言葉だそうです。神戸在住の伯母に教えてもらいました。)

◆WordPress新テーマ作成。
久しぶりに模様替えしました。NHKの「クローズアップ現代」の新しいスタジオデザインが好きなので、その配色(淡いコーラルピンクと白)を使いました。
加えて、ブログっぽくなくしたいという思いが以前よりずっとあって、利便性を損なわずにブログらしからぬレイアウトを模索。なかなか難しいですね。

TwitterのウィジェットをFlash版からJavaScript版にしました。その結果、InternetExplorer環境では多少不安定さが出ています。どうにもしようのないIE6向けにはFlash版を読み込ませるようにしていますが、「操作は中断されました」などのエラーが出る場合、ご連絡ください。(ブラウザの種類とヴァージョンをお教えください。)
それにしても今回ばかりはIE6をサポートブラウザから外そうかと本気で思いました(笑)。うちのサイトはFirefox比率が高いのですが(IEが45%、Firefoxが30%くらい)、IEのヴァージョンで見ると6,7,8がそれぞれ32~33%と三つ巴になっています。全体の15%くらいがIE6ユーザということになります。これが5%を切ったら実際にサポート外そうかと思っていますが、あと2年くらいは難しいかもしれないですね。5%じゃ厳しいかなあ、3%切ったら、でしょうか。

  • Posted at 10:54 on Sep 27, 2009
  • | (Closed)

WordPress新テーマ作成

昨年の12月から本ブログで使っているブログツール・「WordPress」ですが、それを一から勉強し直してました。こんなに真剣に勉強したのって何年ぶりだろうっていうくらいマジで(笑)。
とりあえず基本はなんとなくつかめた気が。なるほどねー。

最初と言うことでテーマ(WordPressにおけるブログスキンのことです)はシンプルなのを作ってみました。
最近半透明が気に入ってるので全面的に採用。ティップスはまた別記事で。

表示崩れ、文字化け、使い心地悪い、見にくい等ありましたらご連絡ください!

画面解像度・横1000px以下の訪問者がついに全体の1%を切りましたので、今回のテーマでは横幅を900pxとさせていただきました。(今までは800pxのユーザをフォローするため、780pxに抑えていました)
横スクロールはめんどくさいんじゃゴルァ! な方もご遠慮なくどうぞ!
今モニタ安くなってますよ、とか言わないから。泣きながら780pxに戻すから。

  • Posted at 12:24 on Oct 13, 2008
  • | (Closed)