ドメイン引越ついでにデザインも変更することに。
前のは変に凝ってしまって自分でも分かりにくかったし、読みにくかった。
見れば分かると思いますが、今度のデザインのテーマは英字新聞です。
少し前なら無理だったかもしれませんが、css3の「columns」が使えるようになってきたので段組が簡単にできるようになりました。
段組にするとちょっと困るのが、画像も段組の中に入ってしまうので、小さくなってしまうこと。
「column-span」で段組を無視してボックスを広げることもできるのだが、横全部にしか広げられず、3段組のうちの2段に広げるということはできないので、画像には使わなかった。
そのかわりに、「transform」の「perspective」と「translate3d」を使って、ホバー時に画像をちょっと拡大するようにしました。ただし、この機能は現時点のグーグル・クロームではバグがあってうまく表示できないので停止させています。
他の新要素というと、記事のタイトルに長体をかけてみました。
「transform」の「scale」を使っているのですが、最初タイトルを普通に縦に伸ばしたら、すぐ下の本文の位置はタイトルを変形させる前のボックスの下に入るので、縦に伸ばしたタイトルが下の本文の上に重なってしまいダメだった。
そこで、普通のcssでタイトルのボックスの横幅を大きくして、文字も大きくしてから、scaleXで縮小するやり方でうまくいきました。
具体的には、タイトルのボックスを、width: 142%; にして、transform: scaleX(0.7); で横幅を0.7倍に縮小してます。
あとは、最近wired.jpがやりだしたのだけど、個別記事のページを表示した時に、その記事だけじゃなく、その下に関連記事や最新記事などをリンクではなく全文表示してしまってどんどん読ませていこうというやつ、新聞というテーマなので、短い本文の記事とかだけだとレイアウトの間が持たないし、あれを真似てどんどん関連記事などを勝手に表示していくようにしました。
それと、スマートフォン対応しています。スマートフォン向けには段組は解除して普通です。
古いブラウザーだと表示が崩れるかもしれません。ご容赦を。
そんなとこかな。
(でまたこのあとデザイン変えました)
きっかけはワイアードの記事、
「世界一の国別ドメイン数」を誇る小さな島の不思議|WIRED.jp
独自ドメインが無料で取れるサービスがあるなんて知らなかった。
で、取ってみた。
記事ではFreeDomとなっているが、実際はfreenom、
Freenom – 誰でも利用できる名前
ほしい名前をいれればすぐに取れるかどうかわかる。
無料で取れるのは、
.tk(トケラウ)
.ml(マリ)
.ga(ガボン)
.cf(中央アフリカ)
.gq(赤道ギニア)
のもの。
最長1年まで。更新も無料でできる。
とくにこれといって取りたい名前もないので、ドメインハックで取ることにした。
ドメインハックとは、以前記事にしたが、
.us ドメインでドメインハック | Al.cherin.ga
ドメインハックとは、本来、ドメインが持っている意味(国、団体等)を無視して、区切り符号であるピリオドをとった場合に、別の意味の単語になるようなドメインのこと、もしくはその様なドメインを作ることを言う。[ドメインハック – Wikipedia]
というやつ。
無料のドメインの中でドメインハックしやすいのは.gaくらいしかないかなと思い、末尾が「ga」「が」になる単語を考えるのだが、末尾から考えるのは意外と難しい。
そこで後方一致で検索できる辞書サイトで探してみた。
ピンとくるものはあまりなかったが、
ドッペルゲンガー doppelgan.ga 実際のスペルはDoppelgängerだから、末尾はgerだけど。
天上天下 tenjoten.ga
とかいいかなと思った。
ちなみに無料のドメインでも三文字とかの短い短い名前や有名な単語は有料で売っている。
たとえば、
レディー・ガガ ladyga.ga
は1000ドルで売っている。
日本語の辞書に続き、英語の辞書でも探してみたところ、現在のこのサイトの名前、alcheringaに行きあたった。
alcheringaとは、オーストラリアのアボリジニの神話に出てくる黄金時代、夢の時代のことらしい。
alcherin.gaはすでに取られていたが、その場合はさらに細かく分ければいい。
alで区切り、cherin.gaで探すと入手できる事がわかったので早速取ってしまう。
会員登録して手続きすれば簡単に取れてしまった。
URL転送サービスのほかに、DNSもちゃんと利用できるので、サーバーを持っているならDNSアドレスを入れればすぐに自分のサーバーで新しいドメインが利用可能だ。
というわけで、サブドメインalを設定して、このサイトal.cherin.gaが使えるようになった。
あ、tenjoten.gaも取ってみたのだけど、当面使う予定はない。