webdesign一覧

Tagumblr で Tumblr のタグ一覧を高速に表示!・初投稿も表示する

詩的私的 Tumblr

Un dia especial
(あの雲が最初に生まれたのは──どこだろう)

2011 年も Tumblr が面白かった! 「タンブラくんのこと──、嫌いじゃないよ!(夕日に向かってダッシュ」──というくらい愛してる(?)。

現在、下の 3 サイトを運用しています。

どのサイトも、ゴテゴテと過剰装飾ぎみではある。それには理由があります。Tumblr は 1 つの記事が短くなりがちなので、せっかくやってきた お客さんが「なんだ、このホームページは中身スカスカだな!」と思ってしまう。

タグ一の覧を表示する「Tagumblr」は、つい最近になって発見し、すぐ気に入りました。類似のスクリプト(プログラム)は多いけれど、もっとも高速に「タグクラウド」表示してくれます。

さっそく導入してみましょう!

続きを読む


UTF-8 の文字化け対策! 「美乳」ではなく「†(ダガー)」を使う

文字化けと対策

Fight Mojibake!!!
(これからも── Mojibake と戦い続ける)

「文字化け」しているウェブサイトは、最近では見なくなりました(と思いたい)。

大昔──、まだ人類が石のヤリでマンモスと戦っていたころは、何度も何度もウェブ・ブラウザの「文字コード」を手動で変更していましたよね。何もかもが懐かしい──。

石のヤリ:
Internet Explosion ──もとい Internet Explore 6
マンモス:
Yahoo!ジオシティーズ

──いや、両方とも世間では健在ですけれど。

ウェブ上の文章が異常な状態で表示される原因は、おもに「文字コード」の問題です。ソフトウエアと人間の両方が成長することで、じょじょに改善されているけれど──。

文字化け – Wikipedia

Unicode 版「美乳テーブル」

ところが、まだまだ文字は化ける!

そこで、UTF-8 時代の「おまじない」として、次のページで面白いアイデアを紹介しています。

Unicode 版美乳テーブルを探せ

これをちょっとだけ改変して、利用してみました。

続きを読む


HTML5 に未対応の IE9 未満でも JS なしで マークアップする方法

HTML5 と IE

HTML5 logo with American Sign Language
オレンジ色の──にくいアンチクショウ

ウェブ・デザインの世界では、そろそろ HTML5 への移行が進みつつあります。まだ主流にはならないけれど、完全に無視するのは もったいない。

HTML5 を学ぶには、下のページが最適です:

さて、HTML5 の世界へ入門するにあたって、最初の難関は IE への対応でしょう。IE8 以下(IE9 未満)は HTML5 の新しい要素を認識できないため、そのままでは CSS で装飾できません。装飾系男子には困った問題だ。(ドヤァ

下で紹介するシンプルな JavaScript を利用することで、オールド・タイプな IE でも HTML5 の新しいタグを CSS でデザインできます。こちらは一般的な解決方法ですが、JavaScript を切られていると効果がない

そこで今回の目玉として、HTML5 用のタグでマークアップして、なおかつ JS を使わずに IE8 以下でも CSS でスタイリングする方法(※後述)を説明します。

2011-12-17T15:04:37+09:00 追記

中途半端な知識で小生意気なコメントを残したら、あの小飼弾さんに取り上げられました! 頭がフットーしちゃいそうなほど うれしい!

404 Blog Not Found:備忘録 – 本blogをHTML5にするためにやったこと

ただ、 100 文字以内という制限があるはてなブックマークでは、完全に意図を伝えられません。上の記事と関連しているため、今回の記事を加筆・修正しました。

続きを読む


ColorDrink – 色の組み合わせを支援するツールやウェブ・サービス

配色に便利なウェブ・サイトやソフトウエア

glasses
(色という色を──飲み尽くせ!)

ウェブ・デザインの中でも、とくに配色は むずかしい。「このサイトのイメージ・カラー」みたいに一色だけ決めれば良いのなら簡単ですが、色は組み合わせることで生きてくるのです。

昨日の記事で紹介した Solarized のように、使いやすいカラーリングをビシッ! と作りたい。

今回は、配色を助けてくれるツールたちを紹介します。なかなかマニアックで楽しいヤツらですよ!

続きを読む


Solarized (配色の設定)を Xyzzy や「色の設定」ダイアログで使う

Solarized を各アプリケーションで使う

Cuba solarized
(きつい色の世界から──連れ出してくれる)

最近、Solarized という名前の配色設定が好きになりました。テキスト・エディタなどに設定すると、絶妙に見やすいバランスの 16 色です。低コントラスト・低彩度なので色同士が主張しすぎず、ギラギラしていません。

Solarized - Ethan Schoonover
Solarized – Ethan Schoonover

さっそく、長年 愛用している Xyzzy (やる気あふれるテキスト・エディタ)に設定してみました。HTML や CSS・JavaScript を書く際に、各要素がハッキリと見分けられて良い感じです。

Xyzzy 用の設定ファイル

新しく作った GitHub のページに、Xyzzy 用の ini ファイル(抜粋)を公開しました。

xyzzy-solarized.ini at master from asiamoth/Colors – GitHub

~/usr/{user name}/xyzzy.ini の該当箇所に上書きしてください(~/ は Xyzzy のホーム・ディレクトリ)。

言うまでもなく、事前のバックアップを忘れずに!

続きを読む


LinkWithin – 関連性の高い記事を画像付きで表示するサービス

LinkWithin

Kindred Spirits (Monkey See - Monkey Do) (by TW Collins)
(「つながり」ができると楽しい)

世界中に向けてブログを発信している以上は、書いた記事を多くの読者に読んでもらいたいものです。このブログのような、世界の秘境──未開の地──地獄の三丁目(新宿の二丁目にあらず)──でも同じこと……。

そして、せっかく来てもらった「お客さん」には、「ゆっくりしていってね!!!」と言いたい心境です(微妙な笑顔で)。

言うだけならタダだし。

──じゃなくて! 本当に、心の底から、タマシイを込めて──いろいろな記事を読んでもらいたい。

ということで(いつものように前置きは飛ばしてもらうとして)──。

関連した記事を読んで欲しい場合には、「LinkWithin」というサービスが便利です!

LinkWithin – Related Posts with Thumbnails

最近になって知ったばかりのサービスですが、「100SHIKI」では 1 年前に記事にされていた……。

縮小画像付きで関連記事を表示してくれるブログ向けスクリプト『LinkWithin』 – 100SHIKI ~ 世界のアイデアを日替わりで

「LinkWithin」で提供された(JavaScript)コードをブログに追加するだけで、カンタンに関連記事が表示されます。上記の記事で書いてあるような、日本語の問題もなくなっているようですね。

ここからは、「LinkWithin」を Movable Type へ設置する方法について書きます。

続きを読む


jQuery でファイルの一部を読み込む(jQuery.fn.inc プラグイン)

jQuery.fn.inc プラグイン

祝・jQuery 1.3 リリース!

Release:jQuery 1.3 – jQuery JavaScript Library

それを記念して──というわけでもないが、自作した jQuery のプラグインを紹介する。名前は「jQuery.fn.inc」。そのままのネーミングだ。

http://asiamoth.com/download/js/jquery.fn.inc.js

指定したファイルを任意の場所に読み込むという、よくあるインクルード系のスクリプトである。しかし、読み込んだファイルは任意の部分だけを表示できる、というのが特徴だ。

インクルードするファイルは 1 つにまとめて、そこから複数の場所を読み込む、という使い方ができる。ファイルの管理が楽になるだろう。

完全に自分の創作ではなく、いつも読んでいる「かたつむりくんのWWW」からスクリプトをパク──参考にした。

jQuery でファイルをインクルードする ( jQuery によるモジュール化) – かたつむりくんのWWW

元のスクリプトを jQuery プラグイン化して、(X)HTML を変更しなくても使えるようにした、だけである。エンジンは元のままになっている。もう少し自分好みに仕上げたかったが、自分への宿題にしておいた。

続きを読む


ウェブログのデザインとは何をデザインすることか

ウェブログとは何か

ウェブログそのものについての考察は、とっくに語り尽くされた。そう思っていたし、自分の中でも「漠然としながらも揺るぎない存在」になっている。──人生とか自分・世界・猫のかわいさと同じで、わざわざ定義したり他人に説明したりしなくても(できなくても)、「そういうものが在る」と胸を張って言える存在だ。

しかし、明確にウェブログを定義した記事を見た。一文を引用しよう。

ユーザにとってウェブログはハイパーテキストアプリケーションの一種だ。

position:fixed大嫌い (agenda)

「ハイパーテキストアプリケーション」とは何だろう?

World Wide Webはハイパーテキストという概念を応用した「ハイパーテキストアプリケーション」で、ブラウザはハイパーテキストアプリケーションのビューワー。当然ウェブログもハイパーテキストアプリケーション。

position:fixed大嫌い (agenda)

「これだ!」と膝を打ちたくなった。ウェブログというものをこれほど分かりやすく示した言葉はない──とは言い難いが、自分にはしっくり来た。

さて、ウェブログがハイパーテキストの応用ならば、目指すべきデザインというのも見えてくる。不要な装飾は削ぎ落とすべきだ。どこまでをブラウザの機能に任せ、どこからがデザインの腕の見せ所か──。じっくり考えると、使いやすく見やすいウェブログができそうだ。

続きを読む


「はてなブックマーク」の分かりにくさ、を分かりやすく図解

はてなブックマーク

「『はてなブックマーク』は飲み物です」

──と言いたいくらい、はてブが好きな自分(意味不明)。

はてなブックマーク - ソーシャルブックマーク はてなブックマーク – ソーシャルブックマーク

──なんだけど、いまだに使っていて「あれ?」と思うことも多いですね。

今回は、その「あれ?」というモヤモヤ感を上手に説明してある、「シナトラ千代子」さんと「聴く耳を持たない(片方しか)」さんの記事を紹介します。

続きを読む


ホッテントリメーカーについて最初に知るべき 5 つのリスト

ホッテントリメーカー

タイトルは釣りです。──というか、『ホットリメーカー』で作りました。

ホッテントリメーカー

ホッテントリメーカー (クリックで Flickr へ)

5 つのリスト

まぁ、せっかくなので 5 つのリストを挙げてみましょうか……。

  1. 入力したキィワードから、ホッテントリ(Hot Entry)に なりそうなブログ記事のタイトルを生成するサービス
  2. id:pha さんの作品である(「ホッテントリメーカー」を作った – phaのニート日記
  3. ホッテントリメーカーでひとこと – はてなハイクもあるよ!
  4. はてなスターや「一行 BBS」の使い方がウマい!
  5. 最近、猫を飼い始めました(私信)

『ホッテントリメーカー』も良いけど、ウチの猫も かわいい……(親バカならぬ、バカ親)。

続きを読む