[教學] Flickr Album Maker 在部落格上的應用

有朋友問艾瑪

http://www.wretch.cc/blog/amarylliss&article_id=5056228
照片排放的好讚

我也有使用album maker
但是我摳他原始碼之後.排出來的都是垂直一列

目前我唯一的作法是去掉</p><p>
勉強可以讀到一堆的小圖
但是沒有辦法像你文中如此美觀

我查了好多好多辜狗資料.完全不得要領.
SO..真的是很抱歉
可以請你告訴我你的小訣竅嗎?

這是一個有使用 Flickr 相本的人才會需要懂得的簡易相本做法。

1. 首先，當然是要將所有照片上傳至 Flickr。
2. 再來，請到 Flickr Album Maker 選擇你要放入相本的所有照片。
3. 選取所有相本中的HTML碼。

通常前面這三步大家都不會出錯，小妮二月的時候也問過我這個問題。但是，一貼到網誌上之後，就會變成這個樣子：

怎麼辦？很簡單！

如果跟我一樣，不選個人相本圖示也不加入標題的話，利用Flickr Album Maker之後，程式碼會顯示成下面這個樣子：

---

<style>
.Album { width: 625px; background: #f5f5f5; padding: 5px;}
.AlbumHeader { text-align:center; padding-left:0px; }
.AlbumHeader h3 { font: normal 24px Arial, Helvetica, sans-serif; color: #FF0084; text-align: center; }
.AlbumHeader h4 { font: 16px Caflisch Script,cursive; color: #660033; text-align: center; }
.AlbumPhoto { background: #f5f5f5; margin-bottom: 10px; }
.AlbumPhoto p { float: left; padding: 4px 4px 12px 4px; border: 1px solid #ddd; background: #fff; margin: 8px; }
.AlbumPhoto img { border: none; }
</style>

<div class="Album">
<div class="AlbumHeader"><h4></h4></div>
<br clear=all>
<div class="AlbumPhoto"><p><a href="http://www.flickr.com/photos/amarylliss/165105839" target="_blank" class="flickrImage"><img src="http://static.flickr.com/58/165105839_988a472130_s.jpg" border="0" class=""></a></p>
<p><a href="http://www.flickr.com/photos/amarylliss/165105808" target="_blank" class="flickrImage"><img src="http://static.flickr.com/57/165105808_8132e9eaf7_s.jpg" border="0" class=""></a></p> 重複的照片語法省略
</div>
<br clear=all>
<p align="right"><font style="font-size:10px;color:#AABBCC;">Generated by <a href="http://webdev.yuan.cc/famaker.php" target="_blank" style="color:#AABBCC;text-decoration: underline;">Flickr Album Maker</a></font></p>
</div>

---

我用顏色區分成兩個部分

1. 第一個部分是由 <style>到</style>，這個部分請去除<style>和</style>，將其餘藍色的CSS設定貼入你的網誌樣式CSS中。像我的CSS中就是這樣設定：

    /**Flickr Album Maker**/

   .Album { width: 500px; background: #f5f5f5; padding: 5px;}
   .AlbumHeader { text-align:center; padding-left:0px; }
   .AlbumHeader h3 { font: normal 24px Arial, Helvetica, sans-serif; color: #FF0084; text-align: center; }
   .AlbumHeader h4 { font: 16px Caflisch Script,cursive; color: #660033; text-align: center; }
   .AlbumPhoto { background: #f5f5f5; margin-bottom: 10px; }
   .AlbumPhoto p { float: left; padding: 4px 4px 12px 4px; border: 1px solid #ddd; background: #fff; margin: 8px; }
   .AlbumPhoto img { border: none; }

   　

2. 第二個部分是紅色的 <div class="Album">到 </div>（綠色的部分其實可以刪除，如果你沒有用到Flickr 個人圖示和相本標題的話），這整個紅色的部分都是要貼到文章本文中的。如果貼好的話應該會像下方這樣：
   　

　

Generated by Flickr Album Maker

就這麼簡單，重點就在於把CSS碼正確地貼到網誌樣式中，並且將 Flickr Album Maker 所產生出來的碼，貼到他該貼的地方，一切就會非常完美，世界和平！

延伸閱讀

• [語法分享] 彈跳式視窗
• [教學] AdSense表格語法@無名小站banner&邊欄
• 台灣艾瑪的Plurk帳號&無名Plurk外掛搞怪篇(用buboo和圖片做出Plurk同步)
• 利用Plurk Backup將日記貼回部落格的方法
• 難道學校的電腦老師沒教過你嗎？密件副本的使用方式
• 台灣艾瑪的Plurk帳號&無名Plurk外掛搞怪篇(用buboo和圖片做出Plurk同步)
• 肥皂盒 Soapbox：瘋狂推薦好用的影音相本
• funP數字推鈕＠無名小站- 在無名小站玩funP