トップ > デザイン変更

デザイン変更

id:Tpongさんのページを見ていて私も写真を使ったタイトルにしてみたくなりました。コンセプトとしては

  • 横長の形を活かしたい
  • 自分で撮った写真を素材にする
  • 作業時間は1時間程度に抑えたい

素材は月の写真にしました。脇見運転は左右にウィンドウをリサイズした場合、左は固定で右側のコンテンツのみサイズが変わるようにしています。ですので、タイトルの写真もそういう仕掛けが使える素材が理想的です。
スタイルシートで背景画像を指定する時には、横方向のウィンドウサイズが写真サイズを超える時の挙動を次の二つの設定から選びます。

  • 画像が足りないところはウィンドウの地の色を表示する
  • 画像を繰り返し表示する

タイトルデザインとしては、この二つのいずれかを選んだ上で、それが不自然にならないように素材を加工することが望まれます。月の写真の場合、うまい具合に背景が夜空の黒です。そこで地の色を黒にすることで写真が切れていることがユーザーからわからないようにしました。
タイトル文字は左に配置します。写真はタイトル文字が夜の部分になるようにトリミングし、見所の夜明け部分が本文の上に来るようにしました。タイトル文字と夜明けの間が少し間延びしていますがその分、視線の左から右への動きが、夜から夜明け、そして昼への変化に合致しますので、うまく行ったかなと思っています。
素材の写真はエッジを強めに加工してクレーターを引き立たせた後、50%に縮小しています。また、ユーザーが文字の表示サイズを少々変えてもレイアウトが破綻しないよう、縦のサイズはかなり余裕を持って切り取っています。具体的な数字で言うと、縦100ピクセルの写真ですが、私のブラウザでは50ピクセル程度が表示されているだけです。
月の写真の場合モノクロにする手もあるのですが、無加工の色も温かみがあって好きなのでそのまま使っています。
さてスタイルシートですが、以下のものをデザインページのスタイルシート欄に追加しています。

h1 {
    color : silver;             /* 文字の色 */
    border-bottom: none;        /* 文字の下線なし */
    margin : 0px 0px 0px 0px;   /* 外の要素との間に隙間を作らない */
    padding-top: 20px;          /* 文字と上枠の間の隙間 */
    padding-bottom: 20px;       /* 文字と下枠の間の隙間 */
    padding-left: 5%;           /* 文字と左枠の間の隙間 */
    padding-right:5%;           /* 文字と右枠の間の隙間。意味なし */
                                /* background-image は背景の画像を決める */
    background-image:url(http://f.hatena.ne.jp/images/fotolife/s/suikan/20060504/20060504201137.jpg);
    background-color:black;     /* 背景色を黒にする */
    background-repeat :none;    /* 背景画像は繰り返さず一度だけ使う */
}

これは、使用しているhatenaのCSSからタイトルに使われているh1タグのスタイルシートだけ抜き出して手を加えたものです。
この設定で写真とタイトル部分はウィンドウ枠にぴったりとくっつき、左右に伸び縮みします。写真の左右が足りない場合も右に黒い地が表示されますので読者からみてデザインが破綻しません。
最後に、思ったより写真の黒が強かったので、はてなのタイトル部分を黒基調に変更しました。さらに、全体のデザインをダーク・グレーに変更して今のデザインに落ち着いています。
ということで今回のデザイン変更は、はてなの基本操作とCSSの基本知識だけで行う事ができました。

/* -----codeの行番号----- */