※フォレストユーザー専用

フォレストのMyアルバムを装飾するテンプレ

HPでイラストを公開している方も多いことでしょう。フォレストで画像を公開するならば避けて通れない「Myアルバム」機能。公開倉庫やカテゴリの「デザインの編集」という項目を活用すれば、ある程度カスタマイズが可能です。
まずは実際に装飾したMyアルバム機能を見てください。

◆ Myアルバム1

どうでしょうか。見慣れた森のアルバムっぽくない…ような気がしませんか。
こちらは以下のタグを使ってます。

▼[公開倉庫の設定]→[デザインの編集]
画面上部

<div style="text-align:center;" align="center"><div style="color:#000000;width:90%;max-width:400px;border:3px solid #dfdfdf;border-radius:20px;background:#dfdfdf url(素材URL) repeat;box-sizing:border-box;margin:0 auto 30px;padding:0;text-align:right;"><h2 style="text-align:center;">Ａｌｂｕｍ</h2><div style="margin:0 auto;padding:10px;background:#f9f9f9;text-align:left;line-height:1.5;">写真やイラスト。<br>↑new old↓

画面下部

</div><br><p style="margin:0;padding:0 10px 0 0;">主な使用画材<br>PhotoshopCS5</p><br></div></div>

▼[カテゴリの設定]→[デザインの編集]
画面上部

<div style="text-align:center;" align="center"><div style="color:#000000;width:90%;max-width:400px;border:3px solid #dfdfdf;border-radius:20px;background:#dfdfdf url(素材URL) repeat;box-sizing:border-box;margin:0 auto 30px;padding:0;text-align:right;"><h2 style="text-align:center;">Ａｌｂｕｍ</h2><div style="margin:0 auto;padding:10px;background:#f9f9f9;text-align:left;line-height:1.2;">▽category

画面下部

</div><br><p style="margin:0;padding:0 10px 0 0;">designed by <a href="http://id35.fm-p.jp/291/western442/">hkgaigai</a></p><br></div></div>

※それぞれの画面上部のタグの中にあるurl(素材URL)の部分、カッコ→url()は消しちゃだめですよ。

これらを公開倉庫(実際に絵が並んでいる目次ページ)と、カテゴリ(種類別に分けてあるページ)の、デザイン編集欄に貼ります。(カテゴリを使用していないひとはカテゴリの設定は必要ありません。)
下図参照。(Myアルバムの管理画面「デザイン編集」欄スクショ)

また、画面上部に勝手に出てくるタイトルが邪魔なので「タイトル設定」でタイトルの文字色を背景と同じ色(ホワイト)にして見えなくしておきます。(PCでご覧の方はアルバム内で画面の上部を反転してみればわかります)
同じように「色設定」の「区切り線の色」も背景色と同じ色にしています。

---

◆ Myアルバム2

テンプレつる植物のアルバム機能バージョンです。

▼[公開倉庫]
画面上部

<div style="text-align:center;" align="center"><div style="color:#666666;width:300px;border-radius:20px;background:#f8dcf8 url(素材URL) repeat-y 100% 0%;box-sizing:border-box;margin:0 auto 30px;padding:0;text-align:right;"><h2 style="color:#ffffff;font:40px/0.6 serif;margin:0;padding:0;">ＩＭＡＧＥ<br><span style="color:#aaaaaa;font:30px/0.4 serif;display:block;padding-right:5%">ｉｍａｇｅ</span></h2><div style="margin:0 auto;padding:16px 16px 3px;text-align:left;line-height:1.3;"><br>↑new old↓

画面下部

<p style="margin:0;padding:0;text-align:right;">使用画材/PhotoshopCS5</p></div></div></div>

▼[カテゴリ]
画面上部

<div style="text-align:center;" align="center"><div style="color:#666666;width:300px;border-radius:20px;background:#f8dcf8 url(素材URL) repeat-y 100% 0%;box-sizing:border-box;margin:0 auto 30px;padding:0;text-align:right;"><h2 style="color:#ffffff;font:40px/0.6 serif;margin:0;padding:0;">ＩＭＡＧＥ<br><span style="color:#aaaaaa;font:30px/0.4 serif;display:block;padding-right:5%">ｉｍａｇｅ</span></h2><div style="margin:0 auto;padding:16px 16px 3px;text-align:left;line-height:1.3;"><br>▽category

画面下部

<p style="margin:0;padding:0;text-align:right;">designed by <a href="http://id35.fm-p.jp/291/western442/">はくがいがい</a></p></div></div></div>

---

◆ Myアルバム3

daydreamは「空想」とか「想像」って意味です。ちなみにI was just daydreaming.で「ぼーっとしてただけ」

▼[公開倉庫]
画面上部

<div style="text-align:center;"><div style="background:#ffffff url(素材URL) no-repeat 0% 0%;color:#000000;width:300px;margin:0 auto 20px;padding:12px 12px 3px;text-align:left;line-height:1.3;border:1px solid #8daac7;border-radius:10px;box-sizing:border-box;"><h2 style="text-align:center;font:30px/1 serif;color:#000000;">daydream</h2><br>↑new old↓

画面下部

<div align="right" style="font-size:small;">I was just daydreaming...</div></div></div>

▼[カテゴリ]
画面上部

<div style="text-align:center;"><div style="background:#ffffff url(素材URL) no-repeat 0% 0%;color:#000000;width:300px;margin:0 auto 20px;padding:12px 12px 3px;text-align:left;line-height:1.3;border:1px solid #8daac7;border-radius:10px;box-sizing:border-box;"><h2 style="text-align:center;font:30px/1 serif;color:#000000;">daydream</h2><br>▽category

画面下部

<div align="right" style="font-size:small;">designed by <a href="http://id35.fm-p.jp/291/western442/">hkgaigai</a></div></div></div>

---

気が向いたら増えます……が、HP一つにつきMyアルバム機能は一つしか作れないので、数的にこれで限界です。これ以降のMyアルバムのテンプレは、スクリーンショットとタグを置くことになります。