ドメイン引越ついでにデザインも変更することに。
前のは変に凝ってしまって自分でも分かりにくかったし、読みにくかった。
見れば分かると思いますが、今度のデザインのテーマは英字新聞です。
少し前なら無理だったかもしれませんが、css3の「columns」が使えるようになってきたので段組が簡単にできるようになりました。
段組にするとちょっと困るのが、画像も段組の中に入ってしまうので、小さくなってしまうこと。
「column-span」で段組を無視してボックスを広げることもできるのだが、横全部にしか広げられず、3段組のうちの2段に広げるということはできないので、画像には使わなかった。
そのかわりに、「transform」の「perspective」と「translate3d」を使って、ホバー時に画像をちょっと拡大するようにしました。ただし、この機能は現時点のグーグル・クロームではバグがあってうまく表示できないので停止させています。
他の新要素というと、記事のタイトルに長体をかけてみました。
「transform」の「scale」を使っているのですが、最初タイトルを普通に縦に伸ばしたら、すぐ下の本文の位置はタイトルを変形させる前のボックスの下に入るので、縦に伸ばしたタイトルが下の本文の上に重なってしまいダメだった。
そこで、普通のcssでタイトルのボックスの横幅を大きくして、文字も大きくしてから、scaleXで縮小するやり方でうまくいきました。
具体的には、タイトルのボックスを、width: 142%; にして、transform: scaleX(0.7); で横幅を0.7倍に縮小してます。
あとは、最近wired.jpがやりだしたのだけど、個別記事のページを表示した時に、その記事だけじゃなく、その下に関連記事や最新記事などをリンクではなく全文表示してしまってどんどん読ませていこうというやつ、新聞というテーマなので、短い本文の記事とかだけだとレイアウトの間が持たないし、あれを真似てどんどん関連記事などを勝手に表示していくようにしました。
それと、スマートフォン対応しています。スマートフォン向けには段組は解除して普通です。
古いブラウザーだと表示が崩れるかもしれません。ご容赦を。
そんなとこかな。
（でまたこのあとデザイン変えました）
2016年10月のブログ投稿
