| @ブログ
写真や画像があると文章だけよりも記憶に定着しやすいらしい。なのでヘッダー画像のバリエーションを増やしてみることにした。これまで自分が撮ってきた写真の中で気に入ってるもの、ヘッダー画像にちょうど良...

background-image random pick up

写真や画像があると文章だけよりも記憶に定着しやすいらしい。なのでヘッダー画像のバリエーションを増やしてみることにした。これまで自分が撮ってきた写真の中で気に入ってるもの、ヘッダー画像にちょうど良さそうなやつを 14 枚選んで、これまで表示していた門司の「平民食堂」のやつと合わせて 15 枚をランダムピックアップして表示させている。本当ならランダムではなく記事ごとにイメージに合う画像を選定すべきなのだろうけどそこまではやってない。「このブログ主はこういう写真の場所に行ったりこういう写真をいいと思ってるんだな」ということが伝われば良いと思ってる。

ランダム表示に関して、最初は JavaScript で CSS の background-image を書き換える方式でやっていたが、 DOM の読み込み完了時に動く都合上、かくつきが出てしまう。それで画像の選定は Ruby で行って data-attribute として指定し、予め CSS にそれぞれの data-attribute に応じた background-image を書いておくことにした。これでかくつきはほぼほぼなくなった。

<div id="header" data-background-image="heimin">
</div>
#header[data-background-image="heimin"] {
  background-image: url(header-bg-heimin.jpg);
}

このほかにも CSS 周りを結構いじってて、パンくずリストが載る部分は文字が読みにくくなるのでグラデーションでシャドーを掛けてる。これまで float でやってた配置の制御を flexbox に置き換えたりもやった。今のデザインのベースは 10 年前に作ったので、当時はグラデーションなんかは CSS で実現できず横幅 1px の画像をリピートする方法を使ったが、これで画像を捨てて全て CSS で実現できそう。良い世の中になってきてる。

この記事に似ている記事

  • サイトの横幅を広げた December 16, 2018
    45408683155 5c0a8b4dc5 h
    サイトの横幅( max-width )を 1280px に広げてみた。最も頻繁にこのサイトを訪れる自分の閲覧環境が 5K ディスプレイになったので昔の環境( 13 インチの MacBook )に合わせて作ったデザインでは横幅が間延びした感じが...
  • space April 01, 2009
    1012 portalshit 1
    CSS書き直した。↓透過pngをいっぱい使ったのでIE6では酷いことになってると思う。というか、CrossOver MacのIE6ではとんでもないことになってた。でもそういうのもひっくるめてインターネットだと思う。そういうわけでまだIE6を使...
  • Portalshit in iphone
     ダンコーガイ氏の方法も試してみたんだけど、うまくいかなかった。あと @media screen な方法にはバグがあるらしいので、UserAgentで振り分けてiPhoneにだけ専用CSSを適用させることにした。P_BLOGにはUAごとに適用...
  • 著者について June 21, 2011
    Header bg dark beach
    著者肖像 職業 サイト片手間ビリティエンジニア( Web プログラマー) 技術スタック Vim 、 Ruby 、 Rails 、 Lokka 、 Docker 、 MySQL 、 PostgreSQL 、 AWS 、 Terrafor...
  • 98c07b3fb3b4b01e1d6da5dcdc713f7e
    ECS 化していたブログをさくら VPS に戻した。理由としてはお金が高かった。普段、 S3 と Route 53 に払ってる金額の 20 倍くらいの金額になって少ない小遣いでは払えないと思ったので VPS に戻した。ただ AWS で運用して...
  • Screenshot
    &lt;/param&gt; &lt;/param&gt; &lt;/param&gt; &lt;/param&gt;&lt;/embed&gt; ここ数日Twitter調子悪いですね。過去ログがたどれないのは不便極まりない。 そんななか気...

Comments


(Option)

(Option)