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

(5/3記事の後半を切り離し、リライトしました)

(一覧ページ)

@niftyのココログに標準装備されているマイフォトの話。

ココログのシステムが新しくなってから1年経った。マイフォトの旧システムではテンプレがいくつか用意されていて、その中からデザインを選ぶ事ができたが、新しい方はそれができず、できるようにする気もないみたい。

既定のデザインでもシンプルで悪くはないとは思うのだが、なんだかもの足りない。

(個別ページ)

ソースを見たらDIVタグにclass名が設定されているので、CSSファイルを差し替えてやれば、デザイン変更は簡単にできそうに思える。

まぁ、技術的には簡単だけど、たぶんカッチョ良いデザインを考えるのが大変なんで、やらないんだろう。ホント、そこが一番大変だろうと思う。変なデザインだったら、ダサいとかなんとか言われて叩かれるだけだし余計面倒くさい。

そういえば旧システムのテンプレも、やっつけ仕事っぽかった。（笑）

---

で、アルバムの設定→設定→アルバムの基本情報の「説明文／紹介文」のところ、新システムリリース直後は全然タグが通らない仕様になっていたが、今は比較的何でも入力できるようになっている。
少なくともSCRIPTタグで外部のJavaScriptが呼び出せてしまう事には気が付いていた。

ひょっとしたら自力でデザインをいじれるかもしれない。

そう思って、試しにCSSタグを直接ココに書き込んでみることにした。

---

トライ＆エラーを繰り返してだが、背景画像の変更に成功…。

こんな感じね。

ブログ同様、背景(body)をいつもの薄い英文柄に変え、画像(.PhotoList img, .Photo img)にフチを付けて影を付けた。
隣り合う画像のサイズによって上下にグレーの余白(.ItemBox)ができてしまうので、そこには適当な縦縞柄に変更。

それだけで結構印象が変わる。

ここまでで、「説明文／紹介文」の本文の後ろに書き込んだタグはこんな感じ。

<style>body {background: #FFFFFF url("◆◆◆") repeat;} .ItemBox {background: url("■■■") repeat;} .PhotoList img, .Photo img {border: 1px solid #CCC;background-color: #FAFAFA;padding: 5px; box-shadow: 3px 3px 5px 2px #999999;}</style>

◆◆◆＝全体背景に指定したい画像のURL
■■■＝余白部分に指定したい画像のURL

背景などに使う画像をどこにアップロードしておこうかとちょっと悩んだが、よくよく考えたらこれってフォトアルバムのシステムじゃないか。（笑）
作業用の適当なアルバムを一個作り、背景に使用する画像などをアップロードすれば良いだけだった。

---

もうちょっと改造しよう。

ヘッダー部分(.header)がまだ白いままなので、そこにも画像を設定。

それからバナーをどこかに設置したいが、今の位置では邪魔なので、少し小さくして右上に移動。これはインラインで対処。

すると、個別ページの「一覧に戻る」ボタンにぶつかったので、「一覧に戻る」ボタンの方をちょっと下に移動。ソース上、class="btn"が設定されていたので、それを指定すればイケるんじゃないかと思ってやってみたら、画像左右のボタンが壊れた（笑）ので、やむなく（？）class="header__inner__menu-wrap"から指定。

結果、ブラウザの幅を変化させたときに、本文と「一覧に戻る」ボタンが被らないようになっていたが、その部分が機能しなくなった………が、まあいいや。（笑）

あと、IEで表示できないみたいだが、これもどうでもいいや。（大笑）

最終的に「説明文／紹介文」の本文の後ろに書き込んだタグはこんな感じ。

<A HREF="★★★"><IMG SRC="●●●" style="width: ●px; height: ●px;background-color: #FAFAFA;padding: 3px;position:absolute;right: 17px;top: 7px;"></A><style>body {background: #FFFFFF url("◆◆◆") repeat;} .header {background: url("▲▲▲") repeat;} .ItemBox {background: url("■■■") repeat;} .PhotoList img, .Photo img {border: 1px solid #CCC;background-color: #FAFAFA;padding: 5px; box-shadow: 3px 3px 5px 2px #999999;} .header__inner__menu-wrap .btn {position:absolute;right: 20px;top: 60px;}</style>

★★★＝バナークリック時の飛び先のURL
●●●＝バナー画像URLと縦横のピクセル数
◆◆◆＝全体背景に指定したい画像のURL
▲▲▲＝ヘッダー背景に指定したい画像のURL
■■■＝余白部分に指定したい画像のURL

※参考にされる方はどうぞ。

尚、上手くいかない場合の質問は受け付けませんのでご承知おき下さい。
ちなみにタグ内は改行禁止です。なぜ改行禁止なのかが理解できない方は、たぶん失敗すると思うので、やらない事をお勧めします。

CSSファイルを作って、それを呼び出すようにした方がメンテは楽だと思うが、アルバムごとにデザインを変える場合は直接コピペして直した方が楽なような気もするし、そこは一長一短かも。

---

それで、カッコいいデザインになったかというと……うーん、イマイチ。

追々改造を続けます。