這篇教學是記錄我把 GIF 動圖放到巴哈姆特小屋的過程,如果你也有這方面的困擾,敬請參考這篇文章~
首先,要讓 GIF 動圖完整呈現,必須要將圖檔存放在支援 GIF 格式的圖床,這樣嵌入到文章時才不會發生圖動不起來的尷尬情況。
在這邊萊德是以 Giphy.com 這個圖床做為示範, GIF 呈現的是台灣獨立開發團隊 Caliburn Studio 的最新 RPG 遊戲《泡泡星球的娜塔莉》的主角娜塔莉的角色行走圖。
起初開發日誌是 PO 在 Blogger 系統,所以可以直接使用以下 HTML 語法嵌入:
<a href="http://gph.is/1ZeVD0Z"><img src="http://i.giphy.com/3o72F7mwmU0CHDYkJq.gif" /></a>
但是當我 Copy 文章,轉載到我的小屋並發佈之後, GIF 動圖卻一直出不來(文章內圖片的位置只有顯示嵌入語法),這代表 HTML 嵌入圖片的語法,無法直接轉換成巴哈姆特小屋所使用的語法,必須自己手動修改小屋文章的原始碼。
經過一番研究,我找出巴哈小屋文章要如何嵌入 GIF 動圖的語法了,如下圖所示:
[div align=圖片位置][size=圖片大小][url=你的 GIF 圖檔網址][img=你的 GIF 圖檔網址 height=圖檔高度 width=圖檔寬度][/url][/size][/div]
複製以上語法並稍作修改並貼上小屋 " 原始碼 " 區塊後,在切換到 " 所見所得 " ,就能看到圖片囉 !
再把文章儲存或發佈,就能夠看到 GIF 在動了~ 歡迎讀者前往我的小屋觀看 GIF 的嵌入效果~
http://home.gamer.com.tw/creationDetail.php?sn=3210952
開發日誌原文在此:
[ 開發日誌 ] WK01 《泡泡星球的娜塔莉》 開發紀錄 Round 2
http://www.caliburn.tw/2016/06/wk01-round-2.html
如何在巴哈姆特小屋文章中加入 GIF 動圖的教學就到這邊~
希望對你有幫助~
我們下次見~