サイトリニューアル(予告)【#np2020】

bootstrap4.jpg 今のデザインになってだいぶ経ちますが、と書き始めて本当にそうだよないつ変えたっけ?と思って見返してみたら、なんと2011年11月でした。 ブログをリニューアルしました | mutter この当時はある程度レスポンシブも視野に入れつつ、でもまあいいか、モバイルファーストの方がいいって言うけどまずPC版作って余裕あったらスマホ対応版作ればいいや見たいに思ってたんですが、それから7年、PCよりスマホの方が使われる時代になってきました。まさかそんな時代が来るなんてなあ。携帯端末なんて見にくいサイトを無理やり見るための端末だったのに。時代は変わるもんです。で、結局、レスポンシブ対応もせずじまいのままここまで来てしまいました。画面が大きく影響は精細になって、携帯端末はサイトを快適に見ることができるように進化したのに、サイトが古いおかげでいまだに見づらいサイトのままっていうね。自分で自分のブログのおでんのレシピを探して読んでてイラッときてました。なんやねんこのサイト。 でも技術職を離れたらそういうのどうでも良くなってしまうんですよね……やっぱり、コードに触ってないと興味も持たなくなるもんですね。逆に言えば、今はまた前と同じくらいコードに触るようになってきて、また興味を持てるようになってきました。そもそも今どきスマホで見てピンチしてフォント拡大しないと読めないとかダメすぎるだろ。というわけで、仕事で使う基礎研究も兼ねて、サイトをBootstrap4でデザインし直してみることにします。基本的な配色、デザインなどは変わらない予定ですが、色を除いてなるべくカスタマイズをせずに特にCSSはなるべく書かずに使おうと思っているので、ある程度印象は変わるかもしれません。少なくともフォントはかなり大きくなりますね。このブログの本文のフォントは13pxなのに対し、Bootstrapはデフォルトで16pxなので。 例によってダブルヘッダーの合間を縫って休みの日に少しずつ作ってるので、リリースできるのがいつになるかはわかりませんが、基本的なページデザインは一瞬で出来てあとは分割してブログ用テンプレートを作っていくだけなので、そう時間は掛からないんじゃないかな?といってもこれが一番面倒なんだけど……まあ何とかなるでしょう。 もうしばらくお待ちください。 Bootstrap · The most popular HTML, CSS, and JS library in the world. Bootstrap4とは | CPIスタッフブログ Bootstrap4 | Webお役立ちネタ帳

続きを読む

ブログをリニューアルしました

空たけー #sky ここまでデザインを変えるつもりはなかったのですけど、 バージョンアップだ、サーバ引っ越しだとやっていたらいつの間にかこうなってました。 まぁ全体の意匠は、全体幅を除いて余り変わっていないので、リニューアルは言い過ぎかも知れませんが。 (可変幅はもういいや) 内部処理についてはかなり変えたのでページによってはエラーが表示されているかも知れません。 順次、修正していきますのでしばしお待ちを。

変わったところ

  • 全体の幅が1200px以上の可変から1000px固定に
  • 最近書いたレビューの表示を追加
  • ランダム表示を廃止
  • カスタムフィールドの採用
  • ウェブページの採用
  • Facebook、Twitterのパーツを追加
  • フォントサイズ、行間の調整
  • カテゴリ一覧の復活
  • 検索の削除
その他、細かい部分など。ドロップシャドウのCSS化とか。

ちなみに

前回の時はメニューなどエントリ以外の部分はSymfonyに仕事をさせていました。 かなり柔軟性が出来て色々出来たのですが、移行するのがとても大変になってしまったので、 今回はMovableTypeのみで動くように原点回帰しています。

続きを読む

[Tumblr] Tumblr Thumbnails 0.5をリリースしました。

Tumblr Thumbnailsを更新しました。 Tumblr Thumbnails | Tumblrのサムネイルを作成するサービス

主な変更点

  • ライブラリファイルおよび貼り付けコードの変更
約半年ぶりのリリースです。 サーバの引っ越しに合わせ、JavaScriptの処理方法を変更しています。 これに伴い貼り付け用コードや使い方が大幅に変更になっていますが、 一応、旧バージョンも並行して使用できるようにはなっています。 (但しメンテナンスは行わないと思います…)

貼り付けコードの変更について

これまでは1つのファイル内でJSONデータの取得→解析→描画を行っていましたが、これを、 JSONの本来の使い方である、JSONデータを取得→コールバックに渡すという処理に変更しました。 結果、貼り付けコードは2つに増えましたが、 ライブラリファイルの大きさは2.6KBから870バイトまで小さくなりました。 headタグ内に記述しておく↓(ライブラリファイル)
表示させたい場所に記述する↓
表示結果↓

続きを読む

Internet Explorer7以下で正常に表示されないようです 【修正済み】

「internet Explorer」で表示が乱れるという報告をいただいたので調べたところ、次のようになりました。

  • Internet Explorer 8 → 正常に表示される
  • Internet Explorer 7 → ページ冒頭のみ表示される
  • Internet Explorer 6 → 左カラムが右カラムに回り込んでしまう
  • Internet Explorer 5 → 左カラムが右カラムに回り込んでしまう
現在修正中ですので、しばらくお待ちください。

追記

Internet Explorer 7については修正を完了しました。 IEの様々なバグの真相らしきもの – CSS HappyLife しかしそれに伴い、Internet Explorer 6の表示乱れがひどくなったような気がします(汗) 現在確認しているInternet Explorer 6での不具合:
  • 左カラムが右カラムに回り込んでしまう
  • 右上のFlashが左上にずれて表示される
  • ヘッダーメニューが左にずれる
引き続き修正を行います。

追記その2

応急措置としてInternet Explorer 6では以下のように対応しました。
  • 左カラムのサイズを固定
  • 右上のFlashを非表示
IE6ってそういえばpositionでのrightに対応していないんでしたっけ… → いやそんなことないね。IE5でも動くはず

追記その3

一応の修正を行いました。 気になる点はまだ少しありますが(特にIE6)、ひとまずこれで及第点ということにしようと思います。
  • 「position: absolute」時の基点がIE7以下で異なる
  • 「right」の取扱いがIE6以下では異なる(レイヤーの影響か正しくrightが適用されないことがある)

続きを読む

サイトをリニューアルしました。

主な変更点は下記の通り。

  • Diary、moblogをmutterに統合
  • カテゴリ構成を大幅に変更
  • メニュー幅の拡大(250px→300px)
  • その他デザインを若干変更
内部的な主な変更は下記の通り。
  • MovableTypeをアップグレード(4.261→5.04)
  • 「エントリ情報をXMLに書き出した上での部分的なダイナミックパブリッシング」を廃止
  • 枠組みとしてSymfonyを採用
  • JavaScript、CSSの配置を最適化
まだ落ち着かない部分がいくつかありますが、順次整備の予定です。

続きを読む

リニューアル中。

2011年になったからというわけではないのですが、なんとなくサイトをリニューアル中です。なんでしょう、前年に得た知識を投入して次の年のリニューアルを行うってのはもうこの時期の個人的な年中行事かもしれません。今自分がエネルギーを投入しているのがサイトのビジュアルデザインではなく内部処理であるところに、2010年自分が何にエネルギーを注いできたかが表れているような気がします。 (なので、見た目はそんなに大きく変わる予定はありません) 大きな違いというと、Movable Typeを4から5に上げること。3から4に上げたときの印象が正直あんまりよろしくなかった(ただ無駄な機能がたくさん付いただけという気がした)ので、今回も実はあんまり期待していなかったのですが、実際に入れてみると、うん、結構良いです。複数のドメインを扱っている自分としてはwebサイト単位で切り分けるのはオーバスペックではないし、テンプレートの仕様は今見ると柔軟性がある気がするし。 現在のシステムで問題がある部分というと、静的/動的の共存がかなり強引なところ。デザインの変更の度に全再構築が嫌で、Smarty導入およびエントリデータを全てXML化して書き出すというそれMovableTypeである意味あるの?という仕様だったのだけど、今回は比較的MovableTypeの仕様に沿いつつ、使えないところ(検索とか)を置き換えていこうかという作戦。再構築無しに反映させたいところは、PHPのreadfileとSymfonyを組み合わせればかなり上手くできることが解ったので、その辺で模索中。 進捗はまだ15%くらいながら、大枠のデザインは終わったのでリリースは案外早いかも。 まだいろいろと面倒なところは残ってるけどね… 寝る。

続きを読む

[Tumblr] Tumblr Thumbnails 0.4をリリースしました。

Tumblr Thumbnailsを更新しました。 内部プログラムの変更と若干の最適化を行っています。 Tumblr Thumbnails | Tumblrのサムネイルを作成するサービス

主な変更点:

  • 動作ベースが独自フレームワークからSymfonyに移行
  • キャッシュシステムの見直し
  • ライブラリファイルの圧縮
先日リリースした新しいTumblr Binderと同一のフレームワークに乗ることで、若干動作が高速化されました(ログインの必要はありません)。また5.1KBあったライブラリファイルを2.6KBまで圧縮しています。これもロード時間短縮のためです。本当はもう少し小さくしたいところなのですが…頑張ります。 なお時々データの取得に失敗して画像が表示されないことがありますが、これはTumblr が混雑して取得に失敗したことによるものです。Tumblr(およびTumblr API)の混雑が解消し次第、問題も解消しますので、申し訳ありませんが気長にお待ちください。

続きを読む

[Tumblr] Tumblr Thumbnails 0.3.1をリリースしました。

Tumblr Thumbnailsをリニューアルし、0.3.1をリリースしました。 Tumblr Thumbnails | Tumblrのサムネイルを作成するサービス バージョンナンバーは上がっていますが、すみませんほぼ機能縮小です。 またこれまでのサービスでの致命的なTYPO(×thumnail → ○thumbnail)の修正のため、タグの張り替えやCSSの変更などが必要になっています。本当にごめんなさい。 今回の変更点は以下の通りです。

  • 日付による指定の機能を削除
  • ドメインの変更(th.umbls.com
  • 実行スクリプトの名称変更(thumbnails.js)
  • タグ指定時の動作の軽量化

続きを読む