マイフォトのデザインをなんとかしたい(その３)

飽きたのでこれにて終了と言ったが、結局その後も土日は出かけられないので、CSSをいじったりしている。以下、そのログ。

(1) 一覧ページのアイテムボックス（class="ItemBox"）の背景の端に灰色が見えてしまう問題は、その一つ上の要素（class="PhotoList__item"）で色指定されている事に気付いたため、それを透明化することで解決した。

ただ、そうするとそもそもアイテムボックスの背景画像自体が要らなくなったような……。

---

(2) 一覧ページをスマホなどの小さい画面で見ると、画像が縮小されて見られるのに、個別ページは縮小されるようになっておらず、画面からはみ出た状態で見なければならない。

そこで、画像幅（class="Photo"）に上限を設けた上で、伸縮するようにした。

意外とこの調整が難しかった。左右のボタン（nextBtn、prevBtn）がDIVタグで囲われたエリアの外側に配置されているため、単純に画像幅上限を100％に近い値にすると、スマホの小さい画面にピシッと納まるはずが、左右ボタンだけが画面から横にはみ出し、ページが左右に気持ち悪くヌルヌル動くようになってしまう。

試行錯誤の結果、画像幅上限を82％とした。これで私が使ってるiPhoneSEの画面横幅（375ポイント）に、ほぼピッタリになるのだ。だからそれより小さい画面だと多分、やっぱりはみ出すと思う。

---

Windowsっぽくなってますか？

(3) ちょっと飽きたので余興。

このブログのCSSをいじって、blockquoteタグで囲むと、Windowsっぽくなるようにした。（笑）

ウインドウの右上のボタン類も、なんとかCSSでそれっぽく表示したかったが、俺には無理。Gif画像でごまかしてみた。

---

(4) フッターの白い線部分は何のためにあるのか良く分からないが、その部分のクラス名が分かったので（class="footer__inner"）、基本となる色と白の中間位の色になるようにした。

ただ、どうもしっくり来ないので、またいじるかも。

---

と言った途端に、また変更。

基本となる色と白のグラデーションにした。でもなんか重たい印象になったな。

……で、このように変更したら、IEで右上のバナーが急に表示されなくなった。なんで？

---

---

---

ココから下は、その２と同じです。

***参考にされる奇特な方へ***

CSSファイルは背景画像と色を変更した３種類。

orange

blue

green

http://kahou.life.coocan.jp/blogjs/orange.css
http://kahou.life.coocan.jp/blogjs/blue.css
http://kahou.life.coocan.jp/blogjs/green.css

それぞれCSSファイルはココに入ってマス。↑
ダウンロードして使いたい場合は、右クリックメニューから「リンク先を保存」などで対応してください。

<link rel="stylesheet" href="http://kahou.life.coocan.jp/blogjs/orange.css" type="text/css" /><A class="kahou" HREF="http://kahou.way-nifty.com/"><IMG SRC="https://kahou.way-nifty.com/photos/cg/bannerlogo.gif"></A>

「説明文／紹介文」に埋め込んでいるタグはこんな感じ。コピペでどうぞ。

尚、画像ファイルなどはご自身で用意して、CSSファイルの中やタグのリンク先を必ず変更して使って下さい。（言わなくてもそうすると思うけど。）
気まぐれにリンク先の画像ファイルを変更したり削除したりしますので、その時そのまま使っていると必ず破綻します。